Scribd
Upload
32 views

Unit-2 CSS

This document discusses cascading style sheets (CSS) which allow formatting styles to be applied to HTML elements. CSS rules have selectors that identify elements and declarations that specify properties and values. There are several ways to incorporate CSS including inline styles, embedded style sheets within <style> tags, external style sheets linked via <link> tags, and imported style sheets. CSS rules can target elements by tag name, class, ID, and other selectors. Cascading allows similar rules to apply across pages by linking or importing an external style sheet file.

Uploaded by

gamingprotype12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Unit-2 CSS

This document discusses cascading style sheets (CSS) which allow formatting styles to be applied to HTML elements. CSS rules have selectors that identify elements and declarations that specify properties and values. There are several ways to incorporate CSS including inline styles, embedded style sheets within <style> tags, external style sheets linked via <link> tags, and imported style sheets. CSS rules can target elements by tag name, class, ID, and other selectors. Cascading allows similar rules to apply across pages by linking or importing an external style sheet file.

Uploaded by

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

1

UNIT-2
CASCADED STYLE SHEET (CSS)
Style Sheet: Style sheet is a collection of formatting styles, which can be applied to a web page. It
consists of following components:

Style Rule: - A style rule is a set of HTML tags specifying the formatting elements. These are used to
create style sheets .It can be split into two parts:

Selector: A selector is a string that identifies what elements the corresponding rule applies to and is
the first part of rule.

Declaration: This part of the rule is enclosed with in curly brackets. A declaration has two sections
separated by a colon.

Syntax of a style rule is as follows:-


selector {property: value}
Eg: H1{color:blue}

Having studied the concept of a style rule, let us now learn to construct style sheets. Basically there are 4
ways of incorporating style sheets in HTML .which are:-

1. Including style information inline -Inline Style: This declaration is the most basic style rule.
These sheets are created in the line in which style is required. Inline style are implemented by using style
attribute with the HTML tags

Syntax:- <HTML TAG STYLE="Property:VALUE">


Eg:-
<HTML>
<BODY
<H1 STYLE="COLOR:LIMEGREEN">This is Inline Style</H1>
</BODY>
</HTML>

2. Embedding Style Sheet: You can group more than one style rule using
the<STYLE>.....</STYLE>Tag pair unlike of applying it individually in inline style
It is applied in HTML head section.
Eg:-
<HTML>
<HEAD>
<STYLE>
P{Font-family:Arial}
H1{colr:limegreen}
</STYLE>
</HEAD
<BODY>
...........
</BODY>
</HTML>

AJAY PARASHAR
IT @ HCST
2
3. Grouping Style Rules: If we have to apply same style property to two or more elements (tags),
then instead of applying individually to all, we can group them .A comma is used to separate each of these
selectors.

Eg :-
<HTML>
<HEAD>
<STYLE>
H1,H2{Color:red;font-family:arial}
</STYLE>
</HEAD>
<BODY>
<H1>This is H1 element</H1>
<H2>This is H2 element</H2>
<H3>This is H3 element with default</H3>
</BODY>
</HTML>

Selectors: A selector is a string that identifies what elements the rule is applied.
These are categorized into:

1. Simple Selector: A simple selector describes an element irrespective of its position in the
document structure.
H1{color:blue}

2. HTML selector: These selectors use the names of HTML elements without brackets. So the
HTML tag <p> becomes P.

3. Class Selector: The class selector gives authors the ability to apply styles to specific parts of a
document and do not necessarily to the whole document. It is identified by (.) dot symbol.

Syntax:-
<HTML>
<Head>
<STYLE>
.note{color:blue;font:verdana}
.syntax{color:red}
</STYLE>
</HEAD>
<BODY>
<P class="syntax">
........
.....
</BODY>
</HTML>

4. ID selector: Like class selector, ID selector is also used to apply style to be selected parts of
text.
-->ID selector name can be any valid string of characters.
-->ID selector is unique and is preceded with a hash (#).
-->It can be applied to any of HTML elements by using ID attribute.
AJAY PARASHAR
IT @ HCST
3

Syntax:-
<STYLE>
#ID Selector name{property:value} [#CONTROL{COLOR:RED}]
</STYLE>
<BODY>
<P ID="ID SELECTOR NAME"> [<P ID="CONTROL">…….</P>]
</BODY>

5. Contextual selectors: Consider a situation where, we have some tags under H1 that are
italics. Now if we want any of them in red color, we could use following code:-

H1 {color: red}
I {color: red}

But in above mentioned code, all type italicized tags turn to red. This is bcoz of line2 of the code.
To avoid such situation contextual selector can be used. It can be used to combine number of simple
selectors separated by space.
The above code can be rewritten as:-
H1, I {color: red}

CASCADING STYLE SHEETS:


If you want to apply similar settings for all the pages in the web site, it is done by putting all the style rules
in a style sheet file and then importing or linking it with your HTML document. This method of linking or
importing is called CSS.

1) Linking to an External Style Sheet: - For constructing a css, first style rules must be written
in a document and saved in a separate file with an extension of css.

Syntax:-
<LINK REL=STYLESHEET HREF="YOURFILE.CSS"(or url) TYPE="text/css">

Eg: - S1.css
<Style>
H2{color:limegreen;font-family:arial;font-size:normal}
</STYLE>

To link it in HTML
<HTML>
<HEAD>
<TITLE>......</TITLE>
<LINK REL=STYLESHEET HREF="S1.CSS" TYPE="text/css">
</HEAD>
<BODY>
<H2>...........
……
……
</H2>
</BODY>
</HTML>

AJAY PARASHAR
IT @ HCST
4
2) Importing the Style Sheet:
Importing automatically pulls the style rules into the document for use. once imported changes made
to the style sheet will not be reflected in the WebPages into which it has been imported. This
problem can be main document rather than importing it

Syntax:-
<HTML>
<HEAD>
<STYLE TYPE="Text/CSS">
@Import url(the path):
</STYLE>

Style Sheet Properties:


(DO IT YOURSELF)
1) FONT PROP
2) TEXT PROP
3) COLOR & BACKGROUND PROP
4) BOX PROP
5) PADDING PROP

For Example Program, kindly find the attached CSS Cheat Sheet Program in E-Mail.

AJAY PARASHAR
IT @ HCST

You might also like