1 / 8

Creating Web Pages

Creating Web Pages. Part 3. CASCADING STYLE SHEETS (CSS): What exactly are they?. Set of rules that define how a web browser should display an HTML page. Types of Style Sheets Inline Embedded External. What is meant by “cascading”?. div {color:#FF0000;} div.style1 {color:#FF0000;}

edmund
Download Presentation

Creating Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Web Pages Part 3

  2. CASCADING STYLE SHEETS (CSS):What exactly are they? • Set of rules that define how a web browser should display an HTML page. • Types of Style Sheets • Inline • Embedded • External • What is meant by “cascading”?

  3. div {color:#FF0000;} div.style1 {color:#FF0000;} div.style2 {color:#FF0000;} <html> <head> <title>Cascading Style Sheets</title> CASCADING STYLE SHEETS (CSS):What do they look like? cssexample.html external.css <!-- Link to EXTERNAL style sheet --> <link href="external.css" type="text/css" rel="stylesheet"> <!-- EMBEDDED style sheet --> <style> div.style2 { color:#009900;} </style> browser </head> <body> <div>div style in external sheet</div> <div class="style1">div.style1 in external sheet</div> <div class="style2">div.style2 in embedded style sheet</div> <!-- INLINE style sheet --> <div style="color:#0000FF">inline style sheet</h3> </body> </html> <html> <head> <title>Cascading Style Sheets</title> <!-- Link to EXTERNAL style sheet --> <link href="external.css" type="text/css" rel="stylesheet"> <!-- EMBEDDED style sheet --> <style> div.style2 { color:#009900;} </style> </head> <body> <div>div style in external sheet</div> <div class="style1">div.style1 in external sheet</div> <div class="style2">div.style2 in embedded style sheet</div> <!-- INLINE style sheet --> <div style="color:#0000FF">inline style sheet</h3> </body> </html>

  4. CASCADING STYLE SHEETS (CSS):How does CSS syntax work? GENERAL RULES: The syntax is composed of three parts: a selector, a property and a value: selector {property:value} where: selector = the HTML element/tag you wish to define property = the attribute you wish to change value = the setting to be assigned to the property body {color:black} The property and value are separated bya colon and are surrounded by curly brackets: p {font-family:"sans serif"} If  the value contains multiple words,it should be enclosed in quotes: If there’s more than one property, separate each pair of properties with a semi-colon. p {text-align:center;color:red} p { text-align:center; color:black; font-family:arial; } To make style definitions easy to read, put one property on each line: GROUPS:

  5. CASCADING STYLE SHEETS (CSS):How does CSS syntax work? GROUPS: You can group selectors. Use a comma to separate each pair of selectors: h1,h2,h3,h4,h5,h6 {color: green} CLASS SELECTORS: You can use the class selector to define different styles for the same type of HTML element: p.right {text-align:right} p.center {text-align:center} To make use of these defined class selectors, you then use the class attribute in your HTML document: <p class="right"> This paragraph will be right-aligned.</p> <p class="center"> This paragraph will be center-aligned.</p> .center {text-align:center} To define a style that will be used by all HTML elements that have a certain class, omit the tag name in the selector To use the defined style in the body of the document, specify the class attribute. <h1 class="center"> This heading will be center-aligned</h1> <p class="center"> This paragraph will also be center-aligned.</p> Source:www.w3schools.com

  6. CASCADING STYLE SHEETS (CSS):What kind of formatting can style sheets do? 1. Font and background colors 2. Background images

  7. CASCADING STYLE SHEETS (CSS):What kind of formatting can style sheets do? 3. Text properties 4. Font properties

  8. CASCADING STYLE SHEETS (CSS):What kind of formatting can style sheets do? 5. Box properties

More Related