CSS Introduction

📣 Sponsor

Along with the structural components of a website created with HTML, CSS is an integral part of creating a truly unique and interactive web experience. As the name suggests, CSS or Cascading Stylesheets is the primary way to change the color, font, positioning and visual look of HTML elements.

CSS is often complicated because many modern web frameworks like React use slightly modified versions of CSS in their code. Similarly, other CSS only engines have cropped up like SASS attempt to make CSS more like a programming language. In this introduction, we will be focusing on pure CSS only.

Where CSS is found

CSS can be found in three main places:

inline styles: CSS can be found attached to individual HTML elements in the style property.
separate files: CSS can be found in separate files, and included in an HTML document.
inside HTML: CSS can be found inside its own style tags in an HTML file.

Here are some examples of where you might find CSS inside HTML:

Separate files, included in an HTML document:


    <link rel="stylesheet" type="text/css" href="style.css">

Inline styles, on a particular HTML element:


    <p style="color: red;">A paragraph</p>

Inside HTML, in its own style tags:


    <style type="text/css">
        p {
            color: red;
        }
    </style>

Syntax

CSS has a very simple syntax. HTML tags can be selected with selectors. Anything within the curly brackets after that tag, is applied to any element which matches the selector. So for example, the below will change every paragraph red:


p {
    color: red;
}

As you can see, styling a particular selector is done with the following syntax: property: value;. Collectively, this single property value combination is called a declaration. Properties refer to specific properties an HTML tag could have, for example, the padding around it, or the color of its text. The value is then the value of that property. Above, the value is set to red.

CSS has a number of keywords which are value. For colors, things like red, green, blue, and other standard colors all work. You can also use other formats, such as hexadecimals and rgb, as shown below:


p {
    color: rgb(34, 34, 11);
}
span {
    color: #eeeeee;
}
li {
    color: rgba(24, 24, 11, 0.5);
}
body {
    background: hsl(0, 100%, 50%);
}

Other properties may use numerical values. Often these can be in pixels, but CSS has a number of other CSS specific units that it uses. We will not cover these here, but an example of an element with a numeric unit looks like this:


p {
    padding: 10px;
}

This would add 10px on each side of an object. With properties like padding, and margin, where each side can be affected differently, you can also split it into 4. For example, with padding, you can do padding: top right bottom left;:


p {
    padding: 10px 5px 10px 10px;
}

The above adds a padding of 10px to every side except the right hand side, which only gets 5px. Some properties have more complicated values, such as border. The below gives all paragraph a 1px black border:


p {
    border: 1px solid black;
}

Another common syntax you may see in CSS is the comment, which gives context and notes to what the developer was trying to do. Comments are enclosed in /* and */.


/* We need to give all paragraphs a 1px border */
p {
    border: 1px solid black;
}

Next up, let's think a little bit about selectors.

Priority and Specificity

One of the continuing themes of CSS is priority or specificity. It is called cascading stylesheets because the last elements have a higher priortity, i.e. they will override earlier elements. i.e. the below example with make the div have red text, not blue.


div {
    color: blue;
}
div {
    color: red;
}

Different elements in CSS have different priorities. If two elements have the same priority, then the last element will override the earlier one. However, there are some rules. Different selectors will have different scores, and the highest score will override other styles.

Inline Styles - CSS directly in the HTML tag, i.e. style="" have a score of 1000.
IDs - #selector will give a selector a score of 100.
Classes - .selector will give a selector a score of 10.
Pseudo elements - :pseudo-element will give a selector a score of 10.
Regular elements - i.e. li or div have a score of 1.

Examples

#id label - 1 id, 1 item, total score 101
#id .name - 1 id, 1 class, total score 110
div ul li - 3 items, total score 3
.name .class #page - 1 id, 2 classes, total score 120

As mentioned, a higher score denotes that the styles within that selector will override earlier ones. As such, it is important to check the specificity of a style when wondering why some CSS isn't working. If you can't change a selector, you can also use the keyword !important in your CSS. Lines of CSS with !important will override other CSS regardless of their specificity scores:


div {
    color: red !important;
}

Last Updated 1617477820615