Cascading Style Sheets
              --CAS 483--
What is a Style Sheet?
 “A set of statements that specify the
 presentation of a document”
 In other words, a style sheet ...
Why use CSS?
 Enable you to change the appearance and
 layout of your entire site by editing only one
 file
 Improve site ...
CSS Syntax
 Generic CSS syntax:
  selector {property: value;}
  For example, we can change background color:
    body { ba...
CSS Syntax
 Class selector
   Can define different style types for the same
   HTML element
     p.center { text-align: ce...
DIV and SPAN Tags
 Div tag adds block-level structure/formatting
 <div class=“style_name”>…</div>
 <div style=“property:va...
Applying a Style Sheet
 External Style Sheet
   Can be applied to a number of HTML pages
   To link a style sheet to an HT...
What can CSS be used for?
 Page layout
   Positioning, etc.
 Font and text properties
   Indent the first line of a paragr...
Examples
  Modify the appearance           Create new styles:
  of an HTML element:           .mainbox {
                 ...
A Few Hints
 Text styles for the body are not inherited by
 text in a table
 To center a table:
 .center table {
    margi...
Creating Links with CSS
 CSS can be used to create link effects
 .txtlink {
      color: #990000;
    background-color: #f...
Where to go from here
 Try out CSS:
   Create a simple HTML page
    Include the link tag in order to apply the style shee...
Resources
 CSS2 Specification
  http://www.w3.org/TR/REC-CSS2/
 Guide to CSS
  http://www.htmlhelp.com/reference/css/
 CSS...
Upcoming SlideShare
Loading in...5
×

cascadingstylesheets

1,877

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,877
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

cascadingstylesheets

  1. 1. Cascading Style Sheets --CAS 483--
  2. 2. What is a Style Sheet? “A set of statements that specify the presentation of a document” In other words, a style sheet defines how to display an HTML document External style sheets can be applied to a number of HTML documents CSS gives a “look” to your site Style sheets in action
  3. 3. Why use CSS? Enable you to change the appearance and layout of your entire site by editing only one file Improve site accessibility
  4. 4. CSS Syntax Generic CSS syntax: selector {property: value;} For example, we can change background color: body { background-color: black; } CSS Comments Comments are surrounded by /* and */ /* This is a CSS comment */
  5. 5. CSS Syntax Class selector Can define different style types for the same HTML element p.center { text-align: center; } p.right { text-align: right; } <p class=“center”>…</p> Or, we can define a style for all HTML elements .center { text-align: center; } <h1 class=“center”>…</p>
  6. 6. DIV and SPAN Tags Div tag adds block-level structure/formatting <div class=“style_name”>…</div> <div style=“property:value”>…</div> <div align=“center|right|left”>…</div> Span tag adds inline-level structure/formatting <span class=“style_name”>…</div> <span style=“property:value”>…</div>
  7. 7. Applying a Style Sheet External Style Sheet Can be applied to a number of HTML pages To link a style sheet to an HTML document: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Internal Style Sheet Applied to only one HTML document <head><style>…</style></head>
  8. 8. What can CSS be used for? Page layout Positioning, etc. Font and text properties Indent the first line of a paragraph Color and background properties Box properties Margins, borders, dimensions
  9. 9. Examples Modify the appearance Create new styles: of an HTML element: .mainbox { font-size: 85%; body { width: 530px; font-family: "Tahoma", "Arial", sans-serif; border: 1px solid #c0c0c0; font-size: 100%; vertical-align: top; color: #000000; padding: 2px; background-color: #ffffff; } } .txtlink { h1 { color: #990000; font-size: 110%; background-color: margin-bottom: 6px; #ffffff; } }
  10. 10. A Few Hints Text styles for the body are not inherited by text in a table To center a table: .center table { margin-left: auto; margin-right: auto; text-align: left; } To add a border around an image: img.textpic-l { border: 1px solid black; margin: 4px; float: left; } http://www.cae.wisc.edu/~kahnj/tcc/
  11. 11. Creating Links with CSS CSS can be used to create link effects .txtlink { color: #990000; background-color: #ffffff; } a.txtlink:link { text-decoration: underline; } a.txtlink:visited { text-decoration: underline; } a.txtlink:hover { color: #ffcc00; background-color: #ffffff; text-decoration: none; }
  12. 12. Where to go from here Try out CSS: Create a simple HTML page Include the link tag in order to apply the style sheet Include a number of HTML elements (headers, etc) Create a style sheet (<file_name>.css) Use the style sheet to modify the appearance of several HTML elements Create your own styles Modify the style sheet and reload your page Add a style sheet to your project
  13. 13. Resources CSS2 Specification http://www.w3.org/TR/REC-CSS2/ Guide to CSS http://www.htmlhelp.com/reference/css/ CSS Tutorial http://www.w3schools.com/css/ CSS Layout Techniques http://glish.com/css/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×