4.3 CSS Styling

Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Why Use CSS?

  • Separation of concerns (content vs. presentation)
  • Consistent styling across multiple pages
  • Easier maintenance
  • Better accessibility
  • Responsive design capabilities

CSS Syntax

CSS consists of style rules that the browser interprets to style HTML elements. Each rule consists of a selector and a declaration block.

selector {
    property: value;
    another-property: value;
}

Example:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

This will make all <h1> elements blue, with a font size of 24 pixels, and center-aligned.

CSS Selectors & Specificity

Basic Selectors

Selector Example Description
Element p Selects all <p> elements
Class .intro Selects all elements with class="intro"
ID #header Selects the element with id="header"
Universal * Selects all elements
Attribute a[target] Selects all <a> elements with a target attribute

Combinators

Combinator Example Description
Descendant div p Selects all <p> elements inside <div> elements
Child div > p Selects all <p> elements where the parent is a <div>
Adjacent Sibling div + p Selects the first <p> that is immediately after a <div>
General Sibling div ~ p Selects all <p> elements that are siblings of a <div>

Specificity

When multiple rules apply to the same element, the more specific rule takes precedence. The order is:

  1. Inline styles (highest specificity)
  2. IDs
  3. Classes, attributes, and pseudo-classes
  4. Elements and pseudo-elements (lowest specificity)

The Box Model

Every element in CSS is a rectangular box with these properties:

Property Description
width and height Content area dimensions
padding Space between content and border
border Border around the element
margin Space outside the border 
.box {
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
    margin: 10px;
    background-color: #f0f0f0;
}

Box-Sizing

By default, padding and border are added to the element's width/height. Use box-sizing: border-box to include them in the element's total width/height.

* {
    box-sizing: border-box;
}

CSS Layout

1. Display Property

Value Description
block Starts on a new line and takes full width
inline Flows with text, doesn't start a new line
inline-block Flows like inline, but can have width/height
flex Enables flexbox layout
grid Enables grid layout

2. Flexbox

Flexbox is a one-dimensional layout method for laying out items in rows or columns.

1
2
3
.container {
    display: flex;
    justify-content: space-between; /* Main axis alignment */
    align-items: center;    /* Cross axis alignment */
    gap: 10px;              /* Space between items */
}

3. CSS Grid

Grid is a two-dimensional layout system for the web.

1
2
3
4
5
6
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 20px;                         /* Gap between grid items */
}

Responsive Design

1. Viewport Meta Tag

Include this in your HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Media Queries

Apply different styles based on device characteristics (like screen width):

/* Default styles */
.container {
    width: 100%;
    padding: 10px;
}

/* For tablets */
@media (min-width: 600px) {
    .container {
        width: 80%;
        margin: 0 auto;
    }
}

/* For desktops */
@media (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

3. Responsive Units

Unit Description
% Percentage of the parent element
vw 1% of viewport width
vh 1% of viewport height
rem Relative to root element's font-size
em Relative to parent element's font-size

Transitions & Animations

1. Transitions

Animate changes to CSS properties:

Hover me!
.box {
    background: #ff9800;
    transition: all 0.3s ease;
}

.box:hover {
    transform: rotate(15deg);
    background: #ff5722;
}

2. Animations

Create complex animations with keyframes:

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-20px); }
}

.box {
    animation: bounce 1s infinite alternate;
}

Practice Activity

Create a responsive webpage with:

  1. A header with navigation that collapses into a hamburger menu on mobile
  2. A main content area with a grid of cards (3 columns on desktop, 2 on tablet, 1 on mobile)
  3. A footer with social media links
  4. Add hover effects to interactive elements
  5. Make sure text is readable on all screen sizes

Use flexbox or grid for layout and include at least one media query.