CSS Coding

This page shows you how to get started coding CSS code.

3 Possible Locations of CSS

The CSS formatting can be located in 3 different places. First, you can have all your CSS formatting in a separate CSS file and have all your HTML/PHP files reference this file when they need formatting. This is called "external CSS". Secondly, you can have all the CSS you need for a particular HTML/PHP page inside that page in the <head> section surrounding by <style> tags. This is called "internal CSS". Thirdly, you can have the CSS for each particular item integrated into each HTML tag. This is called "inline CSS".

My recommendation is to always use external CSS when you code. The whole benefit to CSS is the fact that you can globally format items on your page. It would be stupid to use internal CSS because then you would have to change every single page on your site when you needed to change some CSS. Most people use inline CSS when they are formatting an element that will have a unique format that no other element will have so there is no reason to go to your external CSS file to create a formatting that wont be used elsewhere when you can just add some CSS to the HTML tag. But keep in mind there will be times when you do this and later find out you will need that particular formatting elsewhere. Also, it would be good practice to use external CSS as a beginner to get used to it. Later on, when you become an experienced webmaster and feel like using the shortcut of inline CSS then you will can do so. There is also an order of priority in case you have CSS in more than one place where a higher priority style will override a lower priority style. The highest priority is inline styling, the next highest priority is an internal stylesheet, the next highest is an external stylesheet, and the lowest priority is whatever the browser default is.

External CSS

External CSS File

This is your external CSS file named "stylesheet.css". You can see how the HTML/PHP file makes a call of the CSS file to get the definition of each class.


.fontred { font-color: red; }



PHP Page

<html>
<head>
<title>HTML tutorial</title>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>

<body>

<br>
<span class="fontred">This is red text</span><br><br>

</body>

</html>


This is how it looks


This is red text.

Internal CSS

PHP Page

Notice how there is no CSS file and the CSS formatting in inside the HEAD tags. When you use internal CSS you have to have it surrounded by <style> tags.

<html>
<head>
<title>HTML tutorial</title>
<style type=text/css>
.fontred { font-color: red; }
</style>
</head>

<body>

<br>
<span class="fontred">This is red text</span><br><br>

</body>

</html>


This is how it looks


This is red text.

Inline CSS

PHP Page

Notice how there is no CSS file and the CSS formatting is inside the individual HTML font tag. When coding it this way you need to let the HTML element know it is CSS formatting by typing 'style=' and then the formatting surrounded by quotes.

<html>
<head>
<title>HTML tutorial</title>
</head>

<body>

<br>
<span style="font-color: red;">This is red text</span><br><br>

</body>

</html>


This is how it looks


This is red text.

 
Bookmark this page: