CSS Errors

CSS Errors

CSS errors occur when stylesheets contain incorrect syntax, misspelled properties, invalid values, or incorrect selectors. These errors may prevent CSS styles from working as expected.

Unlike some programming languages, CSS usually does not stop completely when it encounters an error. Browsers generally ignore invalid CSS declarations and continue processing the remaining valid styles.

1. Common CSS Errors

Here are some common CSS errors beginners may encounter.

Missing Semicolon

A semicolon separates CSS declarations. Forgetting a semicolon can cause unexpected results.

Incorrect Example:

p {
    color: red
    font-size: 20px;
}

Correct Example:

p {
    color: red;
    font-size: 20px;
}

Missing Curly Braces

CSS rules require opening and closing curly braces.

Incorrect Example:

h1
    color: blue;
    font-size: 30px;

Correct Example:

h1 {
    color: blue;
    font-size: 30px;
}

Incorrect Property Name

CSS property names must be written correctly. A misspelled property will be ignored by the browser.

Incorrect Example:

h1 {
    colur: red;
}

Correct Example:

h1 {
    color: red;
}

Invalid CSS Value

CSS properties must use valid values.

Incorrect Example:

p {
    color: 123;
}

Correct Example:

p {
    color: blue;
}

2. Incorrect CSS Selectors

Selectors identify HTML elements that CSS styles should apply to. Incorrect selectors may prevent styles from being applied.

HTML:

<p class="message">Hello World!</p>

Incorrect CSS:

message {
    color: red;
}

Correct CSS:

.message {
    color: red;
}

Remember:

• Use . for class selectors.
• Use # for ID selectors.
• Use the element name for element selectors.

3. Incorrect CSS Units

Some CSS properties require units such as px, %, em, or rem.

Incorrect Example:

p {
    font-size: 20;
}

Correct Example:

p {
    font-size: 20px;
}

Note: The value 0 does not require a unit in CSS.

4. Incorrect Color Values

CSS supports different color formats, including color names, hexadecimal, RGB, and HSL.

Incorrect Example:

h1 {
    color: #12ZZ45;
}

Correct Example:

h1 {
    color: #12AA45;
}

5. CSS Errors in External Stylesheets

When using external CSS, errors may occur because of incorrect file paths or filenames.

Incorrect HTML:

<link rel="stylesheet" href="style.csss">

Correct HTML:

<link rel="stylesheet" href="style.css">

Make sure the CSS file exists at the specified location and that the filename is correct.

6. How to Find and Fix CSS Errors

Modern browsers provide Developer Tools that help developers identify and debug CSS errors.

Using Browser Developer Tools

1. Open your webpage in Chrome, Firefox, or another modern browser.
2. Right-click the webpage and select Inspect.
3. Open the Elements panel.
4. Select the HTML element you want to inspect.
5. Check the Styles panel to see applied CSS rules.
6. Look for crossed-out declarations, invalid values, or overridden styles.
7. Edit CSS directly in Developer Tools to test possible fixes.

7. CSS Debugging Example

Consider the following CSS code:

h1 {
    colur: red;
    font-size: 30;
    background-color: yellow;
}

This code contains two errors:

• colur should be color.
• font-size: 30 should be font-size: 30px.

Fixed CSS:

h1 {
    color: red;
    font-size: 30px;
    background-color: yellow;
}

8. Best Practices to Avoid CSS Errors

• Always use correct