What is CSS?

Cascading Style Sheets, or CSS, is used to change the colour and the overall look and theme of websites. CSS can be used to change the background colour, text colour, text alignment, layout, and much more, of all elements of a webpage or website.

There are three different ways that css can be included into a webpage. The code snippet below shows including css within the opening tag of a paragraph, this is called inline style. The code below shows changing the ‘color’ attribute to black, this changes the text colour of the paragraph tag to be black.

<p style="color: black">Hello World</p>

You can also include css styles within style tags that are put within the ‘head’ tag of a html document. These styles use selector and apply them to all elements in the document that match the selector. The below code snippet shows uses the style tag to change the text colour of all paragraph tags within the current html document or webpage.

        p {
            color: black;

Style sheets can also be written in an external file and included into a html document. This is useful if you want to share the same styles across multiple files or webpages. To include an external stylesheet into a html document you use a self-closing line tag. The link tag includes two attributes, the ‘rel’ attribute that specifies that we are importing a stylesheet, the href attribute specifies a relative path to the external stylesheet. The path to the external file should be relative to the whereever the current html file is saved.

    <link rel="stylesheet" href="myStyleSheet.css" />

Styles are applied to elements in a html document in a specific order depending on where the styles are coming from. Inline styles are the most prominent and external styles are the least prominent. This means we can override external styles, or styles within a style tag, by giving the element an inline style.

Leave a Reply