CSS Basics


Following up from my HTML basics post as nice as it is to have text on the screen but it could really use some colours and change the layout to look a bit nicer. How do we achieve this? With the use of CSS (Cascading Style Sheets).

CSS is used to tell the browser how HTML elements are to be displayed on specific devices. There are a few ways to implement styles on a web page.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block, look at the example CSS rule set below:

p {
   color: green;
   font-size: 25px;
}

The p is a selector that points to the HTML element you want to style.

The declaration block is wrapped in curly braces and contain one or more declarations to style the separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon. In the example above we are changing the color of the text to green and making the font-size 25px.

CSS Selectors

CSS selectors are used to search the HTML for elements you want to style.

Element Selectors

The element selector selects the HTML elements with specified element name. For example to style all p elements you would use the follow CSS.

p {
   color: green;
}

ID selectors

The id selector uses the id attribute of an HTML element to select a specific element. The id is unique and ID selectors are used to select one single element.

To select an element id, write a # character, followed by the id of the element.

#green-text-once {
   color: green;
}

This will make the text green to following HTML with the id attribute.

<h1 id="green-text-once">A header.</h1>

Class selectors

The class selector uses the class attribute of an HTML element to select a specific element.

To select an element class, write a . character, followed by the id of the element.

.green-text-multiple {
   color: green;
}

This will make the text green to following HTML elements with the class attribute.

<h1 class="green-text-multiple">A header.</h1>
<p class="green-text-multiple">A paragraph.</p>

Internal CSS

One way to implement styles on the page is with use of a <style><style> tag placed within the <head></head> tag of a HTML document.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: green;
            }
        </style>
    </head>
    <body>
        <p>A paragraph.</p>
    </body>
</html>

This example is making the text colour green in a p tag.

External CSS

Using external CSS files allows you to change the style across your site in one location. You can use an external CSS with a <link> element placed within the <head></head> tag of a HTML document.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <p>A paragraph.</p>
    </body>
</html>

Within your style.css file.

p {
    color: green;
}

Inline CSS

An inline CSS may be used to apply a style to a single element. To apply inline CSS, add the style attribute to the element you want to style. The style attribute only needs the CSS property.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p style="color:green;">A paragraph.</p>
    </body>
</html>