What is CSS?
To understand exactly what is CSS and why it was made; one would need to understand a bit of the history regarding the internet. The internet was created initially for researchers to pass around their papers. The look was mainly to have structured text; nothing more. Over time, industry became interested in the internet and its possibilities; consumers demanded for pictures and a more appealing way of presenting information. Thus, different browser companies started making their own proprietary tags. What this did, was essentially create pages that would be rendered completely different in different browsers. So the W3C, in its never ending wisdom, decided to separate a structured document (html) from its style (CSS); its main goal is to create universally accepted tags so that no matter browser, you'll be able to see the webmaster's original intent. This will also enable those with screen readers to be able to read the site without having the style get in the way of the site's content.
Note - CSS stands for Cascading StyleSheets. External CSS is first used then the internal will override anything external and the inline CSS overrides all CSS style previously used.
Advantages
- It cleans up the code by separating the presentation of the site from the actual content
- Because of this; one can change the presentation of the site by using an external style sheet…this means only file has to be changed.
- CSS also offers more in the way of presentation than HTML.
Disadvantages
- CSS is not fully supported by all browsers
- Some CSS properties may display differently from one browser to another. (Sometimes this can be minor as being a pixel or two off or it can be drastic…the key is to test the site on various browsers and various operating systems when possible.)
Understanding CSS Syntax
Adding CSS to an HTML Page
Inline
- Syntax - <tag style="property: value; property: value; property: value;"></tag>
- Function - Allows you to attach a style to a specific line of text/code
- Example - <p style="color: #000; font-weight: bold;">I'm home.</p>
Internal
- Syntax - selector {property: value; property: value; property: value;}
- Function - This is placed inside the head of the document; defines the style for that current document
- Example -
<head>
<style type="text/css">
<!-- h1 {color: red; font-family: tahoma;} -->
</style>
External
- Syntax - <link rel="stylesheet" href="location" type="text/css">
- Function - This links a CSS stylesheet defined externally in another file
- Example - <link rel="stylesheet" href="http://reach.ucf.edu/styles/global.css" type="text/css">