Introduction to CSS

Every modern website uses CSS to change the look and feel of the website. CSS is a standard that is required for modern browsers to function correctly. CSS is a w3c standard and necessary to understand website coding. This article will explain what CSS is and how it works.

What is CSS?

CSS stands for "Cascading style sheets". CSS is separate code that styles elements in your website like paragraph or header HTML tags. The CSS code can be stored in a separate file called a style sheet. This allows you to create styles for elements throughout the website, without having to code the styles into each page.

HTML originally had tags like <font>, <center>, and so forth that styled each element in each page. The problem with this is that when the developer wanted to change the style of some content, every page had to be edited throughout the website. CSS eliminates the need to edit all your pages by having the code for the styles stored in a separate file that can be edited once.

Where to put CSS code

CSS can be used in three different ways. You can use an external style sheet, and internal style sheet, or an inline style. There is more information on how to do this in our article on External, Internal, and Inline CSS styles.

How CSS selectors work

CSS has a selector that contains declarations. The "Selector" selects the element in the web document like an <h1>, <p>, or <div>. The "Declaration" contains the code that allows the element to be styled. For example, to change the color of a font you can use the "color" "property" with the "value" of "#ff0000" red. See the following example.

The previous code snippet looks like the following when used:

h1 {color: #ff0000;}

You can also use an "id" or a "class" to select an element.

CSS syntax for selecting an id or class looks like the following.

.class-name {color: #ff0000;}

#id-name {color: #ff0000;}

How CSS Syntax works

To style your HTML elements, you will need to know how to use the CSS syntax. Each element can have multiple declarations added to it. For example if you want to center the text, make it red and bold it, you would use the following syntax.

.para {text-align: center; color: #ff0000; font-weight: bold;}

This allows the element with the class .para to be center, red, and bold. The following HTML tag would have these properties.

<p class="para">

You can also use CSS on multiple lines like the following.

.para {
    text-align: center; 
    color: #ff0000; 
    font-weight: bold;
}

CSS comments

CSS comments are used for disabling lines of code or adding instructions to your code for other developers to read. There are two types of comments in CSS. The Multiple line comment and the single line comment. The following snippets are how the comments are used.

h1 {
    // This is a single line comment
}

h1 {
    /*
    This is a 
    Multiple line
    Comment
    */
}