Post on 17-Jan-2016
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 tags, it is possible to group them.
Separate them with commas (,). h1, h2, h3 { background : yellow;
color : black ;}
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.
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.
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>
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.
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>
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;}
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
10
Pseudo Elements cont.
Example:
< style type = ”text/css”> <!- - p:first-line {background-color = ”Yellow”; } p:first-letter {color:red; font-size:150;} - - > </style>
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.
12
Inheritance
HTML documents have an implicit structure.
title h1
b
head
html
body
p
13
Inheritance cont.
<html><head><title> Test File </title></head><body><h1> Test </h1><p> This is a <b> Test </b></p></body></html>
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.
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.
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;}
17
Font Properties font-family font-size
xx-small x-small small medium large x-large xx-large %age physical sizes
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
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;}
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” ;}
21
Text Properties
text-transform capitalize
Capitalize words e.g. addAdd uppercase
e.g. addADD lowercase
e.g. Add add none
is default value
22
Text Properties cont.
text-decorationline-through
e.g. Example
overline e.g. Example
underlinee.g. Example
none
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
24
Text Properties cont.
Bottom Sub Top Middle Text-bottom %age values
25
Text Properties cont.
text-align justify center right
text-indent line-height
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.