SlideShare a Scribd company logo

Cascading Style Sheets

•Download as PPS, PDF•
•
P
Paul Dionysius

CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS styles are defined using selectors and properties, and can be applied internally within HTML or externally via linked stylesheet files. CSS properties specify values that control things like text color and alignment, background colors, font types and more.

1 of 10
Downloaded 40 times
C ascading S tyle S heets Definition Syntax Comments Internal CSS External CSS Exit
What is CSS? CSS stands for C ascading S tyle S heets 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
Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector { property : value } body { background - color : red } For multiple word values you need to put quotes around the value. p {font-face: “ Comic Sans ”}
Syntax You can change more than one property by separating each property with a semi-colon. p {text-align:center ; color:red} To make the style definitions more readable, you can describe one property on each line, like this: p { text-align: center; font-family: arial }
Grouping Syntax You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 { color: green }
Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
Internal CSS A <style type=&quot;text/css&quot;> should go in the Head tag. You will need to close this tag with a </style> All syntax can then go inside this style tag. In Dreamweaver, to preview your results after entering syntax, press F5 For syntax help visit www.w3schools.com
Internal CSS Example
External Style Sheets An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mystyle.css&quot; /> </head>
Example

More Related Content

Cascading Style Sheets

  • 1. C ascading S tyle S heets Definition Syntax Comments Internal CSS External CSS Exit
  • 2. What is CSS? CSS stands for C ascading S tyle S heets 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
  • 3. Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector { property : value } body { background - color : red } For multiple word values you need to put quotes around the value. p {font-face: “ Comic Sans ”}
  • 4. Syntax You can change more than one property by separating each property with a semi-colon. p {text-align:center ; color:red} To make the style definitions more readable, you can describe one property on each line, like this: p { text-align: center; font-family: arial }
  • 5. Grouping Syntax You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 { color: green }
  • 6. Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with &quot;/*&quot;, and ends with &quot;*/&quot;, like this: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
  • 7. Internal CSS A <style type=&quot;text/css&quot;> should go in the Head tag. You will need to close this tag with a </style> All syntax can then go inside this style tag. In Dreamweaver, to preview your results after entering syntax, press F5 For syntax help visit www.w3schools.com
  • 9. External Style Sheets An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mystyle.css&quot; /> </head>