3 Ways of Applying Style Sheets to a Web Page

I already gave you some basic CSS tutorial, but I’m pretty sure you’d like to know more. So, in this post I’m going to give you one more simple tutorial on CSS, specifically on applying style sheets to a web page.

Well, just to remind you – CSS or Cascading Style Sheets is a stylesheet language and the most common way to style HTML and XHTML pages.

There are a few ways to apply style sheets to a web page.

Inline styles:

To use inline styles you need to place a ’style’ attribute in a HTML tag. This attribute may assert any CSS information.

<p style=”color: white; font-sizer: 12pt”>
Web templates membership </p>

Remember: You need a ‘;’ to separate the properties.

Internal Style Sheets:

When a web master wants to give a  particular look to a particular web page that distinguishes from others in a web site he usually uses internal style sheets. Internal style sheets are usually placed between the head tags in a HTML document. CSS is applied with the use of <style> tags.

<head>
<style type=”text/css”>
body {background-color: #3e5e11;
text-family: arial;
text-size: 12pt}
</style>
</head>

External Style Sheets:

It’s probably the most popular way of applying style sheets to a web page. With external style sheets a separate document containing all the CSS information is created.
You need to place <link> tags in the HTML document so the browser can read the information from the style sheet document. The <link> tags are placed between the <head> tags.

<head>
<link rel= ”stylesheet” type=”text/css” href=”style.css” />
</head>

Insert the name of your style sheet file in the ‘href’ attribute and the browser will read the info in that file and format properly.
You have to save your style sheet file with the .css extension. As your style sheet document has already been saved as a CSS extension it doesn’t need any <style> tags.
Here’s an example of how a style sheet file can look like:

Quote:
body {background-image: url(“image/logo.jpg”);
font-family: arial;
font-size: 12pt}
p {color: green;
font-family: aria}
h1 {font-size: 14pt}

Well, these were 3 ways of applying style sheets to a web page. Now feel free to have a look on some of our CSS web templates.

http://layoutspack.com/wp/wp-content/plugins/sociofluid/images/digg_48.png http://layoutspack.com/wp/wp-content/plugins/sociofluid/images/reddit_48.png http://layoutspack.com/wp/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://layoutspack.com/wp/wp-content/plugins/sociofluid/images/delicious_48.png http://layoutspack.com/wp/wp-content/plugins/sociofluid/images/facebook_48.png http://layoutspack.com/wp/wp-content/plugins/sociofluid/images/twitter_48.png

Related posts:

  1. Basic CSS Tutorial
  2. CSS Templates Knowledge Base
  3. Basic CSS Tutorial, part 2.
  4. CSS Advantages
  5. Introduction to CSS3

This entry was posted on Wednesday, January 14th, 2009 at 5:36 am and is filed under General Talk, How To. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “3 Ways of Applying Style Sheets to a Web Page”

 
  1. Ben | St Paul Law Firm says:
    March 5, 2009 at 5:26 am

    I think external style sheets is the best as its neat and doesn’t get messed up with the Html codes, and very nice blog you got like to see more tutorials from you, thanks!

Leave a Reply