Home | | Computer Applications 11th std | CSS - Cascading Style Sheets

Chapter: 11th Computer Applications : Chapter 13 : CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

Cascading Style Sheets (CSS) are also called as Sitewide Style sheets or external style.

CSS - Cascading Style Sheets

Introduction:

 

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.

<html>

<head>

<title> Usage of the <style> tag </title>

<style>

        h3

        { color:blue;

        font-family: "Copperplate Gothic Bold";

        font-size:14pt; }

</style>

</head>

<body>

<h3> Welcome to learn HTML </h3>

<h3> Welcome to learn CSS </h3>

<h3> Welcome to lean JavaScript </h3>

</body>

<html>

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.

 

Sitewide Style Sheets:

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

 

Advantages of 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.

 

CSS – Style definition rules

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 ( ; ).

Example:


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

 

CSS – Frequently using Text formatting Properties and Values

Table: 13.1




 

Creating CSS style sheets:

         Open an empty notepad.

         Type the style properties and their values as given in the table given above.

         Save the file with extension .css

 

Illustration 13.1 My First CSS file

P {

font-style : Italic;

color :MediumSeaGreen;

}

H1

{

border:2px solid red;

}

The above code should be saved with extension .css

 

Linking CSS with HTML

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.

 

General format of <Link> tag

 

<Link rel = “stylesheet” type = “text/css” href = CSS_File_Name_with_Extension>

 

Illustration 13.2 Formatting HTML element through CSS

Mystyle.css

H1

{

font-family : "Comic Sans MS";

Font-weight : Bold;

border:2px solid blue;

}

P {

font-style : Italic;

color :MediumSeaGreen;

}

 

--- CSS_Test.htm ---

 

<html>

<head>

<title> Demonstration of using CSS </title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<H1> Welcome to CSS </H1>

<P>

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.

</P>

<body>

<html>

Output will be:


 

Illustration 13.3 Changing background color of browser using CSS

--- Back_Color.css ---

body

{

        background-color : pink;

}

--- Background_CSS.htm ---

<html>

<head>

        <title> Changing Background using CSS </title>

        <link rel = "stylesheet" type="text/css" href="Body_Color.css"> </head>

<body>

        <H1> Welcome to CSS </H1>

</body>

</html>

 

CSS Comments

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.

 

Points to Remember:

 

                  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.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail
11th Computer Applications : Chapter 13 : CSS - Cascading Style Sheets : CSS - Cascading Style Sheets |


Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2024 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.