PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Internal or External Stylesheets

Posted by on 18th Mar 2007 CSS 1 comment

Cascading style sheets can be used internally or externally – ie. you can can add your style code to your page directly or place it in a seperate style code and link to it.

Its a very basic concept but since not everyone is familiar with CSS and since
nearly all blogs use it, i thought it would be worthwhile posting about it.

Internal Stylesheet

Here is the basic code for an HTML page.

<html>
<head>
<title>BloggingTips</title>
</head>
<body>Site content

</body>
</html>
If you want to place your css code internally, which might be preferable if your not using a lot of css code you want to use the style tag <style type="text/css">. Inside this tag you then place your CSS code like this :

<html>
<head>
<title>BloggingTips</title>
<style type="text/css">
your css code here for example
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #d5d6d7 url('images/kubrickbgcolor.jpg');
color: #333;
text-align: center;
}
</style>
</head>
<body>

External Stylesheet

If you have a lot of CSS code it makes sense to keep all your CSS in a seperate file. All you need to do is copy the CSS code to a blank file and save it with a .css extension. Most of the time this is called something like style.css or stylesheet.css but you can call it whatever you want, which is usually the case if you are using more than one stylesheet on your site.

To link to your css code you need to use this code :

<link rel="stylesheet" type="text/css" href="stylesheet address" />

In your page the code would be placed inside the HEAD tag like this :


<html>
<head>
<title>Your Blog</title>
<link rel="stylesheet" type="text/css" href="http://www.yourblog.com/wp-content/themes/default/style.css" mce_href="http://www.yourblog.com/wp-content/themes/default/style.css" />
</head>
<body>

If you are unsure about any of this please let me know though im sure you will be able to figure it out by looking at the style sheet of your blog.
Good luck!

Kevin Muldoon is a webmaster and blogger who lives in Central Scotland. His current project is WordPress Mods; a blog which focuses on WordPress Themes, Plugins, Tutorials, News and Modifications and useful resources such as 101 Places To Find Images For Your Blog Posts.

1 comment - Leave a reply
  • Posted by Johan on 11th Jun 2008

    Its very simple question. Definitely you need to use external style sheet, because if you not, you will increase time of load your page. That can be used not only for css, but to javascript too.