H4 - Adding CSS

01 - Separating structure and design

HTML describes the content and structure of a page.
CSS describes the design of a page.
CSS is a different language from HTML. You write CSS rules, not HTML tags.
HTML says what something is. CSS decides how it looks.
This separation makes websites easier to maintain and expand.

<h1>Welcome to my website</h1>
<p>This is the first paragraph.</p>

h1 {
    color: navy;
}

p {
    color: black;
}

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

02 - Three ways to add CSS

You can use CSS in three ways:

Inline CSS
Embedded CSS
External CSS

External CSS is usually the best choice for real websites.

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

03 - Linking CSS in the head

External CSS is stored in a separate text file, for example style.css. Link it from the <head> of your HTML document.

<head>
    <title>My website</title>
    <link rel="stylesheet" href="style.css">
</head>

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

04 - How a CSS rule works

A CSS rule consists of a selector, curly brackets, properties and values.

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

p is the selector.
The brackets contain the declarations.
color and font-size are properties.
blue and 18px are values.
Each declaration ends with a semicolon.

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

05 - Example with font, color and alignment

body {
    font-family: Arial, sans-serif;
    color: black;
}

h1 {
    color: darkblue;
    text-align: center;
}

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

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

06 - Styling text and fonts

font-family chooses the font.
font-size changes the size.
font-weight changes the thickness.
text-align aligns text left, right, center or justified.

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

07 - Reading from top to bottom

CSS is read from top to bottom. If two rules have the same strength and target the same element, the lower rule wins.

p {
    color: blue;
}

p {
    color: red;
}

The paragraph becomes red, because the second rule comes later.

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

08 - Why is my CSS not working?

Check whether the CSS file is linked in the <head>.
Check whether the file name is spelled exactly right.
Check brackets, colons and semicolons.
Check whether another rule later in the file overrides your rule.

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

09 - What does !important do?

!important gives a declaration extra force. It can override other CSS rules. Use it only as a last resort, because it makes CSS harder to understand.

p {
    color: blue !important;
}

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

10 - CSS best practices

Use external CSS for most styling.
Keep selectors simple while learning.
Group related rules together.
Use clear names when you later work with classes.
Avoid unnecessary repetition.

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

11 - Checking CSS with the W3C CSS Validator

Use the W3C CSS Validator to check your CSS for mistakes.

Open the CSS validator.
Paste your CSS code.
Run the check.
Fix the first error first and test again.

Practice

Apply this CSS concept in your practice file.
Change one value and immediately check what changes in the browser.

Quiz