Introduction to CSS
Introduction
CSS, or Cascading Style Sheets, is a powerful and easy language to use to format information in your HTML documents. Imagine taking another blank piece of paper and with a default black pen, writing "Hello" at the top of the page. Now, imagine a blank piece of paper and then taking a green bold marker and writing "Hello" on it, underlining the text, centering the text in the middle of the page, drawing a border around it, and filling in the inside of the border with light green. This is an example of the power of CSS; it styles the page content. It will not change the content, but it will format it. This introduction will outline the basics of CSS language, the concept of cascading style sheets, and the structure of CSS.
History of CSS
Accepted by the W3C Consortium in 1996, CSS1 was developed and headed by by Bert Bos and Håkon Lie. It was introduced as an effective method for styling HTML pages and is currently supported by almost all browsers.
In 1998, CSS2 was introduced to add more power to CSS: including downloadble fonts and positioning of text elements on the page. However, no browsers support all of the CSS2 features; although, many support parts of it. Internet Explorer 6, Netscape 6, and Opera 6 have almost full support of CSS2.
Developers are currently working on CSS3 to allow for even more control over structuring stylesheets as well as audio media presentation.
Benefits of CSS
CSS is an extremely powerful language for designing. Some of its benefits include:
- Full CSS1 support in almost all browsers.
- Creation of styling rules that control the entire document, as opposed to in-line changes using HTML, i.e. <font> tags.
- Use of external stylesheets saves space and bandwidth.
- A simple change in stylesheets can quickly change the entire layout of a site.
- Defininition of your own styles and classes makes designing much more simple.
- Styles are separated from content.
Inheritance of Styles
Before we learn how to style a page, we must first understand the inheritance of styles. The most basic is the default styles for the page. This includes Times New Roman, black, 12 point. This also includes the blue underline for links and the purple underline for links that you have already visited. If you do not make any changes to the styles on a page, the default styles will be used.
External style sheets are separate CSS files, denoted by a .css
extension. They are inserted into a page by using the following tag between
the <head> tags: <link href="styles.css" rel="stylesheet"
type="text/css">. If inserted into a page, they overwrite
the default syles of the page. External style sheets are especially useful
because they save space. Instead of being repeated on every single page it
concerns, it is simply inserted using the previously mentioned tag.
Every page also has the capability of changing its own internal style sheet. This is defined using the <style> tag; an example of this is shown below:
<!--
body {
background-color: #555555;
font-family: tahoma, arial, sans-serif;
}
-->
</style>
In the hierarchy of styles, an internal style sheet overwrites any external style sheet as well as any default styles not defined by the external style sheet. Finally, the most immediate level in the hierarchy of inheritance is inline styles, these include changes to the style within a specific tag. An example of this follows:
To sum up, the following is the order of inheritance starting with the most immediate.
- Inline Styles
- Internal Style Sheet
- External Style Sheet
- Default Styles
Fundamental Syntax
In CSS, think of every design style as an object with attributes. You use CSS to change those attributes. For example, the main object would be the body. Anything you change in the styles of the body will affect any content between the <body> tags of an HTML page. For example, the following style inserted between the head tag and the body tag would produce the following effect.
<!--
body {
text-align:center;
color:#333333;
background-color:#AAAAAA;
font-family:arial, helvetica, sans-serif;
}
-->
</style>
Let's break down the code above! Everything is between <style> tags to tell the browser "LISTEN UP! THESE ARE THE STYLES FOR THE PAGE!" Similarly, everything between the braces {} tell the browser that these are the style attributes defined for "body". Notice that each of the attributes are separated by a semicolon. The attributes are pretty much self-explanatory: text-align refers to the way the text is aligned on the page (center, justify, left, right), color refers to the color of the text, background-color refers to the background color behind the text, and font-family refers to the font face used. Notice that the attribute font-family is set for "arial, helvetica, sans-serif"; if in the event a computer does not have the arial font installed, helvetica will be displayed. Else, the default sans-serif font on the computer will be used. Sans-serif fonts are fonts without the little serifs in fonts such as Times New Roman and Garamond. Examples of sans-serif fonts are Arial, Helvetica, and Tahoma.
There are many other default object styles you can overwrite; they include p (to change all paragraph styles), h1 (to change the heading 1 style), h2, blockquote, table, b, etc. You can also change the way links are displayed. But, the most powerful feature of CSS is the ability to create your own styles and classes and use them whenever you want to to select certain content out from the body of the page and change that style.
Sources / For More Information
- Web Tutorials by Peter L. Kantor - CSS
http://academ.hvcc.edu/~kantopet/css/index.php
In-depth tutorials from notes on a series of classes on web site development taught at Hudson Valley Community College.