Scribd
Upload
3 views

Lec5 CSS

Uploaded by

umarmalikk64
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Lec5 CSS

Uploaded by

umarmalikk64
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Introduction to cascading style sheets

Cascading style sheet (CSS) is a W3C standard for controlling the presentation of web pages.
CSS is a styling language. We define style for a web page and apply this style on web pages. In
this lecture we will learn the basics of CSS.

1. Cascading style sheet (CSS):

Contents are the most important building block of web applications. We have to apply
formatting to make the presentation of contents attractive. Similarly, we have to keep the
appearance of all the pages consistent. These tasks require huge effort because we have to add
formatting information on all pages and for all HTML elements. When we have to make changes
to some element, it requires changing all appearance on all pages for that particular element in
order to maintain consistency. CSS provides a solution to this problem.

CSS is a styling language. CSS is used to control the presentation of elements on a web page.
Using CSS we define style for HTML elements. We include these styles in web pages and the
HTML elements on these pages adopt that style. When we have to make change to some
element, we just change the style for that element in CSS and this change is applied on all
appearances of that element on all pages.

CSS was created by Hakon Lie of MIT in 1994. Now, it has become the W3C standard for
controlling visual presentation of web pages. Cascading style-sheets are powerful mechanism to
add style to web document. It enforces standards and uniformity. We can also create dynamic
effects on web pages using CSS.

1.1 Advantages of CSS:

Following are the major advantages of CSS

Saves time: using CSS we define styles for HTML elements. These styles are defined once and
are reused on all pages. In this way the use of CSS reduces development time.
Easy to change: the use of CSS also reduces the change management effort. When we have to
make any change to the appearance of an element we just change it in CSS and these changes
are automatically applied on all pages

Keep consistency: CSS are also very useful for keeping consistency in the appearance of HTML
elements. As we define style for HTML elements once and this style is applied on all
appearances of those elements. Therefore, all appearances show consistent behavior and look.

Give you more control over layout: CSS also provide more control over the appearance of
HTML elements as compared to HTML.

Use styles with JavaScript: we can use CSS with JavaScript to create dynamic effects on web
pages.

2. Embedding CSS in HTML code:

We can embed CSS in HTML code in following ways:

In-line style: In-line styles are used to control the appearance of single appearance of an
element or tag. In in-line style, we add styles to each tag within the HTML file and this style only
affect that appearance of the tag. Therefore, we can say that in-line style is a tag level style. We
use it when you need to format just a single section in a web page.

We use the style attribute of an element to define in-line style. Following is an example of in-
line style, where we define a style for H1 tag and control its color and font family.

<h1 style=color:red; font-family: sans-sarif > IU </h1>

Internal style: Internal style is defined for a web page. Usually, we declare style for HTML
elements in the head section of the html document and this style is applied automatically on
those elements. We use the <style> tag to start a style block and </style> to end that block.
Following example shows the use of internal style. In this example we define a style block in the
head section and declare a style for H1 tag. In the body section, when we use the H1 tag that
style is applied automatically.
<html>
<head>
<title>Internal CSS</title>
<style>
h1{color:#FF0000;
font-family:Calibri;
font-size:36px
}
</style>
</head>
<body>
<h1>This heading is styled with CSS</h1>
</body>
</html>

Following figure shows the output of the above code

External style: In external style we write the CSS code in a separate file and this file is included
in all pages to control the appearance of HTML elements. We can write CSS code using any text
editor including Notepad. While writing CSS code in a separate file we do not use the style tag.
We just write the CSS code. We save a CSS file with .css extension.
We can include the CSS file in HTML code using link tag. The syntax of link tag along with its
attributes is
<link href=URL rel=“relation_type” type=“link_type”>
where
– URL is the file.css
– Relation_type=“stylesheet”
– Link_type=“text/css”
Following example shows the use of external style:
mystyle.css HTML file:
h1{color:green; <html>
font-size:36px; <head>
font-family:calibri <title>External Style</title>
} <link href="mystyle.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h1>This heading is styled with external
stylesheet</h1>
</body>
</html>

In the above example, we write a CSS file which includes the style for H1 tag and this file is save
with the mystyle.css name. Then we write a HTML file and included mystyle.css in it. Now, in
HTML file when we used the H1 tag it adopted the style which is declared in the mystyle.css file.
The output of the file is shown in the following figure

Strategies for the use of CSS: the following rules can be used to choose the type of style
• Wherever possible, place your styles in external style sheets
• At the top level of your web site: define a default global.css style sheet
• Refine styles at sublevels with a section.css style sheet
• Try to avoid using styles in tags

3. Writing CSS rules:

In previous section, we discussed different types of styles. We saw that we write style rules for
HTML elements. These rules control the appearance of those elements. In this section we will
learn the basic syntax for declaring CSS rules.
A CSS rule consists of two parts.
A selector: a selector is the element or elements for which we declare the style
Declaration: Here we define the style for the selector element. It has two
– property: which is the property of the selected element
– value: which is a specification for this property
The syntax for defining a CSS rule is given below
Selector { property1 : value; property2 : value; ……..; propertyn : value}
In a CSS rule, first of all we write the selector and then we declare style for that selector in curly
braces. To declare a style, we write the property of the selector, : symbol and then the value for
that property. The example of a CSS rule is given below
h1{color:green;
font-size:36px;
font-family:calibri
}

4. Using Id,s and Classes:

In previous sections we discussed the working of CSS. We saw that we declare CSS rules for
HTML elements and these elements are applied on all appearances of those elements.
Sometimes we have to declare multiple styles for a single element. For example, when we
declare a style for H1 tag then all headings will appear in same style. Now, if we want to use a
different style for a specific heading then we have no option for that. To solve this problem CSS
provides us two options. We can use either id or a class. Using id we can define a style and it
can be applied to a tag using its id attribute. In this way that particular appearance of the tag
adopts different style from others.
Defining and using id: We can define an id using the following syntax
# id-name {style-declaration }
This id can be applied to a tag using id attribute of the tag. The syntax is given below
<tag id=”id-name”>
In the following example we show the usage of id. In this code, we have declared a style for <p>
tag and also created an id with p1 name. In the body section we have declared two paragraphs.
In first paragraph we have used the <p> tag while in the second paragraph we have used the id
p1. Both of these paragraphs adopt different styles.
<html>
<head>
<title>Using ID</title>
<style>
p{color:red}
#p1{color:blue}
</style>
</head>
<body>
<p>This paragraph does not use Id</p>
<p id="p1">This paragraph uses Id</p>
</body>
</html>

Output of the above program is given below

Defining and using classes: We can also use classes for defining multiple styles for a single tag.
We define a class in CSS file and use this class in a tag using its class attribute. We can define a
class as
selector. class-name {style-declaration}
or simply by
.class-name {style-declaration}
We can use this class in a tag as
<tag class=”class-name”>
Following example shows the usage of style classes.
<html>
<head>
<title>Using class</title>
<style>
p{color:red}
p.p1{color:blue}
.p2{color:yellow}
</style>
</head>
<body>
<p>This paragraph does not use class</p>
<p class="p1">This paragraph uses p1 class</p>
<p class="p2">This paragraph uses p2 class</p>
</body>
</html>

In the above code we have declared a style for <p> tag and also defined two classes for this tag.
In the body section we have declared three paragraphs. In first paragraph we did not use any
class while in remaining paragraphs we have used the style classes. The output of the code is
given below

Difference between an id and a class: HTML requires each id be unique– therefore an id value
can only be used once in a document. We can’t have more than one tag with the same ID value
while we can apply the same Class value to multiple document tags.

You might also like