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
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.
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:
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:
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:
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>
[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>
Example:
<html>
<body style="background-color:green">
<h1 style="color:white;text-align:center">
THIS IS THE DEMO FOR INLINE STYLE SHEETS
</hl>
</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:
<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>
Example:
<html>
<head>
<style>
body {background-color:yellow}
h1{color:black}
</style>
</head>
<body>
<h1>THIS IS THE DEMO FOR
INTERNAL CASCADING STYLE
SHEETS</h1>
</body>
</html>
Output:
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>
Example:
Prg1:ext.css
body {background-color:blue}
h1{color:white;text-align:center}
Prg 2:external.html
<html>
<head>
<link rel="stylesheet" href="ext.css">
</head>
<body>
<h1>THIS IS SAMPLE DEMO FOR
EXTERNAL CASCADING STYLE
SHEETS</h1>
</body>
</html>
Output:
