css handout
DESCRIPTION
itTRANSCRIPT
![Page 1: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/1.jpg)
CASCADING STYLE SHEET
![Page 2: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/2.jpg)
Brief History of Web content
• Web started to exchange information.• Text without structure rapidly became unmangeable.• HTML – Gave Structure to the text.• Up until 1996, the standard method for creating and distributing information via a website.
![Page 3: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/3.jpg)
HTML Formatting
• Plain text is dull !• HTML allows formatting of text.
Red Text <p> <font color = “red” > Red Text </font> </p>
Blue Centered Text <p align=“center”> <font color=“blue”> Blue Centered Text </font> </p>
![Page 4: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/4.jpg)
Problem with HTML
• Clumsy Code
• Changes become difficult
• Problem with <basefont> tag.
• Presentation tags are deprecated in HTML.
![Page 5: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/5.jpg)
Solution
Separating Styles from Web Content
![Page 6: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/6.jpg)
Placement of Styles
• Inline Styles – One time Style – High Priority
• Internal Styles / Embedded Styles
• External Styles – First Choice – Least Priority
![Page 7: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/7.jpg)
Inline Styles
Individual elements can have the styles applied within the HTML tag itself.Red Text<p style = “color: Red”> Red Text </p>
Blue Centered Text <p style = “color: Blue;text-align:center”> Blue
Centered Text </p>
SAME DISADVANTAGES – BETTER INT/EXT
![Page 8: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/8.jpg)
Internal / External Style - Syntax
Selector { property1: value1; property2: value2; . . . }
![Page 9: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/9.jpg)
Internal Styles <html> <head> <style> p Html Selector { text-align : center; color : Blue; } </style> </head> <body> <p> Blue Centered Text </p> </body> </html>
![Page 10: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/10.jpg)
Internal Styles
<body> <h1> <font face = “sans-serif” color = “#3366CC> First Title </font> </h1> <p> …. </p> <h2> <font face = “sans-serif” color = “#3366CC> Second Title </font> </h2> <p> …. </p> <h2> <font face = “sans-serif” color = “#3366CC> Third Title </font> </h2> <p> …. </p> </body>
![Page 11: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/11.jpg)
Internal Styles
<head> <style> h1,h2 { font-family: sans-serif; color: #3366CC; } </style> </head>
![Page 12: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/12.jpg)
External Style
• Disadvantages of Internal Styles – Placing the set of codes in all webpages. • Saved as .css
<link rel = “stylesheet” type = “text/css” href = “ styles.css” />
![Page 13: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/13.jpg)
Class Selector
• Disadvantage of HTML Selector• Advantage of Class Selector• Syntax: .classname { property : value; . . . }
<p class = classname> .. </p>
![Page 14: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/14.jpg)
Examples
• Changing the Cursor • Changing the Scrollbar color• Pseudocode• Pseudoline• Pseudoletter• Layers• window• Scripts
![Page 15: Css handout](https://reader036.vdocument.in/reader036/viewer/2022083012/5695d0a51a28ab9b02934c84/html5/thumbnails/15.jpg)
Thank you