What is CSS? CSS stands for Cascading Style Sheet. They are called “cascading” because CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. Rules are inherited, but inheritance is different from the actual cascading.
Parts that make up CSS:
selector { property:value;}
selector : Describes what you want to control
property: What is being affected
value: how it is affected.
Inline Styles
We uses these last week. They are handy for exceptions in the body of your text, but you don’t get the full benefit of creating styles, and it tends to muck up your code. These are the types that we did last week.
<p style=”background:yellow>Use me,
<span style=”font-weight:bold”>DON’T ABUSE ME!</span>
</p>
Embedded Styles
These go into the head of your document enclosed in style tags. They look like this:
<style type=”text/css”>
p {font:Arial, Helvetica, sans-serif;
color:#00FF00;}
</style>
External Stylesheet
<link href=”styles.css” rel=”stylesheet” type=”text/css”>
The CSS in your css page looks just like what would go in the inside of your style tags in the embedded style.
Properties
- background
- color
- bgcolor
- font-size
- px (pixel)-smallest unit of measure on a screen
- pt (point) – smallest unit of measure for a font. 1/12 of a pica
- pica – 1/6 of an inch
- em –defines the proportion of the letter width and height with respect to the point size of the original font. Nice way to change font sizes relative to the other fonts on the page
- % (percent)
- font-family
- font-weight
- line-height
- letter-spacing
- text-decoration
- font-variant
- text-transform
Colors for the web
- The W3C has listed 16 valid color names for HTML and css:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
- To access all of the other colors available, you must use the Hexadecimal number:
(#000000, #CC33FF, #39A74F, etc) - These are numbered by their RGB values
- eg. #00FF00 is rgb (0,255,0)
- The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).
- Refer to this online color chart for web-safe colors
The font-family property
- The font-family property specifies the font for an element.
- The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.
- There are two types of font family names:
- family-name
- generic-family
- Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
New Tags
Hyperlink: A hyperlink uses an anchor tag
- External: <a href=”http://www.google.com”>This goes to google. </a>
- Internal: <a href=”resume.html”>This goes to my resume page, which is in the same folder as the page that this link is on. </a>
Assignment:
- Using what you know about CSS, format the resume that you set up last week.
- Post 3 links of interest and 3 reference links in the “links” section of your blog.
- Read Chapters 1-3 from Don’t Make Me Think. You should have book by now. Leave a comment about the reading on your blog.
- Post a link to your blog from your resume page.
RSS feed for comments on this post. / TrackBack URI