5HTML and CSS: the basics


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:

  1. CSS code inside an HTML tag using the style attribute:

        <p style="font-size: 120%">...</p>
  1. CSS inside the head section of an HTML document using the <style>...</style> element:

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

  1. CSS code in an external file (in this case 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).

End flourish image