Types of CSS: There are ways of inserting style sheets in CSS. These ways are basically three; they are
- The Inline Style Sheet.
- The Internal Style Sheet.
- The External Style Sheet.
One basic fact we must bear in mind is that when a browser reads a style sheet, it will format its document according to the style sheet in which it is reading. Haven known this, we now look at these three style sheets and the effects they take on their browsers.
Types of CSS (Inline, Internal & External)
The Internal style sheet has its style embedded in the head part of the HTML document of your web-page(s). That is to say that the “internal style sheet” is defined in the head section of an HTML page, by using the <style> tag.
For the External Style Sheet, the antithesis of the Internal Style Sheet is what is applied to it. For the former, style sheets are embedded at the head section of the HTML document; but for the present, the style sheet is embedded in another page entirely which is made to be called upon by a simple link in the page where it is needed.
For the Inline Style Sheet, it is almost like the Internal Style Sheet. But the difference is that the Inline Style Sheet is applied directly inside the HTML line(s) in which it is needed So now let’s look at these three style sheets one after the other.
Inline CSS
Inline Cascading Style sheets are written inside an HTML document, directly inside an element’s tag using a Cascading Style Sheets property or attribute. Note that the styles must be directly applied to HTML tags and hence there is no need for the Cascading Style Sheets open and close tags. A typical example of an Inline Style is as given in the example below:
Inline CSS Syntax
<body style="background-color: blue">
When you preview the HTML document you applied the above style to on a browser, you will notice that it gives the web page a blue background color defined by the value given to the CSS “background-color” property, instead of the default white background color.
A Few Inline CSS Sample Codes
<h1 style="font-size:2.1em; text-align:0; color:orange;">CASCADING STYLE SHEETS</h1>
This will apply the specified property values of font-size, text-align, and color to this h1 tag in the HTML document.
<h2 style="font-size:1.5em; text-align:0; color:blue;">INLINE CSS</h2>
This will apply the specified property values of font-size, text-align, and color to this h2 tag in the HTML document.
<h3 style="font-size:1.1em; text-align:0; color:blue;">INTERNAL CSS</h3>
This will apply the specified property values of font-size, text-align, and color to this h3 tag in the HTML document.
<h4 style="font-size:0.8em; text-align:0; color:blue;">EXTERNAL CSS</h4>
This will apply the specified property values of font-size, text-align, and color to this h4 tag in the HTML document.
<p style="text-align:center; fontweight:bold;">Write your text here</p>
This will apply the specified property values of text-align to this p tag in the HTML document.
Note that if you copy an Inline Cascading Style Sheets code from a word processor and past it into Dreamweaver HTML document, it may not be active and all the codes will be all blue in color instead of some being pink as well and hence will not work. To tweak it, just remove the open and close quotes and type them again and it will become active and will now work.
Internal CSS
Internal Cascading Style Sheet is normally embedded in the head section of the HTML document just before the closing head tag and enclosed inside the open and close style tags. It is also usually applied to HTML elements but not directly.
To embed and apply an Internal Style Sheet,
1.Write the CSS open tag i.e.<style>.
2.Write the HTML element e.g. h2, p, a, hr,and h1.
3.Open the parenthesis {Write the CSS properties and values e.g.color:orange; font size: 30% Close the parenthesis}
4.Close the CSS tag </style>
Internal CSS Examples
<style type="text/CSS">
h1 {font-size:2.5em; text-align:0; color:red;}
</style>
<style type="text/CSS">
hr {color:#FF0000;}
</style>
<style type="text/CSS">
a {font-weight:bold; font-size:0.6em; text-align:center; color:##FFFF00;}
</style>
<style type="text/CSS">
h2 {font-size:0.8em; font-weight:bold; text-align:0;color:green;}
</style>
<style type="text/CSS">
p (text-indent:2.3em;}
</style>
You embed these Style Sheets in the head section of the HTML document and its effects will be applied to the appropriate HTML elements. In the examples above, all “hr” “a”, “p”, “h1”, “h2” HTML tags on the web page will have the appropriate CSS applied to it.
External CSS
External Cascading Style Sheet is a Style Sheet saved as a style sheet document. This implies that it is saved as a “.css” file. The style sheet’s call-up link that will call upon the external CSS is then placed at the head section of the HTML document and its properties will then be applied to all HTML tags in the web page that has a defined class and div id definition included in the external style sheet file.
Class Definition
To apply an external CSS to an HTML document using a class definition, follow the explanations here.
Class Definition Examples
1. Define the class of the tags you want the properties to be applied to in the HTML document (e.g. h1, h2, h3, h4, h5, h6, p, li classes). See the sample codes below:
<h1 class="h1"></h1> <h2 class="h2"></h2> <p class="p"></p> <li class="li"></li>
2. Write the code and save it as .css document e.g. (HTML5.css)
h1 {font:bold; text-align:left; color:#FF0000;}
h2 {font:bold; text-align:left; color:#FF8080;}
h3 {font:bold; text-align:left; color:#FF80C0;}
h4 {font:bold; text-align:left; color:#FF3366;}
h5 {font:bold; text-align:left; color:#00FFFF;}
h6 {font:bold;text-align:left; color:#FF3333;}
li {font:normal; text-align:left; color:#80FFFF;}
p {font:normal; text-align:left; color:#8080FF;}.
3. The page you want to apply it to and the CSS file should be saved in the same folder.
4. Link the HTML document to the CSS document with the type of link below
<link rel=stylesheet href=”HTML5.css”type=”text/CSS”>
NOTE: If the class name is same as the HTML tag, then you may or may not put a dot before the class name in the external CSS document e.g. the class <body class=”body”>, can have the external CSS bellow:
body {
background-color: #CCFFCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #336699;
If the class name is different from the HTML tag, then you must put a dot before the class name in the external CSS document e.g. the class <ul class=”navBar”>, can have the external CSS bellow:
navBar{
background-color: #CCCCCC;
text-align:center;
padding: 4px;
border-right: 10px solid #ccc;}
Division Identification (Div Id)
To apply an external CSS to an HTML document using div id, follow the explanations here.
Define the “div id” e.g. navBar and link to the.CSS file with the defined div id name preceded with #e.g. #navBar.
Navigation Bar
The HTML document of a Navigation and Site information is shown below: the two div id defined are (navBar for the Navigation menu and site info for the site information).
When div id is used, the .css style sheet is applied to the named div id preceded by #e.g. #navBar.
Navigation Bar Example
<div id="navBar"> <ul> <li> <a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> </ul> </div> <div class="relatedLinks"> <h3>Related Link Category</h3> <ul> <li> <a href="#">Related Links</a></li> <li><a href="#">Related Link</a></li> <li> <a href="#"> Related Link</a></li> <li><a href="#"> Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> </ul> </div>
The external CSS which is saved as .css file and applied to the above HTML document is as shown below:
#navBar{
margin: 0 0 0 79%;
padding: 0px;
background-color: #FFCC00;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}