Tuesday, 12 August 2014

CSS

CSS stands for Cascading Style Sheets, it is very simple to code.. you must first label the item that will have the style applied this is in the HTML for example
<div id="box">
</div>
then you must write the rules that define the style in the CSS file for example
to create a box you need a background colour, width and height
#box {
background-color:#000000;
Width:400px;
Height:300px;
}
But before this will work you need to link you CSS file to your HTML with a tag like this
<link href="Location of your CSS File" rel="stylesheet" type="text/class" />
so lets break this down and see exactly what each component does
The #box this component lets the program know which part of the HTML you want to change
I am just using the word box as an example you can call your id eggsontoast or whatever you feel is necessary, everything you label with that id will change if you code it in CSS. But if you want to label  more than one thing with the same id use class instead of id e.g
and you would put this each place you want italics in a paragraph
  but you would need to give it the italic attribute in the CSS file of course)
The next part {} these are used in CSS to open and close a tags CSS uses this instead of <>
Now you add an attribute you want to change for example the background, now for a box to be box you need a width, height and background color, or it won't work
For each attribute you enter you need this : after the name of the attribute and a ; after the attribute trait for it to work.
For example to create a yellow box
First open up a new HTML and new CSS and link them together
linked css and html
Then create a Div in the HTML
html with div
Now go to your CSS file and type your style, to create a box you will need the background colour, height and width
css with box
open the HTML file with a browser and see what happens (don't forget to save both the CSS and HTML)
html running
There are endless possibilities you can achieve with the CSS, it's a lot easier to make and layout a website with this instead of doing this just in HTML.

No comments:

Post a Comment