1 / 20

CSS – Cascading Style Sheets

CSS – Cascading Style Sheets. Making your XHTML webpage look good. CSS vs HTML: The difference?. Browsers read your hypertext file (.html file) to figure out WHAT goes on your page . HTML defines your content and where to find it (such as graphics).

mariel
Download Presentation

CSS – Cascading Style Sheets

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. CSS – Cascading Style Sheets Making your XHTML webpage look good.

  2. CSS vs HTML: The difference? • Browsers read your hypertext file (.html file) to figure out WHAT goes on your page. HTML defines your content and where to find it (such as graphics). • They use the CSS to figure out HOW you want that content displayed/formatted.

  3. Painter/Contractor analogy Much like a decorator and a builder work towards finishing your house… • HTML builds your page • CSS decorates your page So if you make the style p{color:blue} you must have <p> tags in your document for it to work. “You have to build it before you can paint it.”

  4. CSS • CSS Rules • Selector and declaration • Declaration = at least one CSS property and related property value. Ex: h1 {color:red;} • Syntax is very different from HTML

  5. CSS style must refer to an HTML tag <html <head> <style type=“text/css”> body{background-color: #000000} p {font-weight: bold} h1{color: blue} #custom{font-family: arial} </style> </head> <body> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <p>Phasellus lacinia rutrum erat. Integer lobortis, dui eu lobortis laoreet, nunc ligula convallis urna, vel viverra nisl elit ut risus.</p> <h1>Integer id enim. Praesent eleifend. </h1> <div id=“custom”>Maecenas accumsan pulvinar risus. Aliquam a turpis. Integer velit turpis, venenatis ac, laoreet sit amet, venenatis nec, dolor..</div> </body> </html>

  6. Associating your CSS • For CSS to work in your document it must be linked or embedded into your code. • Since we’re just starting out we’ll use embedded (also called internal) styles • (We’ll talk more about this, later) • In your <head> you need to have the following tags: <style type=“text/css”> </style> • All your styles will go between these tags for right now.

  7. color Changes the color of the text in an element p { color: #435678; } color values can be listed many ways: for example p{color:blue;} or p{color: rgb(0,0,255);} orp {color:#0000FF;}

  8. background-color • highlights background of textor entire element body { background-color: #435678; }

  9. font-weight Used to change the thickness of a font used on text. • Value could be numerical: • 100-900 scale • Value could be a word: • Bold (equals 700) • Bolder (+100 from the container’s font-weight) • Lighter (-100 form the container’s font-weight) • Normal • inherit • Example: • p { • font-weight: 800; • }

  10. Font Size • Font size may be defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a percentage. • Absolute: • can be: xx-small, x-small, small, medium, large, x-large, xx-large. • mm, in, cm, pc, pt • Relative • larger, smaller. • em, ex, px,

  11. font-size • Value could be numerical: • 12pt, 12em, 12pc, 12px… • Value could be a word: • small • xx-large • Example: • p { • font-size: 12pt; • }

  12. CSS shorthand • You can list all the font properties in one list. • Must be in a specific order • Selector { font: style variant weight size family; } • Any values that aren’t listed are set to their default values.

  13. letter-spacing (aka kerning) • Selector { letter-spacing: 12pts; } • Example values for letter-spacing: • Normal – no extra spacing • 20px, 30em…- increases spaces between letters • -20px, -30em… - reduces spaces between letters • Inherit – inherits from parent (containg element)

  14. word-spacing • Selector { word-spacing: 12pts; } • Example values for letter-spacing: • Normal – no extra spacing between words • 20px, 30em…- increases spaces between words • -20px, -30em… - reduces spaces between words • Inherit – inherits from parent (containg element)

  15. Generic Font families • Serif (flourish fonts: ex. Times New Roman) • Sans-serif (simple character fonts: ex. arial) • Monospace (ex. courier) • Fantasy (zany fonts) • Cursive (cursive aka “script” fonts)

  16. Serif vs sans-serif • Sans-serif simpler, but easier to read • Serif can help distinguish between numbers and letters using “feet” and other flourishes.

  17. Monospace font • Characters that are all the same size • “Typewriter” fonts • Ex. Courier, andale mono, vt102, mishiwaka

  18. Color Units • Many different types of values can be used as long as the format or units are with the value. • body {background-color: blue} • Color names are unreliable at the moment beyond the basic 8 color names. • body {background-color: #0000FF} • #<hex><hex><hex> • body {color: rgb (0, 0, 255)} • rgb(<number>, <number>, <number>) • body {color: rgb (0%, 0%, 100%)} • rgb(<percentage>,<percentage>,<percentage>)

  19. Length Units • {margin-right: 24px } • The number can be an integer or a decimal fraction, and can be preceded by + or -. • Units can be absolute or relative: • Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas) • Relative: em, ex, px (the element's font height, the element's x-height, pixels)

  20. Comments in CSS • /* comment goes here */ • This will not be part of the web page, or the CSS styles. It is merely a way for you to make notes on the style sheet. • You should use comments like this to organize your content. You should design your site so that another web designer can understand what is what 10 years from now. • USE IT!

More Related