![Page 1: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/1.jpg)
1
Web Development
CSS (Cascading Style Sheet)
![Page 2: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/2.jpg)
2
1. Setting rules for multiple elements
To decrease the amount of typing for setting rules for multiple tags, it is possible to group them.
Separate them with commas (,). h1, h2, h3 { background : yellow;
color : black ;}
![Page 3: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/3.jpg)
3
2. Id Rules
Without inline styles, how particular style is applied to one occurrence of the <h1> element.
This is done by applying id rules.
![Page 4: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/4.jpg)
4
2. Id Rules cont.
We can name particular tag with id attribute so that it can be accessed or made a destination for example by a link.
<h1 id =”FirstHeading”> Welcome to----</h1>
LINK
<a href = ”#FirstHeading” >Go To Heading1 </a>
Ids of different elements should be unique.
![Page 5: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/5.jpg)
5
2. Id Rules cont.
id of an element is used to refer it from a style rule.
Example:
RULE:
#FirstHeading {backgroung-color :green;}
IMPLEMENTATION:
<h1 id=”FirstHeading”> - - - -</h1>
![Page 6: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/6.jpg)
6
3. Class Rules If we want to affect multiple elements, a
class rule should be employed instead of id.
Class attribute defines the name of the class, an element belongs to.
They don’t need to be unique for all elements.
Many elements can be member of same class.
![Page 7: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/7.jpg)
7
3. Class Rules cont.<style type=”text/CSS”>
<!- - .veryimportant {background-color:yellow;} - ->
</ style >
<body> <h1 class=”veryimpotant”> Class Example </h1> <p class=”veryimportant”> paragraph contents…</p>
</body>
![Page 8: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/8.jpg)
8
Pseudo Classes
A special pre-defined class grouping, called pseudo-classes is mainly used to deal with states of links.
1. a:link {color:blue; text-decoration:none;}
2. a:active {color:red;}
3. a:visited {color:purple;}
4. a:hover {color:red;}
![Page 9: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/9.jpg)
9
Pseudo Elements
These elements are used with common block level text elements such as <p> to effect the first letter or first line of enclosed text.
There are two pseudo-elements: First-Letter First-Line
![Page 10: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/10.jpg)
10
Pseudo Elements cont.
Example:
< style type = ”text/css”> <!- - p:first-line {background-color = ”Yellow”; } p:first-letter {color:red; font-size:150;} - - > </style>
![Page 11: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/11.jpg)
11
Contextual Selection
Contextual selections are treated by showing the order in which element must be nested for the rule to be applied.
Example:
p strong { background-color : yellow;} All occurrences of <strong> element within
<p> element must be yellow while others not necessarily have to be yellow.
![Page 12: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/12.jpg)
12
Inheritance
HTML documents have an implicit structure.
title h1
b
head
html
body
p
![Page 13: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/13.jpg)
13
Inheritance cont.
<html><head><title> Test File </title></head><body><h1> Test </h1><p> This is a <b> Test </b></p></body></html>
![Page 14: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/14.jpg)
14
Inheritance cont.
In the example <b> element is enclosed within the <p> element, which is in the <body>, which is in the <html> element.
What happens if you set a style rule to the <p> element like so?p {color : red;}
Would the <b> tag’s contents also be red? The answer is yes because the color is
inherited from the parent element.
![Page 15: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/15.jpg)
15
Inheritance cont.
The general idea of the cascade, in effect, is that it provides a system to sort out which rules apply to a document that has many styles.
A rule for a specific <p> element using an id attribute is more powerful than a class rule applied to <p>.
A class rule applied to <p> in turn is more powerful than a rule for element <p> itself.
![Page 16: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/16.jpg)
16
Inheritance cont.
In the instance that a particular rule should never be overridden by another rule ‘!important’ indication should be used.
p { color : red !important; font-size : 12pt;}
![Page 17: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/17.jpg)
17
Font Properties font-family font-size
xx-small x-small small medium large x-large xx-large %age physical sizes
![Page 18: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/18.jpg)
18
Font Properties cont. font-style
Normal Italic Oblique
font-weight: sets the darkness of font. . Its value ranges from 100-900 in increments of
100. Keywords are also supported like; normal normal=400 bold bold=700 light
![Page 19: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/19.jpg)
19
Font Properties cont.
font
“provides a concise way to specify all the font properties with one style rule.“ Each font attribute can be indicated in the line
separated by space except for line-height which is used with font-size and separated by a slash.
line-height specify the distance between two lines of text.
p {font: italic 18pt/24pt;}
![Page 20: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/20.jpg)
20
Font Properties cont.
All these must be in the same sequence as given below. We can also skip any one of them.
ElementName {font : font-style font-varient font-weight
fontsize/line-height
font-family; } We can also use list of families for font-family.
p { font : italic “arial,helvitica” ;}
![Page 21: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/21.jpg)
21
Text Properties
text-transform capitalize
Capitalize words e.g. addAdd uppercase
e.g. addADD lowercase
e.g. Add add none
is default value
![Page 22: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/22.jpg)
22
Text Properties cont.
text-decorationline-through
e.g. Example
overline e.g. Example
underlinee.g. Example
none
![Page 23: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/23.jpg)
23
Text Properties cont.
word-spacing letter-spacing vertical-align
controls the positioning of text and images with respect to the baseline currently in effect. Baseline it is default value Super Text-top
![Page 24: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/24.jpg)
24
Text Properties cont.
Bottom Sub Top Middle Text-bottom %age values
![Page 25: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/25.jpg)
25
Text Properties cont.
text-align justify center right
text-indent line-height
![Page 26: 1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple](https://reader036.vdocument.in/reader036/viewer/2022070412/5697bf821a28abf838c86031/html5/thumbnails/26.jpg)
26
Text Properties cont.
white-space normal
collapses extra spaces.
pre same effect as <pre> tag
nowrap will not wrap the text if exceed context width.