AK css

Cascading Style Sheets (CSS) Atul Kahate [email_address]

CSS Basics CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one

Need for CSS – 1 HTML tags were originally designed to define the contents of a document They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on The layout of the document was supposed to be taken care of by the browser, without using any formatting tags

Need for CSS – 2 The two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification It became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout

Need for CSS – 3 To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created styles in addition to HTML 4.0

What Can Styles Do? Define how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2 Normally saved in files external to your HTML documents External style sheets enable you to change the appearance and layout of all your pages, just by editing a single CSS document

Benefit to Developers Allows developers to control the style and layout of multiple Web pages all at once As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want To make a global change, simply change the style, and all elements in the Web site are updated automatically

Precedence in Style Sheets What style will be used when there is more than one style specified for an HTML element? The order is: Inline Style (inside HTML element) Internal Style Sheet (inside the <head> tag) External Style Sheet Browser default

CSS Syntax Consists of three parts selector {property: value} Selector: The HTML element/tag you wish to define Property: The attribute you wish to change Value: Associated with a property The property and value are separated by a colon and surrounded by curly braces Examples body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red}

<STYLE> P {color:green} P.red {color:red} </STYLE> Style block Selector Declaration Class

Better syntax for multiple properties p { text-align: center; color: black; font-family: arial }

Grouping Selectors h1,h2,h3,h4,h5,h6 { color: green }

Class Selector With the class selector you can define different styles for the same type of HTML element Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph Example code follows

Class Selector Example CSS code p.right {text-align: right} p.center {text-align: center} HTML code <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>

Comments in CSS /* This is a comment */

More on Font Families – 1 A font family contains a set of fonts that share common characteristics There are five font families Sans-serif Serif Serif Monospace Cursive Fantasy

More on Font Families – 2 Sans-serif – Considered to be readable Verdana , Arial Black , Trebuchet MS , Arial Serif – Similar to newspaper fonts Times New Roman , Georgia Monospace – Have constant width characters Courier New , Agency FB Cursive – Look like handwritten text Comic Sans , Harrington Fantasy – Decorative styles Impact

Style Sheet Example – 1 <html> <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Style Sheet Example – 2 <html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> </body> </html>

Style Sheet Example – 3 <html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <p> <a href="http://www.w3schools.com/default.asp"> This is a link</a> </p> </body> </html>

Style Sheet Example – 4 <html> <head> <style type="text/css"> p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <p class="uppercase"> This is some text in a paragraph </p> <p class="lowercase"> This is some text in a paragraph </p> <p class="capitalize"> This is some text in a paragraph </p> </body> </html>

Style Sheet Example – 5 <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Style Sheet Example – 6 <html> <head> <style type="text/css"> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} </style> </head> <body> <h3>This is header 3</h3> <p> This is a paragraph</p> <p class="sansserif"> This is a paragraph</p> </body> </html>

Style Sheet Example – 7 <html> <head> <style type="text/css"> h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Style Sheet Example – 8 <html> <head> <style type="text/css"> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} </style> </head> <body> <p class="normal"> This is a paragraph</p> <p class="thick"> This is a paragraph</p> <p class="thicker"> This is a paragraph</p> </body> </html>

Style Sheet Example – 9 <html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> …

Style Sheet Example – 10 <html> <head> <style type="text/css"> h1, h2 { font-family: sans-serif; color: gray; border-bottom: 1px solid black } p { color: maroon; } </style> </head> <body> <h1> Welcome to my Page! </h1> <H2> How are you doing? </h2> <p>This is a paragraph</p> </body> </html>

Style Sheet Example – 11 info.css h1, h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } main.html <html> <head> <title> External CSS Example </title> <link type="text/css" rel="stylesheet" href="info.css"> </head> <body> <h1> Welcome to my Page! </h1> <h2> How are you doing? </h2> <p>This is a paragraph</p> </body> </html>

Style Sheet Example – 12 info.css .test { line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; color: #444444; border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; } main.html <html> <head> <title> External CSS Example </title> <link type="text/css" rel="stylesheet" href="info.css"> </head> <body> <h1> Welcome to my Page! </h1> <h2> How are you doing? </h2> <p class="test"> This is a paragraph. See how this is decorated with the help of styles. We have all sorts of paragraph and background formattng features available, which allow us to format text the way we want to a very precise level. </p> </body> </html>

Lists <html> <head> <style type="text/css"> ul.disc { list-style-type: disc } ul.circle { list-style-type: circle } ul.square { list-style-type: square } …

Thank you! Questions and Comments Welcome!

AK css

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to AK css (20)

More from gauravashq (9)

Recently uploaded (20)

AK css