Introducing CSS | PracticalSeries: Web Development

5.3 Introducing CSS

A Cascading Style Sheet (CSS) is a way of defining how the elements of an HTML document will look. Essentially, CSS is used to separate the style and appearance of an HTML page from the content of that page:

HTML — content of a web page
CSS — style of the web page

There are three ways to use CSS:

CSS code inside an HTML tag using the style attribute:

index.html

        <p style="font-size: 120%">...</p>

CSS inside the head section of an HTML document using the <style>...</style> element:

index.html

    <head>
        <title>A first website</title>
        <style>
            p {font-size: 120%;}
        </style>
    </head>

CSS code in an external file (in this case style.css)

style.css

        p {font-size: 120%;}

Of these the last is the best choice and everyone does it this way. It allows a single file to hold all the styles for a website; it also means that different web pages can use the same CSS file and changing the styles in the file will change the styles globally throughout the website.

Although I say everybody does it this way, I will also, from time to time, define styles within the HTML tag, point 1 as well. I do this where I need to manipulate a very specific property in a way that applies only to the particular element in question (a typical example being the row height of a table, there is no standard that I can specify in a CSS; it just depends on the content of the table in question).