| Cascading Style Sheets or CSS as they are more | | | | } |
| commonly known have been around for many years | | | | H2 { font-size: 18px;font-weight: bold; |
| now and can be used to format your page any way | | | | } |
| imaginable. CSS is a very easy way to keep you web | | | | #leftside { position: absolute;width: 300px;height: |
| page consistant with your fonts, colors, and many | | | | 200px;margin: 0;margin-top: 10px;border-right: 1px solid |
| other aspects. CSS also allows you to get this | | | | #000000;font-weight: bold; |
| information in a single file instead across all of your | | | | } |
| web pages. | | | | #rightside { position: absolute;margin-top: |
| If you have a 200 + page website and a decision has | | | | 50px;margin-left: 310px; |
| been made to change the font on the pages from | | | | } |
| arial to verdana then you would have to manually edit | | | | Now lets go through this CSS file step by step so |
| 200+ pages to make tha change. But with CSS all | | | | that you understand it all. Lets start with the body |
| you have to do is change the CSS files, which for a | | | | section, this section is default settings everything |
| large webpage maybe two or three files, a lot better | | | | that is included in the body tag will have these |
| than 200+ files. | | | | settings applied. Most of the settings are self |
| There are three ways that you can use CSS in your | | | | explanatory. font-size specifies the size of the text |
| web page: | | | | within the body tags, font-family specifies the font |
| * Inline Styleso This type of style is done inline with | | | | within the body tags, and background-color specifies |
| the tag you are currently writing. | | | | the color of the web page. |
| * Embedded Styleso This type of style is defined | | | | The next section is the p tags as with the body tags |
| between the tagso When defining the styles you will | | | | these statements apply to anything in the HTML |
| have to put them between tagsh2 { font-size: 16px; | | | | document that are within the p tags. Every |
| } | | | | statement here was used above except the color |
| * External Styleso External Styles are stored in a | | | | statement and this simply sets the font color. The H2 |
| seperate file normally named with a .css extensiono | | | | section only has one new statement within it and |
| With external styles you must put a statement in the | | | | that is the font-weight command and see you can |
| HEAD of your document that tells the page here to | | | | see here we are setting the text within the H2 tags |
| look for styles | | | | to bold. |
| In my personal opinion I find Inline Styles absolutly | | | | Next we will talk about the div tags that we used |
| pointless except when adding a style that you can't | | | | and we will put the text in different positions on the |
| do with normal tags. If you are going to use style | | | | page. First we will use the #leftside and I will go |
| sheets in your web page you might as well go ahead | | | | through each step here. |
| and make an external CSS file to use. This way you | | | | * position: absolute;o This sets the position to use |
| can reference every page to that style sheet and | | | | exact pixels to set the location, the other option is |
| then if you need to make a change it will be global | | | | float which will adjust the location with the size of |
| not just specific to one page. So lets first create our | | | | the screens. |
| HTML document then we will create our CSS to | | | | * width: 300px;o As you can probably guess this sets |
| change the way that it looks. | | | | the width of the box. |
| Here will be our HTML document. | | | | * height: 200px;o This sets the height of the box |
| This is a heading level we will change. This will be | | | | * margin: 0;o This is a generic margin setting |
| some text that we can change its position and its | | | | * margin-top: 10px;o This specifically sets that margin |
| font and pretty much anything that we want. | | | | at the top to 10 pixels |
| This is text in a paragraph that we will be able to | | | | * border-right: 1px solid #000000;o This statements |
| change the font, color, size and other effects to | | | | adds a border to the right side of the box, makes it |
| make it more appealing to the viewer. This is some | | | | 1 pixels wide, solid and color of black |
| text that is not enclosed in any tags. | | | | * font-weight: bold;o This just makes the text inside |
| This plain HTML document is about as boring as they | | | | this box bold |
| come right now. It will have a white background and | | | | Now that we have created these two files open the |
| black text with the first line being bigger than the | | | | HTML file in a web browser and look at what you |
| rest. Lets now add a little bit of color to this web | | | | just created. These are just a few of the |
| page by using a Style Sheet. I am going to give you | | | | statements that can be used in a CSS document. So |
| the style sheet in its full form and then I am going to | | | | play around with the CSS file and see how the HTML |
| explain it line by line so that you understand it all.body | | | | document changes. Hope that you have enjoyed this |
| { font-size: 12px;background-color: blue; | | | | article and look for some of my others. |
| }p { font-size: 14px;color: red; | | | | |