One of the best ways to learn to build compelling business websites is to study the code that others create. While HTML is great for placing objects on a page, Cascading Style Sheets add sparkle, color and life to the Web. You have the ability to examine any website's code by asking your browser to show it to you. You can then figure out how the site’s designer used CSS to create the page and apply what you learn to your own business sites.
-
1.
Launch your browser and visit a Web page. Right-click a blank area on the page to view a menu. Look for a menu option that has the word "Source" in it, such as "View Page Source." Select that option to view a window that displays the page's HTML source code.
-
2.
Press "Ctrl-F" and type "style." The window searches the code for that word. If you see a style tag in an HTML document, that document uses CSS.
The following code shows an example of an internal style sheet that creates a CSS class named "red":
<style> .red {color:red;} </style>
<div class="red">This is red </div>
The code between the opening <style> tag and the closing </style> tag contains the CSS. In this instance, the red class has a color attribute whose value is red. The div tage, shown below the style sheet, references that class. The text in the div tag will appear red when you view it in a browser.
-
3.
Look for a style tag similar to the one shown below:
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/my_style.css" />
This creates a statement that links to an external style sheet named "my_style.css." When a browser sees this tag, it retrieves the style sheet from its server and uses it to style the Web page. If you create an external style sheet, you do not have to surround your CSS classes within style tags. You might also see a style sheet where the href value is not a URL. The following style sheet links to a style sheet named "style2.css" that resides in the Web server's root directory:
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/style2.css" />
This code defines a relative URL; the CSS file's location is relative to the website's location.
-
4.
Examine the document's body section and look for a style attribute inside an HTML tag. The following div tag contains a style attribute:
<div style="color:blue">This is blue</div>
If you see an embedded style attribute in a div, paragraph or other HTML element, that tag determines how the content in the tag looks. In this example, the text inside the div appears blue in a browser because the div tag has a style attribute and that attribute's color value is blue.
