css – cascading style sheets
DESCRIPTION
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). - PowerPoint PPT PresentationTRANSCRIPT
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 pageSo 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.”
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
<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>
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.
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 textor entire element
body {background-color: #435678;}
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; }
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}
#<hex><hex><hex> body {color: rgb (0, 0, 255)}
rgb(<number>, <number>, <number>) body {color: rgb (0%, 0%, 100%)}
rgb(<percentage>,<percentage>,<percentage>)
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!