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 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. Welcome to---- LINK Go To Heading1 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:

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. Class Example paragraph contents…

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 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:

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 element within 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. Test File Test This is a Test

14 Inheritance cont. In the example element is enclosed within the element, which is in the, which is in the element. What happens if you set a style rule to the element like so? p {color : red;} Would the 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 element using an id attribute is more powerful than a class rule applied to. A class rule applied to in turn is more powerful than a rule for element 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 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. add  Add  uppercase e.g. add  ADD  lowercase e.g. Add  add  none is default value

22 Text Properties cont. text-decoration  line-through e.g. Example  overline e.g. Example  underline e.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 tag  nowrap will not wrap the text if exceed context width.