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.
