CSS

Introduction

What is CSS

CSS stands for cascading style sheet its used to style a web page. Its what we use to make websites look amazing and creative with stunning visual effects. Combine this with some photoshop design skills and you can make truly stunning looking websites like this one.

The Syntax

So lets have a look at what the code looks like

This will then turn the background colour of the page red. So lets break this down to understand how it works a bit better.

The body part at the top is the elements we want to style so we have "body" there which means we our going to style the HTML body tag. you can place any kind of tag here. The next part is the opening of the curly brace which is used to represent styling commands in that element. Then we have the styling command we want to use which is always followed by a : and then the value we want followed by a semi-colon which means end of the line.

If you want to style an id type # and then the id like this

and for a class use a dot like this

How to use it

Okay so there are 3 different ways of implementing CSS code into our website;

1. Inline
2. Block
3. External

Inline code is where we use the style attribute inside HTML tags its used for very small amount of styling here's an example

 Next we have the block method which sits in the header its used for a moderate amount of styling

Now lastly we have the external method which is where you make a .css file to store all the CSS data. Remember though you can combine all 3 methods if you like. Now to set up a link between the HTML file and CSS file type this in the head of your HTML

So here we have an external CSS file called style.css, make sure its in the same directory so it can be found from the HTML file. So now lets have a look at what is inside the CSS file called style.

 and that's all there is to it, I do recommend using the same stylesheet for different web pages because otherwise you will have to change the styling for each page which is very pointless and a waste of time.