Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials External Style Sheets

External Style Sheets


Many people put their style in the actual html code, but I find that using a seperate .css file for all styling is really helpful. By using external style sheets, you can save time. When you want to change and property that you have set using CSS, you only have to edit one file. Here's how it's done.

First, put this in your html file after the <head> tag. For example:

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="/img_articles/2330/style.css" />
</head>
<body>
<p>Welcome to my site</p>
</body>
</html>

You should then create a new file called "style.css" in the same directory as the .html file. You can then put all of your needed styles in that file. You can reference multiple html files to that one CSS file which makes life a lot easier. Here is an example of a basic CSS file that sets anything in <p> tags to normal Tahoma font at 12px:

p {font-family: "Tahoma"; font-weight: normal; color:#000000; font-size: 12px}

Please Note: In a .css file you don't need <style> tags or semicolons!



Author's URL: Depiction.net
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

No comments yet...
Add comments to "External Style Sheets"

Captcha