Different Types of CSS
There are three ways of adding CSS style rules to HTML elements:
1. Inline — using the style attribute in HTML element
2. Internal — inside the style element under head section
3. External — using an external CSS file with .css extension
Therefore, CSS allows style rules to be specified in three different ways. CSS styles can be added inside a single HTML element, inside the “style” element under HTML head section, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
All the styles will “cascade” into a new “virtual” style , where number one has the highest priority, followed by number 2 and number 3.
So, an inline style (inside an HTML element) has the highest priority, which means that it will override internal style (which is declared inside the “head” section), or in an external style sheet.
CSS Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
| selector { property : value } |
The selector is normally the HTML element/tag we wish to define, the property is the attribute we wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
| body { background-color : lightblue } |
If the value is multiple words, put quotes around the value:
| p { font-family : “sans serif” } |
If we wish to specify more than one property, we must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
| p { text-align : center; color : red } |
To make the style definitions more readable, we can describe one property on each line, like this:
p { text-align : center; color : red; font-family : arial }
Grouping
We can group selectors; separating each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
| h1, h2, h3, h4, h5, h6 { color : green } |
How to Insert a Style Sheet
When a browser reads a style sheet, it will format the web page according to it. There are three ways of inserting a style sheet: 1) Inline, 2) Internal (or embedded), and 3) External. We will demonstrate each of them one-by-one with coding examples.
[1] Inline CSS
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles we use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
The complete code is given below. It also changes the background color and adds one more paragraph.
<html> <body style="background-color: lightblue"> <p style="color: red; margin-left: 20px"> This is a paragraph </p <br> <p style="color: green">This is another paragraph</p> </body> </html>
Output:
[2] Internal CSS
The internal style sheet should be used when a single document has a unique style. We define internal styles in the head section by using the “style” tag under HTML head section, like this:
<head> <style type="text/css"> h3 { color: blue } p { color: red; margin-left: 20px } body { background-color: lightblue } </style> </head>
The complete code is given below:
<html>
<head>
<style type="text/css">
h3 { color: blue }
p { color: red; margin-left: 20px }
body { background-color: lightblue }
</style>
</head>
<body>
<h3>This is a heading</h3>
<hr>
<p>This is a paragraph</p>
</body>
</html>The browser will now read the style definitions, and format the document according to it. The output is given below.
Output:
[3] External CSS
An external style sheet is ideal when the style is applied to many web pages. With an external style sheet, we can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the “link” tag. The “link” tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css" href="external.css"/> </head>
The browser will read the style definitions from the file external.css, and format the document according to it. An external style sheet can be written in any text editor. The file should not contain any HTML tags. Our style sheet should be saved with a .css extension.
The example style sheet named external.css file is shown below:
body { background-image: url(“bgdesert.jpg”) } h3 { color: blue; font-family: verdana; font-size: 300% } p { color: red; font-family: courier; font-size: 150%; } |
The complete code is given below:
<html> <head> <link rel="stylesheet" type="text/css" href="external.css"/> </head> <body> <h3><b>This is a heading</b></h3> <hr> <p><b>This is a paragraph</b></p> </body> </html>
Output:
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet (mystyle.css) has these properties for the h3 selector:
| h3 { color: blue; text-align: right; font-size: font-size: 10pt } |
And an internal style sheet has these properties for the h3 selector:
h3 {
text-align: left;
font-size: 20pt
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color: red; text-align: left; font-size: 20pt
The complete code is given below:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
h3 {
text-align: left;
font-size: 20pt
}
p {
color: magenta;
}
</style>
</head>
<body>
<h3>This is a Heading</h3>
<p style="color: blue">This is a paragraph</p>
<br>
<p>This is another paragraph</p>
</body>
</html>The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet. The same rule is also applicable for <p> tag and as a result, the inline style will overpower the internal style sheet. The output is given below.
Output:
