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, A 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).