Web Design :: Lessons :: CSS
CSS
CSS, or Cascading Style Sheets, is a style sheet language that describes the look of an HTML or XHTML document. The purpose of CSS is to separate content (text, graphics, etc.) from presentation (font color, positioning, etc). Web browsers that are CSS-compliant must follow the CSS rules so web developers know what to expect. The first fully CSS-compliant browser was Internet Explorer 5.0 for the Macintosh. The Opera browser followed soon after. Today, all modern browsers support the CSS1 and CSS 2 standards, and they all are at different levels of support for CSS3. You can go to W3Schools to see which CSS3 elements are supported by different web browsers.
Content vs Presentation
Disable Styles will turn off specific CSS styles on a web page so you can see what the page looks like without them.
The content of the page is the most important part. Content is the meat of the page that people want to see. Mainly this is text, but it can also include images that are used to convey important information such as the images included in the lessons on this site. To see a website stripped down to just its content, use the Web Developer Toolbar in Firefox and go to CSS>Disable Styles>All Styles. Using this tool will show you a bare bones site, but if it is a well-made website it should still be usable and you should still be able to 
access everything you need. Try it on this site to see how it works.
Presentation is what is used to make a web page look nicer. This includes elements such as color, font, and position. Images are also part of presentation if they are not essential to the page such as background images and images that are mainly used for decoration. CSS deals with the presentation of the page, which allows you to separate it from the content that is dealt with by HTML. We have already used CSS a bit when we set classes and IDs to change how elements looked and where they were positioned.
One of the best uses of CSS on the web can be found at the CSS Zen Garden. That site challenges web developers to come up with themes to change the presentation of the page, but the content must remain the same. They do this using different cascading style sheets. Check out a few of the different themes and note how the page text does not change.
In-Line Styles
The first type of style you can add to your web page is an in-line style. As the name suggests, these styles are embedded in a line of your HTML code. These styles will override and other style types. To add in-line styles you need to view the HTML code of your web page.
- Load your site from Lesson 2.
Create a new HTML page called styling.html.- Add a div to that page with some text.
- Use the Code Button to view your HTML code.
- Find the <div> tag that represents the text you added to your document.
- Type a space after the div.
- Type style=" after the space.
After typing the quote you will see a list pop up. This list is all of the styles available for you to modify. This list is composed of the styles in the window that appears when you are defining a CSS rule, such as changing the positioning to absolute. You can either type the property you want to change, or double-click it in the list.
NOTE: Our version of Dreamweaver was released in 2008 so it does not contain many CSS3 properties. These properties can still be used, but will not work in the Dreamweaver environment.
- Double-click the color style.
- Select a color in the window that appears.
- Return to Design View.
When you return to Design View you should notice that the color of your text has changed. You can edit as many styles as you want in this way. To add another style you need to type a semicolon (;) to indicate the end of one style and then a space to bring up the style window again. You should use in-line styles in rare cases where you need to override an embedded or external style.
Embedded Styles
The <style> tag is used to define style information for an HTML document.
Inside the <style> tag you specify how HTML elements should render in a browser.
Each HTML document can contain multiple <style> tags.
We have already used embedded styles in the first few lessons. These are styles that are placed in a <style> tag in the <head> section of your HTML page and can only apply to elements on that page. Whenever you create a style that you define in "this document only" you are creating an embedded style. These styles override the final style type, but will be overridden by in-line styles. You should use these styles only for styles that you know will only be used on a single page.
External Style Sheets
An external style sheet is the final type of style, and the type you will use for most of your projects. The advantage of using style sheets is that you can link them to any number of pages so one style sheet can hold the design for hundreds of HTML pages. Adding style sheets is easy since we already know how to add embedded styles. There is only one difference in the steps for adding embedded styles.
- Add a new CSS Rule using the button in the CSS Tab.
- Under the "Define In" section choose "(New Style Sheet File)".
- Name your style sheet (style.css is a commonly-used name) and then set any CSS rules you want.
If you return to Code View you will notice that a line was added to the <head> section of your code that looks like the following line:
<link href="style.css" rel="stylesheet" type="text/css" />
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets.
The name "style.css" may differ depending on the name you gave your style sheet. You should put most of your styles in a style sheet so they can be used on more than one page. If you aren't sure if you will use a style on more than one page put it in the style sheet.
Once a link to a style sheet has been added you will be able to quickly access it by clicking on it's name next to the Source Code button in Dreamweaver's Document Toolbar.
