CSS - Cascading Style Sheets
In the previous chapters we discussed about the variety of HTML tags and the attributes to design a webpage. As you already know about the formatting tags and its attributes, in some situations, you may need to use a tag uniformly in the entire document. To do so, we can use <style> tag. A style tag is used to change the default characteristics of a particular tag inthe entire web document wherever that tag is used.
For example, if you want to display <h3> tag in a particular font style and size with blue colour in the entire page,You can use <style> tag to define its properties in head section as follows.
<title> Usage of the <style> tag </title>
font-family: "Copperplate Gothic Bold";
<h3> Welcome to learn HTML </h3>
<h3> Welcome to learn CSS </h3>
In the above code segment, the style of <h3> header tag is clearly defined. So, hereafter, the content between <h3> and </h3> will be displayed as per its definition.The output of the above code is shown as below:
The <style> tag controls the presentation styles of a particular HTML document. If you want to use a particular tag with the same style applied in one HTML document to another is not possible. Thus, the <style> tags are called as “Page-Level Styles” or “Internal Style sheets”.
The “Internal Style sheet” is defined and implemented only within an HTML document. If you want use the same style to multiple pages, you should define styles as a separate style file. These separate style files are known as “Sitewide Style sheets” or “External Style Sheets”. Professional web developers do not use internal styles.
There is another style method called “Inline style” ,which is used to define style for a particular tag anywhere in an HTML document. You can define styles for any tag within an HTML document. But it is applicable only on that line where it is defined . If you use the same tag, again in the same document, it does not reflect the new style.
In this chapter, we are going to discuss about External Style Sheets or Sitewide Style Sheets that is about CSS.
Cascading Style Sheets (CSS) are also called as Sitewide Style sheets or external style. CSS is a style sheet language used for describing the formatting of a document written in HTML. Using CSS, you can control the font colour, font style, spacing between pages, columns size, border colour, background image or colour and various other effects in a web page. In external styles, you can store all style information in a separate file and include it in your web pages using an HTML tag. The separate file should be saved with the extension .css
Maintainability -CSS are also defined and stored as separate files. So, the style and appearance of a web page can be dynamically changed and maintain with less effort.
Reusability - The styles defined in CSS can be reused in multiple HTML pages.
Easy to understand - The tags in web pages are well organized with style specifications and therefore it is easy to understand.
The body of the style sheet consists of a series of rules.
CSS style declaration consists of two major parts; Selector and Declaration. The Selector refers an HTML tag in which you want to apply styles. The Declaration is a block of code contains style definition. It should be surrounded by curly braces. You can include any number of properties for each selector, and they must be separated by semicolons. The property name and its value should be separated by a colon. Each declaration should be terminated by a semicolon ( ; ).
In the above example, the style properties are defined to <p> tag. Hereafter, whenever you use the <p>, the contents will be displayed with modified properties. If you want to use the above style definition as an internal style then it should be specified within <style> …… ,</style> block in head section. If you want store the above definition for using all your web pages, you should save the above code as a separate file with extension .css
• Open an empty notepad.
• Type the style properties and their values as given in the table given above.
• Save the file with extension .css
font-style : Italic;
border:2px solid red;
The above code should be saved with extension .css
The <link> tag is used to add CSS file with HTML in head section. While using <link> tag, the following attributes are also included along with standard values.
rel = “stylesheet”
type = “text/css”
The href attribute is used to link the .css file.
<Link rel = “stylesheet” type = “text/css” href = CSS_File_Name_with_Extension>
font-family : "Comic Sans MS";
Font-weight : Bold;
border:2px solid blue;
font-style : Italic;
--- CSS_Test.htm ---
<title> Demonstration of using CSS </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<H1> Welcome to CSS </H1>
CSS was invented by HakonWium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation.
--- Back_Color.css ---
background-color : pink;
--- Background_CSS.htm ---
<title> Changing Background using CSS </title>
<link rel = "stylesheet" type="text/css" href="Body_Color.css"> </head>
<H1> Welcome to CSS </H1>
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simplyput your comments inside /*.....this is
a comment in style sheet.....*/. CSS - Workshop
• Develop a web page about your school with CSS.
• Develop a web page describing about your district. Use CSS to format HTML structural tags.
• The <style> tag controls the presentation styles of a particular HTML document.
• The <style> tags are called as “Page-Level Styles” or “Internal Style sheets”.
• Professional web developers do not use internal styles.
• The separate style files are known as “Sitewide Style sheets” or “External Style Sheets” or CSS
• CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document.
• Most commonly, CSS is combined with the markup languages HTML or XHTML.
• There is another style method called “Inline style” which is used to define style for a particular tag anywhere in an HTML document.
• Electronic governance or e-governance is the application of information and communication technology (ICT) for delivering government services.