1 / 22

Workshop: CSS-Part I

Workshop: CSS-Part I. Cascading Style Sheets add style to your HTML web pages. Define Cascading Style Sheets. Cascading refers to the hierarchy of rules that set the style Think about it this way: the closer the rule is to the actual thing it’s styling, the more power it has.

ceri
Download Presentation

Workshop: CSS-Part I

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. Workshop: CSS-Part I Cascading Style Sheets add style to your HTML web pages

  2. Define Cascading Style Sheets Cascading refers to the hierarchy of rules that set the style Think about it this way: the closer the rule is to the actual thing it’s styling, the more power it has.

  3. Define Cascading Style Sheets Style Sheet = list that you create that specifies how you want your web page to look: color, fontand out lay

  4. CSS is a Good Thing Cascading Style Sheets takes the confusion out of web page design by separating content code (HTML) from presentation code (CSS)

  5. CSS is a Good Thing Cascading Style Sheets eliminates display & download problems typically encountered on different browser screens

  6. CSS is the Best Thing Cascading Style Sheets bring web pages up to universal standards: ADA compliance Usability & Access

  7. What to style? • <body> body of the page • <a> links • <p> paragraphs • <h1> headings • <img> images

  8. The hierarchy of rules • Inlined Style Sheet • Embedded (Internal) Style Sheet c) External Style Sheet

  9. <html> <head><title>My Wonderful Example</title> </head> <body> <p>What was I thinking?</p> </body> </html> a) Inlined example-1 Original html code

  10. <body> <pstyle=“text-align: center; font- weight: bold; color: yellow;”>What was I thinking?</p> </body> What was I thinking? a) Inlined example-2

  11. b) Embedded/Internal-1 <head><title>My Wonderful Example</title> <style type=“text/css”> body {text-align: left; font-family: trebuchet, verdana;} </style> </head>

  12. b) Embedded/Internal-2 <head><title>My Wonderful Example</title> <style type=“text/css”> body { text-align: left; font-family: Trebuchet, verdana; } </style> </head>

  13. <html> <head><title>My Way</title> <link rel="stylesheet" href="http://www2.hawaii.edu/~myway. css" type="text/css“> </head> <body> </body> </html> c) External Link to a separate css page

  14. <style type=“text/css”> Internal: Statement of style this is a style sheet (style type) written (text) in css (CSS) language

  15. Internal:Define a Selector Elements that can be styled a, h1, img, body, etc. we call this elements selectors In our example, we chose to apply a style to the selectorbody

  16. <style type=“text/css”> body { text-align: left; font-family: trebuchet, verdana; } </style> Internal:Brackets & Declaration I want the “align text” property to be given the value of “left”

  17. How to write style rules (4) Selector {property: value;} h1 {color: green; font-size: 1.2em;} My Web Page a {color: red; background-color: yellow;} More on the last page of your handout! http://www.myway.com

  18. There are sixteen pre-defined colors in HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow Which means you can just type the word “blue” into your code, and the browser will give you the default color for blue Colors

  19. If you want more variety or nuance, there are also 216 “web safe colors” that all browsers should be able to read accurately. These are the “HEX” color code system, i.e. #000000 = black (total absence of color) #FFFFFF = white (presence of all colors) #FF0000 = red (the red section at full level) #FF8800 = a shade of orange (red plus green) Colors

  20. Body { color: black; background: white; } = text color is black, background color is white Colors

  21. For HTML nowadays, font size is not measured in “points” but in “ems.” “ems” make font size relative : 1em = a capital M at 100% 0.8em = font 80% of the default M 1.2em = 120% the size of a default M Controlling Fonts

  22. with Alice Tran On to the exercises

More Related