WebDevGrad: CSS

Introduction To CSS

HTML provides the structure of a webpage, but it's not enough to create visually appealing, user-friendly sites because HTML was designed for content, not design. The appearance is handled with CSS (Cascading Style Sheets) which allows us to separate content, in the form of HTML, from presentation, in the form of CSS. This clear delineation and separation of function makes websites easier to design and maintain.

CSS is used to describe how HTML elements look including the colour and size of elements, their layout and how they change depending on your screen size.

CSS Syntax

Each “block” of CSS that we write is referred to as a CSS Rule. These rules are made up of a selector and one or more declarations.

The selector tells us what part of the website the rule applies to and the declarations tell us what changes to apply to that part. The declarations are grouped inside curly brackets and are made up of a property: value pair separated by semi-colons.

The general syntax of a rule is the selector on one line with a space before the opening curly bracket, then go down a line and tab once in to put your first declaration property: value pair ending the line with a semi-colon. If there is a second declaration property: value pair, go to the next line and tab to the same indent level and repeat the process. When finished with your declarations, go down another line and close the curly bracket on the same indent level as the selector.

As an example, the following CSS rule selects a paragraph element, p, and adds the declaration of making it bold and green.

        
p {
    font-weight: bold;
    color: green;
}

Leave an empty space between each CSS rule in your .css file.

Including CSS in HTML

CSS rules are often saved as an external .css file which can apply to the whole website, or just some pages, depending on how you link them. Without a CSS file, they can styled inline directly in the HTML with style attribute.

<p style='color: orange; font-size: 20px;'></p>

The makes the HTML code very cumbersome and is only useful in some niche scenarios.

Alternatively the style rules can be defined within a <style></style> element inside the <head></head> element. This is known as internal styling.

        
<head>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>


    

The best way to include styling rules is externally from their own .css file, often saved under static/css/base.css or similar. This is then linked in the <head></head> element in a self closing <link></link> element.

        
<head>
    <link href='url.css' rel='stylesheet'>
</head>

Linking Multiple CSS Files

@import is used to import one stylesheet into another. This allows a chain of CSS files and you can use it to import CSS rules from the web to your website such as a cool new font from Google Fonts, explained further here.

CSS Comments

Like HTML, you can put comments in CSS code that are only there for humans to read and will not be read by the browser. The sytanx for this is:

/* Single line comment */

        
/* 
    This is a
    multi-line
    comment
*/

Specificity

CSS specificity determines which styles are applied to an element when multiple rules target the same element. The browser uses a hierarchy to decide which declaration takes precedence; from lowest specificity of type selectors, through class selectors, up to ID selectors. More on selectors can be found here.

When two selectors have the same specificity, CSS is read from top to bottom, so the latter declaration in the stylesheet will override the former. However, you can force a style to override all others by using the !important declaration, like so:

        
p {
    color: green !important;
    font-size: large;
}
p {
    color: blue;
    font-size: small;
}


    

Even though the declaration for the blue paragraphs comes second, it does not overwrite the !important green rule. However, the font-size does not have the !important, so the browser would take this second declaration over the former, so you would end up with a blue paragraph with small font.

Colours

Colours can be assigned as values to many different CSS declarations and take the values outlined in our colour theory section. These range from the colour of your text or background colours to border colours or shadows around boxes. Another keyword value that can be taken is transparent to make something transparent.