CSS

 Grouping

Grouping is a CSS technique that we can use to shorten the amount of CSS code we use by apply styling to multiple elements at the same time.

here we have a basic style sheet layout

 now lets use grouping and cut this style sheet down

 because we are setting a margin and padding with the same values we can just put the content and body styling into one separate section. Although we still need to set the colour in content so we just add that separately as its unique to content.

Nesting

Nesting is technique used to sort out a CSS file by styling elements that only exist in other elements here's an example

this means that the content inside the header id will have a colour of red as long as the header id is inside the wrapper. If the header is not in the wrapper then no styling will be applied.

Fun With Gradients

lets have a look at using gradients in website development. A gradient is a type of colour fill that fades from a colour to another, a more complex gradients can use more than 2 different base colours so for example it could fade in and out of 5 colours.

Here is an example of a gradient.

so now lets make a website background using a gradient that will fill from one colour to another and we are going to repeat this through the x axis so it spans across the page. For the y axis we are going to simply have a background colour set as well so the gradient will be shown down to its height and then we will see the colour.

Now use the following CSS code

 Because we have set the background repeat to repeat-x by default it wont repeat on the y axis which is what we want.

Center Align Content

So lets have a look at how to center a web page, so the first thing we need is some content so just make a quick div 

 And then lets center it using this CSS

 we set a height and width of 100 pixels to make the basic shape and then we set the margin left and right to auto which will set it in the center. This wont work in Internet Explorer unless you add a document type.