CSS – What is it and how do you use it?

What is CSS?

CSS stands for Cascading Style Sheets and was created by the W3C (World Wide Web consortium) to solve the problem of the expanding number of HTML tags on large web sites. CSS defines how a web page displays HTML elements and so you can change the appearance of a whole website by changing just one file rather than huge lists of HTML tags.

CSS Syntax

CSS rules are divided into two parts: the selector, and declarations (can be single or multiple). The selector is the HTML element that you want to style – i.e. h1 (header 1) or p (paragraph). You then use the declarations to assign properties to the selector – to set the colour and font size for the paragraph text of your website for example. The declarations are put in {} brackets and are formatted like this:

{property:value}

So if you want blue text you would use:

{colour:blue}

If it was the paragraph text you wanted to make red then you would use:

p {colour:blue}

That seems simple enough, but when you start using multiple properties for different styles the CSS rule begins to grow to something looking like this:

p {colour:blue; font-family:arial; text-align:left;}

If you want to make changes to your style sheet in the future, having declarations in lines becomes unwieldy and hard to find what you’re looking for. To make CSS more readable you can put declarations on different lines:

p
{
colour:blue;
font-family:arial;
text-align:left;
}

This makes the stylesheet easier to use and edit in the future. You can even add comments, to explain your code to other users or as notes for yourself in the future. To add comments to your code use “/*” and “*/”. This tells the browser to ignore everything between these markers. For example:

P
{
colour:blue;
/*change the font later*/
font-family:arial;
text-align:left;
}

The web browser would know to ignore the added comment ‘change the font later’ but it will remain there for your reference at a later date.

Inserting CSS

You can insert a style sheet in three ways: External style sheet, Internal style sheet and Inline style.

• External Style Sheet – this sheet is best for applying a style for multiple pages. Every page on a website can use the style sheet by inserting a <link> tag in the head section. This is great because it means you only have to edit the one style sheet and the whole website will change. This is good for continuity across a website. However if you want to use CSS on just one page then it is best to use…
• Internal Style Sheet – when applying a style to just one page you can use an internal style sheet. Unlike an external sheet which can be written on a text editor and saved as a file, internal style sheets are defined directly within the head section of a page. Within the head section, wrap your CSS in <style> tags, the style within these tags will then be attributed to that one page. In very rare occasions you may want to attribute a style to an element within a page. To do this use…
• Inline Styles – These can be messy if used a lot and can make the HTML almost unreadable. It is generally best practice to avoid using inline styles – they defeat the point of CSS which is to separate the design and content elements of a page,

What makes CSS great is that multiple style sheets cascade into one. If you are using multiple styles for one page, the browser reads them in this order:

• Browser default setting
• External style sheet
• Internal style sheet
• Inline style

The only exception to this rule is if the link to the external style sheet is placed after the internal styling within the head HTML of the page.

Hopefully, you will be able to make a start using CSS after reading this introduction. Once you know the basics – where the code goes and how it works – you can start grabbing bits of code off the internet to build attractive websites!

This post was written by Silicon Beach Training. Our 1-day CSS Training course in Brighton is perfect for getting to grips with CSS and if you want to take things to the next level our highly popular CSS3 Course is just one of our many web design courses for all abilities.