Explain about Style Sheets? (or) Explain how Styles are applied to a HTML Document?
https://www.computersprofessor.com/2016/06/explain-about-style-sheets-or-explain.html?m=0
|
Cascading Style Sheets:
It provides an approach to define
and associate rules for html page. In html program we can use tags to design
content in the web page. We can use attributes along with every tag to
enhance effects of the content.
Now by using style sheets we can
apply attributes to the basic tags without specifying them directly.
A style is a set of formatting
instructions that can be applied to a piece of text.
There are three mechanisms by which
we can apply styles to our html documents.
1.
The
styles can be defined within the basic html tag (Inline style sheet).
2.
Styles
can be defined in the head section and applied to the whole document (Internal
style sheet).
3.
Styles
can be defined in external files called style sheets which can then be used
in any document by including the style sheet via a ‘URL’.
Styles are defined by simple rules a
style can contain as many rules as you want. Styles are cascaded.
Rules:
A style rule has two parts
® (a) selector
® (b) Set of declarations.
A selector is used t create a link
between the rule and the html of tag.
Declaration has 3 parts
1)
Property
2)
Colon
3)
Value
Syntax: Selector {
Property: value;
Property: value;
-
- - - -
-
- - - -
}
|
|
Declarations must be separated by
using column and terminated using semi colon.
If you miss the colon or fail to put
semi colon with two declarations, the style cannot be processed.
Example:
body
{
background-color : red ;
text-align : center;
}
Inline style sheet:
In this kind of style sheet css
rules are applied directly in the tag itself.
Syntax: < tag style = property1: “value”;
- - - - - -
- - - - - -
</tag>
Example:
< html >
< head >
< title > Inline style sheet </title >
< /head>
< body>
<h1 style = “ font family: sans –serif; color:red; text – align : center” >
All III Bsc students </h1>
< P style = “ font – family: Times New Roman; font-size: 12pt; color: blue “ > welcome to Degree College </p>.
- - - - -
</body>
</ html >
Internal style sheets:
This is also called as embedded
style sheets. In this kind of style sheet the css rules are defined for html
tag within the head section. So that they are effected to the corresponding
tags used in body section.
Example :
<html>
<head>
<title > Internal style sheets </title>
<style>
h1 {color : red;}
h2 {color : blue;}
p{color: green;}
</style>
</head>
<body>
<h1 > all h1 elements are in red color </h1>
<h2> all h2 elements are in blue color </h2>
<p> all text in ‘P’ will be in green color </p>
</body>
</html>
External style sheet:
Both inline and internal style
sheets have some limitations.
Usage of inline style sheet is
restricted to only one tag.
Usage of internal style sheet is
restricted to only one web page.
Most of the web pages in all
websites may require some common design patterns, to solve this problem we
can use external style sheets.
External style sheet allows the user
to define css rules in a separate file identified as ‘filename. css’
extension. Then it is linked to all html web program using a special tag is
< link > tag.
This < link > tag must be
placed inside < style > tag as inner tag which is placed in head
portion of html program.
The same css document can be linked
to number of html web programs using < link > tag. Then all web pages
are displayed with same effect. This kind of implementation is called
reusability.
Syntax:< link rel = “ style sheet” href = “ c : \class.css” type = “ text/css”>
Classes :
If you want to apply a style to
some paragraphs (or) some headings in that case you have to use ‘classes’.
Syntax: Select.classname {property: value;}
Eg: h1.fred {
color:red;
background – color: yellow;
}
To link : < h1 class = “ fred” > A simple heading <h1>.
Program:
< html >
< head >
< style >
p.center {
text - align : right;
color: red;
}
< /style >
< /head >
< body >
< h1 class = “ center “> This is not effected </h1>
< p class = “center”> This will be red and aligned to center </p>
< p > this paragraph will not be effected </p>
< /body >
</ html>
Anonymous class:
Sometimes we want to apply a piece of
formatting, to many different elements within a page but not to the entire
page. Cascading style sheets provide a way of defining styles within the useable
classes.
Syntax: .classname {property: value;}
Program:
< html >
< head >
< title > class </tilte>
< style >
.h1 {color.blue;
border: thin groove;
}
.sub {
text – align ; right;
color: purple;
}
.sub1 {
align : right;
}
< /style >
< / head >
< body >
< h1 > simple style sheet < /h1>
< p class = “sub”> Degree College </p>
< p class = “ sub1“ > III BSC students </p>
< /body>
</html >
|
