The HTML is used only to identify the content of the page, and the style sheet is used to specify the presentation of the content. The purpose of cascading style sheets (CSS) is to separate the style of a web page from its content.
Let us start with the basic formatting style. Therefore to define a style on a tag, for example <p> para tag, we need a selector. The “p” in the para tag is the selector. Then the properties for the selector needs to be defined. This is similar to the attributes in HTML, CSS properties alter specific attributes of a selector. Now if we need to change the style of <p> tag to use Arial as the font then we use the property as font-family with the value as arial, for example, the style for the <p> tag is written as:
[html]
p {
font-family:arial;
}
[/html]
Figure 1:
The properties defined in { and } including brackets are known as the declaration. and Selector together with declaration is known as a set of rules. Every property has a value separated by a semicolon.
Let us see another example with multiple attributes:
Figure 2:
The CSS allows three ways to define style sheets:
Inline: Styles are embedded within the HTML tags.
Internal: Styles are written within head tag of the web page. This style has an effect on the entire web page.
External: Styles are written in a separate document known as cascading style sheet document or CSS document. This file extension for this type of file is .css
The video below demonstrates the complete working of HTML & CSS
Inline Styles
The inline styles are written within the HTML tags in the web page. To apply style on the HTML tag, style attribute is used. The value of the style attribute is the property with its value. For example:
<h1 style=”color: blue;” >
In the above example only one property is used to apply style in <h1> tag. We can use multiple properties, seperated by a semi-colon embedded within HTML tag as inline style. For example:
<h1 style=”font-family: verdana; font-style: bold; color: red;” >
Figure 3:
Let us apply the styles to the HTML, for example:
Figure 4:
[html]
<html>
<head>
</head>
<body>
<h1 style=”color: blue;” >
This is demo with styles
</h1>
<h1 style=”font-family: verdana; font-size: 18pt; font-style: italic; color: red;” >
This is demo with styles
</h1>
</body>
</html>
[/html]
Output 4:
Internal Styles
The internal styles are written within the <head> tag of the HTML page. When the style for the HTML tag is defined in Internal CSS, it affects the entire web page. Suppose if style for <h1> tag is defined in internal CSS, where ever the <h1> tag is used in the same HTML page, the style will be applied. This is advantages since we can define style once and it will be applied to the entire web page, instead of using inline styles for every tag in the web page.
To define internal styles, <style> tag is used within <head> section of the HTML web page. The attribute type is used whose value is “text/css”. The source code for this Internal Style is demonstrated below:
Figure 5:
[html]
<html>
<head>
<style type=”text/css”>
h1 { color: blue; }
h2 {
font-family: verdana;
font-size: 18pt;
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1>This is demo with H1 styles</h1>
<h2>This is demo with H2 styles</h2>
</body>
</html>
[/html]
Output 5:
External Styles
The External Styles Sheet are essentially created for the same purpose as Internal Style Sheets, except the external style sheet is written in a different document with .css as an extension. This external CSS document is then referenced in the HTML page. The advantage of this External CSS is to separate the HTML code with the CSS Code. For example, the same Internal Style sheet used in the above example can be written as External Style Sheet as shown below:
Figure 6:
[html]
h1 {
color: blue;
}
h2 {
font-family: verdana;
font-size: 18pt;
font-style: italic;
color: red;
}
[/html]
Figure 7:
[html]
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
<body>
<h1>This is demo with H1 styles</h1>
<h2>This is demo with H2 styles</h2>
</body>
</html>
[/html]
Output 7:
Organizing the Content of the Web Page <div> tag
Most of the web pages are organized according to some style such as headers, body content, and footers. The body content may contain menus on the left or the right side along with the main content. This type of structure can be achieved using <table> tags, but using tables tags is an old school method which is not suitable for screens with different dimensions. The best way to structure the content of the web page is to divide the web page into sections. This can be achieved by using <div> division tags. Division tags are used to divide the web page into different divisions and then apply style for different div tags. Please note that the <div> tag itself does nothing, it does not even create a line break or para break. It only acts as a container, which can be later manipulated by applying different styles. For example, let us see the application of <div> tags to structure the web page:
Figure 8:
[html]
<html>
<head>
</head>
<body>
<div id=”myheader”>
This is for Header Content
</div>
<div id=”mybodycontent”>
This is for Body Content
</div>
<div id=”myfooter”>
This is for Footer Content
</div>
</body>
</html>
[/html]
In the above HTML document, we see that there are three <div> tags used. Please note that each <div> tag has “id” as an attribute and its unique value. Through the use of “id” attribute, each division of the web page can be uniquely identified and different styles can be applied accordingly.
Ouptut 8:
Note that in the above output, the content is displayed without any style. This is because we have not written any style for <div> tags. Let us apply different styles to these div tags.
To apply styles for <div> tags, we need a selector. Remember in the start of this tutorial we have seen selectors for <p> and <h1> tags. But here we cannot use <div> as the selector in defining styles because, the style will be applied to all the three <div> tags, instead we need to apply different styles for each <div> tag. Therefore, in this case, our selector to apply style will be the name used in the “id” attribute. The predefined HTML tags can be directly used as selectors to apply the styles. But in this case, since the selector in an “id” attribute, it is preceded by “#” character. For example: #myheader { }
Figure 9:
[html]
#myheader {
font-style: italic;
background-color: blue;
color: white;
}
#mybodycontent {
font-family: verdana;
font-size: 14pt;
}
#myfooter {
font-size: 10pt;
font-style: bold;
color: red;
}
[/html]
Figure 10:
[html]
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystylediv.css” />
</head>
<body>
<div id=”myheader”>
This is for Header Content
</div>
<div id=”mybodycontent”>
This is for Body Content
</div>
<div id=”myfooter”>
This is for Footer Content
</div>
</body>
</html>
[/html]
Output 10:
The above
<span> tag
The <span> tags is similar to <div> tag and same as <div> tag, the <span> tag itself does nothing, it does not even create a line break or para break. The difference between <div> and <span> tag is that the <div> tag changes the style for the entire division or section. The <span> tag is best used for inline styles. Let us see the use of <span> tag, as the <div> tag has “id” as an attribute, the same way <span> tag has “class” as an attribute. The “id” attribute of the <div> tag and “class” attribute of the <span> tag works the same way except that in CSS the “id” value is preceded by “#” character and where as the “class” value is preceded by “.” period before the name in CSS.
Let us suppose that we need to highlight some content of the text in the body of the web page, we will demonstrate the use of <span> tag.
Figure 11:
[html]
#myheader {
font-style: italic;
background-color: blue;
color: white;
}
#mybodycontent {
font-family: verdana;
font-size: 14pt;
}
#myfooter {
font-size: 10pt;
font-style: bold;
color: red;
}
.highlight {
font-size: 18pt;
color: green;
}
[/html]
Figure 12:
[html]
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyledivspan.css” />
</head>
<body>
<div id=”myheader”>
This is for Header Content
</div>
<div id=”mybodycontent”>
This is for <span class=”highlight”>Body
</span> Content
</div>
<div id=”myfooter”>
This is for Footer Content
</div>
</body>
</html>
[/html]
Output 12:
The above