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). They use the CSS to figure out HOW you want that content displayed/formatted.
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 tags in your document for it to work. “You have to build it before you can paint it.”
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
CSS style must refer to an HTML tag <html body {background-color: #000000} p {font-weight: bold} h1 {color: blue} #custom {font-family: arial} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lacinia rutrum erat. Integer lobortis, dui eu lobortis laoreet, nunc ligula convallis urna, vel viverra nisl elit ut risus. Integer id enim. Praesent eleifend. Maecenas accumsan pulvinar risus. Aliquam a turpis. Integer velit turpis, venenatis ac, laoreet sit amet, venenatis nec, dolor..
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 you need to have the following tags: All your styles will go between these tags for right now.
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;}
background-color highlights background of text or entire element body { background-color: #435678; }
font-weight Used to change the thickness of a font used on text. Value could be numerical: 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; }
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,
font-size Value could be numerical: 12pt, 12em, 12pc, 12px… Value could be a word: small xx-large Example: p { font-size: 12pt; }
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.
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)
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)
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)
Serif vs sans-serif Sans-serif simpler, but easier to read Serif can help distinguish between numbers and letters using “feet” and other flourishes.
Monospace font Characters that are all the same size “Typewriter” fonts Ex. Courier, andale mono, vt102, mishiwaka
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} # body {color: rgb (0, 0, 255)} rgb(,, ) body {color: rgb (0%, 0%, 100%)} rgb(,, )
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)
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!