CSS NOTES/ REVIEWER

W3C and Recommendations

W3C (World Wide Web Consortium) - international community where member

organizations, a full-time staff, and the public work together to develop Web standards.

CSS (Cascading Style Sheet) is a stylesheet language that describes the presentation of a
webpage which is a recommendation from the World Wide Web Consortium (W3C).
In essence it controls the design, layout and other aspect of a webpage.

Recommendation Published as a W3C

Recommendation
CSS 1 December 17, 1996
CSS 2 May 12, 1998
CSS 2.1 June 7, 2011
CSS 3 *Note

Note: In CSS 3 - documents are divided separately and are called "modules". Each module in
turn adds new capabilities or extends features defined in previous versions. Due to the
modularization, the different modules in CSS3 have different stability and statuses. So there was
a shift from Recommendation to Individual Specification (Modules)

5 Steps of Advancing a Specification to a Recommendation

1. Publication of the First Public Working Draft
2. Last Call Announcement
3. Call for Implementations
4. Call for Review of a Proposed Recommendation
5. Publication as a Recommendation

CSS - Cascading Style Sheets

Style sheets are used to define the formatting and layout of information on a webpage
Advantages of using CSS for the styling of your HTML page
 It is easier to maintain and update
 It results in the consistency of design in all of the webpages
 It offers more formatting options
 It is a lightweight code and thereby it is faster to download and consumes less
bandwidth
3 Types of Style Sheets
 External Style Sheet (Remember this type of style sheet is the most powerful because
it could affect and control multiple pages in terms of formatting and layout. This is
also the type of style sheet that you should use to appreciate the power of CSS)
Syntax used to attach an external style sheet
<link rel="stylesheet" type="text/css" href="filename.css" />

 Internal Style
Syntax used to use an internal style
<style type="text/css">
selector {property: value;}
</style>

 Inline Style (Remember inline style has the highest priority because it could override
other styles but it has limited scope because it could only be applied into a particular
element on a single page. Avoid using this type of style because it is hard to control
and update especially when it is scattered all over your website)
Syntax used to use an internal style
<tag style="property: value">

CSS Parts and Syntax

CSS rule has two parts namely: the selector and the declaration block
The declaration block in turn is composed of a property name and a particular value

Thus the basic CSS syntax is: selector {declaration block}

or further broken down into: selector {propertyname:value;}

Commonly Used Property Names for Fonts

Font-Family
There are 5 font families namely: Serif, Sans-serif, Cursive, Fantasy and Monospace.
The commonly used font family is the serif and sans-serif.

Examples of Serif fonts - Cambria, Centaur, Garamond, Georgia, Perpetua, Times

New Roman
(Remember serif fonts are ideal to be used if the target output is paper because it is
easier to read on print)

Examples of Sans-serif fonts - Arial, Calibri, Comic Sans MS, Tahoma, Verdana
(Remember sans-serif fonts are ideal to be used if the target output is screen meaning
computer monitors or LCD projectors)
Remember when writing your CSS always start with the font that you want or you prefer
the most, and always end with a generic family.

It is also important to take note that when writing the name of the font in CSS - if it is more
than one word like Times New Roman, it is important that it is enclosed with a double
quotes for it to work.
Ex. “Times New Roman”

Color
The basic color used by computers are red, green and blue (RGB)
(When these three colors are mixed in combination it could produce 16,777,216 colors)
There are 3 ways to specify color in CSS
1. Color name
Years ago there were only 16 color names but now there are about 140 color names
that are available
Examples of color names are: blue, lightblue, skyblue, lightskyblue, steelblue,
royalblue

Example of a CSS rule using color name p{color:blue;}

2. Hexadecimal value
Hexa meaning 6 and decimal meaning 10 so hexadecimal consist of 16 values and
they are the following: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

The format of a hexadecimal color value is as follows #RRGGBB

Wherein RR represent the value of the red color, GG represent the value of the green
color, BB represent the value of the blue color.

Example of a CSS rule using hexadecimal values p{color:#FF0000;}

3. RGB value
This way of specifying color uses the numbers 0 to 255
Example of a CSS rule using rgb values p{color:rgb(255,0,0);}

Font-size
There are many unit of measurement used for font sizes but the most commonly used is px
which means pixel

Take note that one must be consistent in using a single unit of measurement, if one will use
px for an element all other elements should also use px.

In CSS one has to specify the numerical value of the size and then followed immediately by
the unit of measurement - example 20px. There should be no spaces between the numerical
value and the unit of measurement.
Other Properties for Fonts

Font-style - there are several font-style namely: normal, italic, oblique

Font-weight - 4 kinds namely: normal, bold, bolder, lighter

(One could also specify numerical values like 100, 200, 300, 400, 500, 600, 700, 800, 900)

Text-decoration - 3 kinds namely: overline, line-through and underline

(overline is the least used text-decoration, line-through is used to cross a text out, while the
underline text decoration should not be used in most cases because it will be mistaken by the
user as a hyperlink)

Text- transformation - 3 kinds namely: uppercase, lowercase, capitalize

Sample CSS Rules

body {background-image: url("confetti.gif");}

h1 {font-family: "Comic Sans MS", Tahoma, sans-serif; font-size: 40px; color:red;}
h2 {font-family: "Times New Roman", "Book Antiqua", serif; font-size: 24px; color:blue;}
p {font-family: Calibri, Verdana, Tahoma, sans-serif; font-size: 20px; color:green;}

Comments are additional information that are used to explain the codes. It is enclosed
between this symbols /* */
Example /* everthing between this symbols are considered as comments */

Commonly Used Keyboard Symbols in HTML and CSS

< left angle bracket { left curly bracket

> right angle bracket } right curly bracket
/ forward slash : colon
! bang ; semi-colon
# pound ( open parenthesis
" double quotes ) close parenthesis
= equals , coma
- dash . dot
* asterisk