Once you have connected to the server in Notepad++ navigate to the css folder the home directory and double click to open style.css


The style.css file should open. Lets look at how the header element is styled.

background: rbg(120,255,255);

The ' . ' (full stop) is called a class selector. .header refers to all elements that have the class header. Inside the braces are a list of properties and values in the format property: value;

(You may also come accross id selectors represented by the #. They work in a similar way.) 

In this example we are giving any element in our HTML page that has the class of 'header' a background color.

In CSS colors can described in a number of ways. In the above example it is in rbg format where red, green or blue are represtented by a value of between 0 and 255. Color can also be represented by a hexidecimal number (base 16 where 10,11,12,13,14,15 are represented by 'a','b','c','d','e' and 'f' repectively) Hex colors use either 3 or 6 'digits' to represent the red green or blue components of the color.  #fff (or #ffffff) is white, and #000 (#000000is  black. To select CSS colors you can use this color picker. Simply select a color and copy the hex code into your style sheet.

Try changing the values of the background to another rgb or hexidecimal value. Then save the file. You can see your results by pointing browser to http://yourIp/home. This will load the index.html file and you should be able to see the new header background color.

We can use the color property to change the text color:



color: rbg(0,0,0);

Similarly we can change the font size and type with:



color: rgb(0,0,0)font-size: 18px;font-style: italic;

 Next lets add a border to our header element.



border: 2px solid rgb(0,0,0);

We may also want to place padding arround the element. In this case I am going to add 20 pixels of padding to the bottom.



padding-bottom: 20px;

The header selector should now look something like this:



background: rgb(0,0,255);
color: rgb(0,0,0);
font-size: 18px;
font-style: italic;
border: 2px solid rgb(0,0,0);
padding-bottom: 20px;

To learn more about CSS see the useful links page.