Skip to main content

CSS Basics

CSS (Cascading Style Sheets) is the foundation of web design. Let's start with the fundamentals.

What is CSS?​

CSS is a language used to style and layout web pages. It describes how HTML elements should be displayed:

  • Cascading - Rules flow from top to bottom and can override each other
  • Style - Controls the appearance (colors, fonts, spacing, etc.)
  • Sheets - Collections of rules in separate files

How to Add CSS​

1. Inline CSS​

Apply styles directly to HTML elements:

<p style="color: blue; font-size: 18px;">This is blue text</p>

⚠️ Avoid: Not recommended for large projects as it mixes HTML and CSS.

2. Internal CSS​

Place CSS in the <head> section using <style> tags:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This is blue text</p>
</body>
</html>

Link to an external CSS file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This is styled text</p>
</body>
</html>

styles.css:

p {
    color: blue;
    font-size: 18px;
}

✅ Best Practice: External CSS keeps HTML and CSS separate and is reusable.

CSS Syntax​

A CSS rule has two parts: a selector and a declaration block.

/* Selector */
p {
    /* Declaration Block */
    color: blue;           /* Property: Value */
    font-size: 18px;       /* Property: Value */
    margin: 10px;          /* Property: Value */
}

Components​

PartPurposeExample
SelectorTargets HTML elementsp, .class, #id
PropertyWhat to stylecolor, font-size
ValueHow to style itblue, 18px
DeclarationProperty-Value paircolor: blue;

CSS Selectors​

Selectors are patterns that target HTML elements.

1. Element Selector​

Targets all elements of a type:

p {
    color: blue;
}

Applies to: <p>Hello</p>

2. Class Selector​

Targets elements with a specific class:

.highlight {
    background-color: yellow;
}
<p class="highlight">Important text</p>

3. ID Selector​

Targets a single element with a specific ID:

#header {
    background-color: navy;
    color: white;
}
<div id="header">Page Header</div>

4. Attribute Selector​

Targets elements with specific attributes:

input[type="text"] {
    border: 1px solid gray;
}

a[href*="example"] {
    color: purple;
}

5. Pseudo-class Selector​

Targets elements in a specific state:

a:hover {
    color: red;
}

button:active {
    transform: scale(0.95);
}

input:focus {
    outline: 2px solid blue;
}

Common Pseudo-classes:

  • :hover - When user hovers over element
  • :active - When element is clicked
  • :focus - When element receives focus
  • :visited - Visited links
  • :first-child - First child of parent
  • :last-child - Last child of parent
  • :nth-child(n) - Nth child of parent

6. Pseudo-element Selector​

Targets specific parts of elements:

p::first-line {
    font-weight: bold;
}

p::before {
    content: "→ ";
}

Common Pseudo-elements:

  • ::before - Before content
  • ::after - After content
  • ::first-line - First line
  • ::first-letter - First letter
  • ::selection - Selected text

7. Combinators​

Combine multiple selectors:

/* Descendant (any level deep) */
div p {
    color: blue;
}

/* Child (direct child only) */
div > p {
    color: red;
}

/* Adjacent sibling (immediately after) */
h2 + p {
    margin-top: 0;
}

/* General sibling (any after) */
h2 ~ p {
    color: gray;
}

Colors in CSS​

Color Formats​

/* Named colors */
color: red;
color: blue;

/* Hex colors (6 digits: #RRGGBB) */
color: #FF0000;      /* Red */
color: #00FF00;      /* Green */
color: #0000FF;      /* Blue */

/* RGB colors (Red, Green, Blue 0-255) */
color: rgb(255, 0, 0);      /* Red */
color: rgb(0, 255, 0);      /* Green */
color: rgb(0, 0, 255);      /* Blue */

/* RGBA colors (RGB + Alpha 0-1) */
color: rgba(255, 0, 0, 0.5);  /* Red with 50% opacity */

/* HSL colors (Hue, Saturation, Lightness) */
color: hsl(0, 100%, 50%);   /* Red */

Using Colors​

p {
    color: #333333;              /* Text color */
    background-color: #FFFFFF;   /* Background color */
    border: 2px solid #0066cc;   /* Border color */
}

Common CSS Properties​

Text Properties​

p {
    color: #333;                    /* Text color */
    font-size: 16px;                /* Text size */
    font-weight: bold;              /* Font thickness */
    font-family: Arial, sans-serif; /* Font type */
    text-align: center;             /* Text alignment */
    line-height: 1.6;               /* Space between lines */
    text-decoration: underline;     /* Underline, overline, etc. */
    text-transform: uppercase;      /* Text case transformation */
}

Box Properties​

div {
    width: 300px;           /* Width */
    height: 200px;          /* Height */
    margin: 20px;           /* Space outside */
    padding: 15px;          /* Space inside */
    border: 1px solid gray; /* Border */
    background-color: blue; /* Background */
}

Display & Positioning​

div {
    display: block;      /* block, inline, inline-block, flex, grid */
    position: absolute;  /* static, relative, absolute, fixed, sticky */
    top: 10px;          /* Position from top */
    left: 20px;         /* Position from left */
}

Cascading & Specificity​

CSS rules cascade - later rules override earlier ones:

p { color: blue; }      /* First rule */
p { color: red; }       /* Overrides: text is RED */

Specificity Rules​

Some selectors are more specific than others:

p { color: blue; }                  /* Specificity: 1 (element) */
.highlight { color: red; }          /* Specificity: 10 (class) */
#main { color: green; }             /* Specificity: 100 (ID) */
<p style="color: yellow;"> /* Specificity: 1000 (inline) */

Specificity Order (low to high):

  1. Element selectors
  2. Class selectors
  3. ID selectors
  4. Inline styles

The !important Rule​

Override all specificity (use rarely!):

p {
    color: blue !important;  /* Highest priority */
}

⚠️ Avoid !important - It makes debugging harder and can cause issues.

Comments in CSS​

Write notes and explanations:

/* Single line comment */

/*
   Multi-line comment
   Useful for explaining sections
*/

/* Main navigation styles */
nav {
    background-color: navy;
}

Real-World Example​

Let's create a styled button:

<!DOCTYPE html>
<html>
<head>
    <style>
        .btn {
            padding: 12px 24px;
            font-size: 16px;
            background-color: #0066cc;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background-color: #0052a3;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <button class="btn">Click Me</button>
</body>
</html>

Best Practices​

  1. Use External CSS - Keep CSS in separate files
  2. Use Classes - Prefer classes over IDs for styling
  3. Keep Selectors Simple - Avoid deeply nested selectors
  4. Use Meaningful Names - .main-header instead of .h1
  5. Organize Code - Group related styles together
  6. Don't Use Inline Styles - Use classes instead
  7. Comment Your Code - Explain complex styles
  8. Use Shorthand - margin: 10px; instead of separate properties

Common Mistakes​

❌ Wrong:

p style="color: red;"    /* Mixing HTML and CSS */
#main #content p { }     /* Over-specific selector */
* { margin: 0; }         /* Affects everything */

✅ Right:

<link rel="stylesheet" href="styles.css">  /* External CSS */
.content p { }                              /* Simple selector */
body { margin: 0; }                         /* Target specific element */

Next Steps​

Now that you understand CSS basics, you're ready to:

  1. Learn the Box Model & Layout
  2. Master Flexbox & Grid
  3. Create Responsive Designs

Keep practicing and experimenting with CSS! 🎨