Importance of CSS
CSS is responsible for the overall presentation of a web document. CSS set the properties for all elements contained within HTML. CSS enables every element to have a style attached to it. Without CSS, HTML documents would be extremely plain and not aesthetically pleasing.
Implementation of CSS
When implementing CSS to a HTML document there are three options available:
1. Internal
2. Inline
3. External
Internal style sheets are implemented in the <head> using the <style> tag. Internal style sheets are used for only the HTML which the CSS is written on and this means that multiple pages to not need to be linked. A disadvantage of using internal style sheets is that it takes longer for the page to load.
Coding for Internal:
<style type=”text/css” media=”all”>
<!–
p { font: 1em Times serif; color: #c00; }
h1 { font: 2em Times serif; color: #f00; }
–>
</style>
Inline style sheets are implemented in the crux of the HTML document. The style is defined within each element. This can lead to a build up of styling and a lot of time is wasted from writing the same styles.
Coding for Inline:
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
Using an external style sheet means that there is a separate document which has saved the CSS code. There is no CSS code embedded in the HTML document, making it more streamlined and faster. The coding is similar to an internal style sheet however, instead of it being embedded in the HTML document between <style> </style> it is in a separate document.
Using your own CSS- IE
With IE it is very easy to view web pages using a different style sheet to the one already implemented. To override the style sheet already in place, the user should:
1. Tools > Internet Options
2. Appearance > Accessibility
3. Check Box: Format documents using my style sheet.
4. Locate own style sheet> OK.
Using your own CSS- FF
Using your own CSS on FF is a little more difficult than with IE however, it is possible.
1. My Computer > Local Disk (C:)> Program Files > Mozilla Firefox
2. Defaults > Profile > Chrome
3. Rename “userContent-example.css” to “userContent.css”
4. Edit this using Notepad
5. Save userContent.css
6. Restart Firefox
SQLHTML 