What is CSS?

If you are unfamiliar with HTML then I recommend you read my ‘What is HTML?’ post first.

CSS stands for Cascading Style Sheets and it is a style sheet language that displays how the HTML elements on a page should be displayed. CSS, as the name suggests, dictates the style of the web page–the layout, the colors, the fonts, etc. It was designed so that the structure and visual appearance of web pages could be separate, which has a few benefits. For one, it’s easier to make changes to the website later on, and for another, using a separate CSS stylesheet makes it easy to apply the same style to multiple pages within a website without repeating the same lines.

History

CSS was first proposed in 1994 and there have been a few versions since the. The current version is CSS3, of which the earliest drafts were published in 1999. There are also a few newer modules such as Grid and Flexbox which are sometimes collectively referred to as CSS4, though this term is not official.

Selectors and Declarations

A selector refers to the HTML element you want to apply a style to. There is a wide range of types of selectors that you may end up using if you become a web developer, but for now we’ll just look at the most basic form.

After the selector come all the styles you want to apply to the targeted element, enclosed by curly braces. This part is known as the declaration block and each style within is a declaration.

The selector and the declaration block make up a CSS rule-set. Here is an example of a simple CSS rule-set which targets the paragraph element and sets the background color to purple and the margin to 20 pixels:

p {
    background-color: purple;
    margin: 20px;
}

The ‘p’ is the selector and all that follows is the declaration block. You can apply as many styles as you want in this way.

How to Include Styles

There are three different ways you can include CSS in your website.

Inline

This is when you add styles as an attribute of an HTML element. To add CSS so that a particular paragraph is colored red, for example, you would write this:

<p style="color:red;">I'm a red paragraph!</p>

This is not ideal as it means that if you want to have multiple red paragraphs you’ll have to add the attribute to each one. And then what happens if you want to change the color? You’d have to look for every red paragraph in your HTML and change them all individually.

Internal

An internal style, also known as embedded, is included in the head section of your HTML document. All style information for that particular page is included within style tags, for example:

<style>
    p {
        color: red;
    }
    h1 {
        font-weight: bold;
    }
</style>

This will make all paragraph elements on the page red, and all level one headings bold.

This is a better solution than using inline styles but you will still have to change the CSS on every page whenever you make an update. Additionally, if your website is large and multiple pages need the same styles, it’s a waste to be including all of this CSS on all of them.

External

External style sheets are what you are likely to use the most. Here the CSS is written in an entirely separate file with a .css extension. Then the HTML page just has to reference it in the head section like this:

<link rel="stylesheet" type="text/css" href="style.css">

When using an external stylesheet, you can write your CSS as usual but this time you don’t use the style tags.

Now if you need to make a stylistic change on your website–let’s say, you’ve decided you want your navigation bar to have a different background color–you only have to change one line of CSS and it will be applied to all pages that are linked to your style sheet.

Learn More

If you’re interested in learning how to write CSS, check out the W3 Schools website to get started. You can also refer to the web development section of my resources list where I’ve linked some courses which will teach you CSS, among other things.

Sources