Internal CSS
It is possible to create a CSS within an html document instead of having a separate file for your stylings. While there is nothing wrong with doing this it does negate two of the three advantages to using css.
Firstly by using it internally it doesn't reduce the file size and therefore there is no increase in loading speed.
Secondly if you want to make site wide changes you will still need to change the individual internal css on every page. This may not be as time consuming as changing each individual styling but it is certainly not as fast as changing only a single line.
Cascading Style Sheets (C S S)
Cascading Style Sheets are separate files that hold the information about how a page will look. During this program we create a separate css and use it to style many of the basic elements of a standard Web page and by its conclusion you should have a good working understanding of the capabilities of a css. All steps will include working examples for easy reference.
Why use use a CSS?
Create a styling once and then refer to it whenever it is the styling you want. This saves you considerable time over having to style every element individually when you enter it.
A Reduced file size, after all the individual stylings have been removed, significantly decreases the page's loading time.
Make site-wide changes by editing one line of code in your css. If you change your mind about your site's font change it by altering a single line in your css instead of having to go to every page and restyle all of those elements.
These sections are outlined below.
- Introduction Outlines the different sections (you're here now!)
- Saving How to save a .css file and "call it" from an .html document.
- Syntax Outlining the basic syntax of a css command
- Block How to style single and multiple block level elements.
- Span How to style basic in-line level elements using the
<span>tag. - Links Adding styles to hyperlinks. Includes examples of how to create different colour and weight links and different hover colours.
- Images Images add interest to your site. To maximize their impact style their placement and spacing as well as how the surrounding text interacts with them.
- Spacing The spacing of elements on a page is important to its overall appearance and readability. Use margin and padding settings to put them where you want without having to use spacer images and 's.
- Lists Learn how to style lists and turn them into useful navigation elements that can run across the page.
For convenience the page links can also be found in the navigation bar to the left.