How to Use CSS Style Sheet For Styling A Web Page

You need the CSS Style Sheet to effect the styles like font style, colors and format for your web pages. CSS Style Sheet is also popularly known as Cascading Style Sheet or CSS. It replaces the use of HMTL codes for styling a web page as per W3C Web Standards. The main advantage of the CSS Style Sheet is that you can easily manage or manipulate the style of your web pages. (Note: Don't forget to remove the asterisk [*] in sample HTML tags below).

Creating and implementing CSS Style Sheet

To create a CSS Style Sheet, you have to use a selector, property and value like this:
body {color: red;} OR #cssstyle {font-weight: bold;} OR .cssstyle {font-size: 12px;}.

body, #cssstyle and .cssstyle are the selectors. color, font-weight and font-size are the properties while red, bold and 12px are the values of the respective style properties.

There are 3 types of style sheet selectors that you can use: The HTML element, the id selector and the class selector. HTML elements selector include body, div, span, ol, ul, li, table, td and p. div is used for group of paragraphs, p for a paragraph, span for selected characters, words or phrases, ol for ordered lists, ul for lists, li for lists, table for table and td for table data. You use the HTML elements as style like this: p {font-size: 10px;}.

Id and class selectors are created with the name you desire. You use the id selector like this: #yourchoicename {color: blue;} while class selector is used like this: .yourchoicename {color: yellow;}.

You can implement CSS Style Sheet as external style sheet, header style sheet and inline style. W3C recommends the use of external CSS style sheet. In external, CSS Style Sheet is saved as separate file with extension of .css linked to the web page using this code <*link href="CSS-style-sheet-file-name.css" rel="stylesheet" type="text/css"> between HTML head tags. All the web pages that are linked to the external style sheet will be affected.

In header, CSS style is completely placed between HTML head tags enclosed in <*style type="text/css"> and <*/style>. In inline, style definition is used as an attribute of HTML codes like <*h1 style="color: blue; font-size: 10px;">Headline<*/h1>.

Using CSS Style Sheet in styling your web page

Styling your own web page with CSS style sheet is easy. As recommended by W3C, you must save the CSS style sheet in separate file as .css but you can also use it in your headers or as inline style. You may implement it as external, headers and inline simultaneously as the only the nearest style value will be effected. This is how you will style your web page using the CSS Style Sheet. Let's use the style sheet as headers:

<*html>
<*head>
<*title>My Web Page Using CSS Style Sheet

<*style type="text/css">

body {
margin: 10%;
color: #00f;
background: #ff0;
text-align: center;
}

p {
margin: 20px;
color: #cff;
background: #ccc;
text-align: right;
}

#idselector1 {
margin: 0px;
text-decoration: underline;
background: cff;
}

#idselector2 {
margin: 20px;
text-decoration: none;
background: fc0;
}

.classselector2 {
margin: 10px;
font-size: 16px;
font-style: italic;
color: #f00;
}

.classselector2 {
margin: 5px;
font-size: 10px;
font-weight: bold;
color: #00f;
}

<*/style>
<*/head>
<*body>

<*p>Example of HTML element with CSS style<*/p>

<*div id="idselector1">Example of id selector with CSS style<*/div>

<*div class="classselector1">Example of class selector with CSS style<*/div>

<*p class="classselector1">Example of combined HTML element and class selector with CSS style<*/div>

<*div id="idselector2" class="classselector1">Example of combined idselector1 and classselector1 with CSS style<*/div>

<*div class="classselector1 classselector2">Example of combined class selector1 and class selector2 with CSS style<*/div>

<*p class="classselector1 classselector2">Example of combined HTML element, classselector1 and classselector2 with CSS style<*/div>

<*/body>
<*/html>

You better check how the above HTML and CSS style codes look like in your browser. Use this Create Your Own Web Page Practice Page or your practice notepad. Try to modify the style properties and the values and see the results. For your reference, here are the complete list of style properties and the web-safe colors. Web-safe colors are the colors that can be correctly displayed by all type of computers. For more information about CSS, visit W3C Cascading Style Sheet.

Now that you've learned the CSS style sheet, you can start putting colors, enhancements and other styles to your own web page. You will see how beautiful your web page can be with CSS style sheet. Just practice and explore until you master the CSS.

More on Start Your Own Web Site

Make Content Rich Web Site To Make Money Online

Know how to make content rich web site that make money online. With content-rich web site, you can surely make money with adsense and other affiliate products.

Create Your Own Web Page With Practice Page

Learn to create your own web page. Practice it with Create Your Own Web Page Practice Page.

Basic HTML Codes With Practice Page

Learn the Basic HTML Codes to create your own web page. Practice the HTML table, list, links and inserting image with the Basic HTML Codes Practice Page.

Other Basic HTML Codes With Practice Page

Learning other basic HTML codes will enhance your web page. Practice these HTML codes for heading, bold text, underline, hidden text, italic, emphasis, form, etc.

CSS Style Sheet For Web Page Layout

Using CSS Style Sheet as web page layout is easy to learn. Discover how to create a CSS layout or CSS box for your own web page.

Search Engine Optimization Or SEO

You gonna learn the need for search engine optimization or seo. You will also understand the needs of the search engines and search engine users.

Search Engine Optimization for Dummies 1

The search engine optimization for dummies will teach how to optimize your web pages. This part will teach you how to optimize keywords, page title, meta tags including meta keywords and meta description of every web page.

Search Engine Optimization for Dummies 2

This is the second part of search engine optimization for dummies. This part will teach you how to optimize the body copy including the page headline, text links and image alts of your web pages.

Dos and Donts of Search Engine Optimization

Know these do's and don'ts of search engine optimization (SEO) to keep your web site from being blacklisted by the search engines. These are also an additional strategies for successful SEO.

Return from How to Use CSS Style Sheet For Styling A Web Page to Start Your Own Web Site

Return from How to Use CSS Style Sheet For Styling A Web Page to Easy Money Making Ideas, Et Al