[PDF] CSS Cours de base avec exemples | Cours informatique

CSS Tutorials : Lesson 1 – Introduction

In this tutorial you will learn about Cascading Style Sheets (CSS), Introduction to CSS, What you should already know? History, What is CSS? CSS saves a lot of work and time, CSS reduces the file size of HTML documents and CSS can be designed for different media

What you should already know?

The tutorial assumes that you have basic understanding of the following topics:



HTML/XHTML

History

In the old days we had only HTML, which was good, with HTML you can make good web designs, you can adjust the layouts using tables, and the layout problems can be fixed using the single-pixel gif image, but this is not good.

The layout problem and many others were fixed using CSS, with CSS design became a straight forward process, all web development/design tools now contain a CSS designer that makes using CSS a first choice for web designers.

What is CSS?



CSS stands for Cascading Style Sheets. .



CSS is a language that works with HTML to define how to present the contents. .



Styles are placed directly into HTML, HTML document head, and/or in a separate sheet. .



CSS contains rules to define how HTML elements will be styled. .



Many HTML files can use the same CSS file, and one HTML file can use many styles.

CSS saves a lot of work and time

Single CSS file can control the appearance of multiple HTML documents; to make a change to all

documents you don’t have to make the change in every document, just make it in the CSS file, and it will be reflected on all documents that are linked to it.

Even for one document, the CSS can define the appearance of an HTML element; all you have to do to change the appearance of that element all over the document is to change it in the CSS, this saves a lot of time and work.

CSS reduces the file size of HTML documents

By removing the presentation from the HTML documents and saving it in a smaller size CSS file, you get rid of presentation attributes and spacing images which reduces the size of the document and makes site navigation faster.

CSS can be designed for different media

A document can be styled in a way that is suitable for the presentation media, you can have many style sheets linked to one document, every sheet is for content presentation on a specific media, including browsers, printers, handheld devices, and projectors.

CSS Tutorials : Lesson 2 – Syntax

In this tutorial you will learn about Cascading Style Sheets (CSS) Syntax, Rule set, Combining selectors, The class selector, The id selector and Comments

Rule set

A rule or rule set tells the browser how to render an element, the rule set consists of the following: 1. The selector: represents the HTML element to be affected by the rule.

.

2.

The declaration block: represents the effect to be applied to the element(s), and it contains one or more property value pairs.

Example:

p {text-align: right; color: red}

The selector here is the HTML element < p >, all what follows is the declaration block, the declaration block has to start with an opening curly brace “{“, and ends with a closing curly brace “}”, every property/value pair has to be ended with a semi column”;”, the semi column can be only omitted for the last property/value pair, the property and the value are separated with a colon “:”, spaces and line feeds may be added for better readability, it doesn’t affect the CSS validity, the previous rule can be written as: p { text-align: right; color: red; }

Combining selectors

When many selectors have the same declarations, they may be grouped, this will reduce the CSS file size, and makes it easier to update the style.

Example:

h1, h2, h3 { text-align: center; color: red; }

Note that selectors are separated with a comma.

If one of the elements has an additional declaration it can be added later.

Example:

h1, h2, h3 { text-align: center; color: red; } h2 {

font-style: italic; }

So all the elements h1, h2, and h3 will have center-aligned text, and red color, and only h2 font style will be italic.

The class selector

You can define different style for the same HTML element using the class selector.

Example:

td.header { font-weight: bold; font-variant: small-caps; text-align: center; } td.normal { text-align: left; }

To use it in the HTML document: < table > < tr > < td class=”header” > ID < /td > < td class=”header” > Department < /td > < /tr > < tr > < td > 1 < /td > < td > Web Design < /td > < /tr > < /table >

The tag name can be omitted too, this will enable any HTML element to use the rule, the previous CSS rules can be written as:

.header { font-weight: bold; font-variant: small-caps; text-align: center; } .normal { text-align: left; }

It’s used the same way in the HTML document.

The id selector

You can define the same style for different HTML elements using the id selector.

Example:

#red {

}

You may use it in the HTML document this way:

< h1 id=”red” > This is a red header < /h1 > < p id=”red” > This is a red paragraph < /p > You can restrict the id to a specific element: p#red

{

color: red; }

This way only the < p > element with id of red < p id=”red” > will be styled using this rule.

Comments

CSS comments can be placed anywhere in the CSS, it will be ignored by the browser, the comment has to start with “/*” and ends with “*/”.

Example:

/* comment / p

{

/ another comment /

text-align: right; / another comment */ color: red

}

CSS Tutorials : Lesson 3 – Applying CSS

In this tutorial you will learn about Cascading Style Sheets (CSS), Applying CSS, External style sheets, Internal styles, Inline styles and Multiple style sheets

There are different types for specifying styles to be used with HTML documents, they can be specified in an external CSS file, inside the < head > element of the HTML document, or/and inline to be specific to a single HTML element, also there is the browser default style.

These styles will be cascaded in a single HTML documents at the following priority: 1. Browser default.

.

2. External CSS file.

.

3. Internal < head > style.

.

4. Inline style.

Inline style has the highest priority.

External style sheets

The external style sheet can be applied to many HTML documents, a .css file has to be created, and you link to it from the HTML document using < link > tag.

Example:

< head >

< link rel=”stylesheet” type=”text/css” href=”cssfile.css” / > < /head >

The CSS file may look something like: body { background-color: #00CCFF; } h1 { color: #0000FF; } p {

font-family: Arial, Helvetica, sans-serif; }

Internal styles:

The internal style will be applied only to the document that declares it.

Example:

< head > < style type=”text/css” > body { background-color: #00CCFF; } h1 { color: #0000FF; } p {

font-family: Arial, Helvetica, sans-serif; }

< /style > < /head >

Inline styles:

The inline style is only applied to the HTML element that declares it.

Example:

< p style=”color: red;” >This is a red paragraph.< /p >

Multiple style sheets

If multiple styles for the same element are used in the same document, the browser will use styles priority to select the style to be applied for this element presentation.

Example:

The external style sheet: p { font-size: 9px; font-style: normal; font-variant: small-caps; }

The internal style inside the element:

p {

font-size: 10px; font-style: italic; }

Any < p > element in the document will be styled as: p { font-size: 10px; font-style: italic; font-variant: small-caps; }

This is because the internal style has higher priority than the external style sheet. If a < p > element is defined in the same document as:

< p style=” font-size:12px;”>Inline Style< /p > Then it will be styled as:

p { font-size: 12px; font-style: italic; font-variant: small-caps; }

This is because the inline style overrides any other used styles.

CSS Tutorials : Lesson 4 – Background

In this tutorial you will learn about Cascading Style Sheets (CSS), Background, Background Color, Background image, Repeating background image, Background position and Background attachment.

Background color

To set the background color of an element, use the “background-color” property.

Example:

body {

background-color: #FF0000; }

This sets the background color of the document to red.

Background image

To set an image as a background, use the “background-image” property.

Example:

body {

background-image: url(bg_image.jpg); }

Repeating background image

To repeat a background image, use the “background-repeat” property.

The value of this property defines how the repeat will occur, the value can be one of the following:

• repeat : The image is repeated both horizontally and vertically. • repeat-x : The image is repeated only horizontally.

• repeat-y : The image is repeated only vertically. • no-repeat : The image is not repeated.

Example:

body { background-image: url(bg_image.jpg); background-repeat: repeat-y; }

This will repeat the image vertically.

Background position

To set the background position of a background image, use the “background-position” property. The value of this property can be on of the following:

top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

The horizontal position is specified first, and then the vertical position, If only one value is used, it sets the horizontal position only and the vertical position will be center by default.

Percentage and length values can be used also.

Example:

body {

background-position: 100% 0%; }

This will use “bg_image.jpg” as a background image, place its upper-right corner in the upper-right corner of the body, and repeat it vertically.

Background attachment

To set if a background image is to be fixed or to scroll with the page use the “background-attachment” property.

The value of this property can be one of the following:

• scroll : to scroll with the rest of the page. • fixed : to be fixed.

Example:

body { background-image: url(bg_image.jpg); background-attachment: scroll; }

This will make the background image scrolls with the rest of the page. Using the shortcut

You can set all background properties in one declaration using the shortcut property “background”, the values have to be in the following order:

background-color, then background-image, then background-repeat, then background-attachment, and finally background-position.

Example:

body {

background: #00FF00 url(bg_image.jpg) repeat-y fixed 100% 0; }

This sets the background color to green, uses the image “bg_image.jpg “ as a background, repeats it vertically, and places its top right corner at the top right corner of the page.

CSS Tutorials : Lesson 5 – Text

In this tutorial you will learn about Cascading Style Sheets (CSS), Text, Text color, Text background color, Text direction, Text align, Text indent, Text transform, Text decoration, Letter spacing and Word spacing.

Text color

To set the text color, use the “color” property.

Example:

p { color: #FF0000; } h1 {

color: red; }

This sets the HTML element < p > and the HTML element < h1 > to red.

Text background color

To set the background color of an element, use the property “background-color”, this property was explained in CSS background lesson.

Text direction

To set the text direction, use the “direction” property, it can take one of two values:



ltr: sets the direction to be from left to right as in English and French.



rtl: sets the direction to be from right to left as in Arabic and Hebrew.

Example:

body {

direction: rtl; }

This sets the text direction of the whole document to be from right to left.

Text align

to align the text contained in an element to the element, use the property “text-align”, this property can take one of the following values:

left, right, center, or justify.

Example:

P {

text-align: right; }

This aligns the element < p > text to the right of the element that it’s contained in.

Text indent

To indent the first line of a text, use the “text-indent” property, the value can be an absolute length, or a percentage value.

Example:

P { text-indent: 15px; }

Text transform

To set the text letters case, use the property “text-transform”, this property can have one of the following values:



none: no transformation.



capitalize: the first letter of each word will be in upper case.



uppercase: all letters will be uppercase.



lowercase: all letters will be lowercase.

Example:

P

{

text-transform: lowercase; }

This sets all the < p > element text characters to be in lowercase.

Text decoration

To set the text decoration, use the property “text-decoration”, it can have one of the following values:



none: no decoration



underline: the text will be decorated using a line under it.



overline: the text will be decorated using a line over it.



line-through: the text will be decorated using a line through it.

Example:

.underline {

text-decoration: underline; }

This causes any text element that uses this class to be underlined.

Letter spacing

To increase or decrease the space between characters, use the property “letter-spacing”, it can have one of the following values:



normal: the normal letters spacing of the used font.



A length value.

Example:

Body { letter-spacing: 1px; }

Word spacing

To increase or decrease the space between words, use the property “word-spacing”, it can have one of the following two values:



Normal: the normal words spacing of the used font.



A length value.

Example:

P { word-spacing: 2px; }

This sets the space between all words in the document to 2 pixels.

CSS Tutorials : Lesson 6 – Fonts

In this tutorial you will learn about Cascading Style Sheets (CSS), Fonts, Font family,Font size, Font weight, Font style and Font variant.

Font family

To set the font for a specific text, use the property “font-family”, the value can be more than one family separated with a comma, the browser will display the text using the first font, if it’s not supported by the operating system, it will use the next font, if no font is supported, it will use the default font.

Example:

body {

font: Arial, Helvetica, sans-serif; }

This sets the HTML document font to one of the specified fonts starting from left, if no font is supported, then the browser default font is used.

Font size

To set the font size, use the property “font-size”, the value can be one of the following values: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, or larger

It can be also a length value or a percentage.

Example:

Body {

font-size: 12px; }

This sets the font size of the whole HTML document to 12 pixels.

Font weight

To set the weight of a font, use the property “font-weight”, the value can be one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900

Example:

.strong {

font-weight: bold; }

This sets all the text of the elements that use this class to be bold.

Font style

To set the style of a font, use the property “font-style”, the value can be one of the following values: normal, italic, or oblique.

Example:

.italic {

font-style: italic; }

This sets all the text of the elements that use this class to be italic.

Font variant

To set the variant of a font, use the property “font-variant”, the value can be one of the following values: normal or small-caps.

Example:

.caps { font-variant: small-caps; }

This sets all the text of the elements that use this class to be uppercase.

CSS Tutorials : Lesson 7 – Borders

In this tutorial you will learn about Cascading Style Sheets (CSS) Borders, Border width, Border style, Border color and Using the shortcut

Borders in CSS are not just the table borders as in HTML, with CSS any HTML element can have borders, CSS adds many effects to be applied to these borders.

Border width

To set the width of a border, use the property “border-width”, the value of this property can be one of the following values:

thin, medium, thick, or an absolute value as the table “border” attribute in HTML.

Example:

table {

border-width: 2px; }

This sets the width of the border of the < table > element to be 2 pixels.

Border style

To set the style of a border, use the property “border-style”, the value of this property can be one of the following values:

none, dashed, dotted, double, groove, hidden, inset, outset, ridge, or solid.

Example:

Table { border-width: 1px; border-style: dotted; }

This sets the border style of the < table > element to be dotted, and its width to 1 pixel.

Border color

To set the color of a border, use the property “border-color”, the value of this property can be any HTML color.

Example:

table { border-width: 1px; border-style: dotted; border-color: blue; }

This sets the style of the border of the < table > element to dotted, width to 1 pixel, and color to blue.

Note: All the previous properties can take up to 4 values, in the previous example if color is defined as:

border-color: blue green;

The top and bottom borders will be colored as blue and the right and left borders will be colored as green. If the rule is declared as:

border-color: blue green red;

The top border will be colored as blue, the right border will be colored as green, the bottom border will be colored as red, and the left border will be colored as the right border.

If the rule is declared as:

The top border will be colored as blue, the right border will be colored as green, the bottom border will be colored as red, and the left border will be colored as yellow.

The rule is:

1. The first value is for the top border

2. If there is no other value, then all borders color will be set to the only declared value. 3. Else, the second value is for the right border.

4. If there is no other value, then the bottom border value will be the same as the top border, and the left border value will be the same as the right border.

5. Else, the third value is for the bottom value.

6. If there is no other value, then the left border value will be the same as the right border. 7. Else, the last value will be for the left border.

This applies all border properties.

Using the shortcut

You can set all the properties in one declaration, to do so use the property “border”, and the order is: border-width, then border-style, and finally border-color.

Example:

Table {

border: 1px dotted blue; }

This sets the border width of the < table > element to 1 pixel, the style to dotted, and the color to blue. There are other border properties to set the border values for only one of the borders, they have the same values, they are:

border-top-width, border-top-style, border-top-color, border-top, border-right-width, border-right-style, right-color, right, bottom-width, bottom-style, bottom-color, border-bottom, border-left-width, border-left-style, border-left-color, and border-left.

The only difference between these properties and the previously explained properties is that they can’t take more than one value to be set for that single border.

CSS Tutorials : Lesson 8 – Margin

In this tutorial you will learn about Cascading Style Sheets (CSS) Margin and Using the shortcut The margin is the space around the element from the four sides, the margin attributes enables you to increase or decrease this space; the space can be a negative value, which may make elements overlap. Using margins is very easy and straight forward, to declare the margin you can use the following properties:

margin-top, margin-right, margin-bottom, and/or margin-left.

The values of these properties can be an absolute length, a percentage.

Example:

.margins {

margin-top: 5px; margin-right:10px;

margin-bottom: 5px; margin-left: 12px; }

This will set the top margin of any HTML element that uses this class to 5 pixels, the right margin to 10 pixels, the bottom margin to 5 pixels, and the left margin to 12 pixels.

Using the shortcut

A shortcut property can be used to set all the margins in one declaration; the property is “margin”, and the order is:

margin-top, then margin-right, then margin-bottom, and finally margin-left.

Example:

The previous example can be written as: .margins

{

margin: 5px 10px 5px 12px; }

This will cause the same effect as the previous example.

You can use from 1 to 4 values for the “margin” property, and the browser will assign a value for each side the same way as in borders.

CSS Tutorials : Lesson 9 – Padding

In this tutorial you will learn about Cascading Style Sheets (CSS) Padding,

The padding is the space between the element border and the element content from the four sides, the padding attributes enables you to increase or decrease this space; unlike spacing padding space values can’t be negative.

To declare the padding you can use the following properties: padding-top, padding-right, padding-bottom, and/or padding-left. The values of these properties can be an absolute length, a percentage.

Example:

table { padding-top: 5px; padding -right:3px; padding -bottom: 5px; padding -left: 2px; }

This sets the top padding of the < table > element to 5 pixels, the right padding to 3 pixels, the bottom padding to 5 pixels, and the left padding to 2 pixels.

A shortcut property can be used to set all sides padding in one declaration; the property is “padding”, and the order is:

padding-top, then padding-right, then padding-bottom, and finally padding-left.

Example:

The previous example can be written as: table

{

margin: 5px 3px 5px 2px; }

This will cause the same effect as the previous example.

You can use from one to four values for the “padding” property, and how the browser will assign a value for each side works the same as in borders and margins.

CSS Tutorials : Lesson 10 – List

In this tutorial you will learn about Cascading Style Sheets (CSS) List, List style type, List style position, List style image and Using the shortcut.

List style type

To set the list style marker type, use the property “list-style-type”, this property can have on of the following values:

none, circle, disc, square, decimal, decimal-leading-zero, alpha, upper-alpha, greek, lower-latin, upper-lower-latin, lower-roman, upper-roman, armenian, cjk-ideographic, georgian, hebrew, hiragana, hiragana-iroha, katakana, or katakana-iroha.

Example:

< ul style=”list-style-type: disc;” >Fruits: < li >Apples< /li >

< li >Bananas< /li > < /ul >

This will be presented as follows: Fruits:

• Apples • Bananas

List style position

To set the position of the list item marker, use the property “list-style-position”, the value that can be assigned to this property may be on of the following:

inside or outside.

Example:

< ul style=”list-style-type: disc; list-style-position: inside ;” >Fruits: < li >Apples< /li >

< li >Bananas< /li > < /ul >

This will be presented as follows: Fruits:

• Apples • Bananas

List style image

To use a custom image as a list style marker, use this property “list-style-image”, the value of this property is a URL.

Example:

< ul style=”list-style-image: list_image.jpg” > Fruits: < li >Apples< /li >

< li >Bananas< /li > < /ul >

This sets the image “list_image.jpg” as the marker for this list style.

Using the shortcut

A shortcut property can be used to set all the properties of the list style in one declaration, the property is “list-style”, and the order is:

padding-top, then padding-right, then padding-bottom, and finally padding-left. list-style-type, then list-style-position, and finally list-style-image.

Example:

ul

{

list-style: disc inside url(“list_image.jpg”) }

This sets the marker style to disk, the position to be inside, and overrides the marker to be the mage “list_image.jpg” instead of disc.

CSS Tutorials : Lesson 11 – Dimensions

In this tutorial you will learn about Cascading Style Sheets (CSS) - Dimensions, Line height, Width and Height.

The dimension properties enable you to increase or decrease the height and width of HTML elements.

Line height

To set the distance between the lines of an element, use the property “line-height”, the value of this attribute can be an absolute value or a percentage.

Example:

p

{

line-height: 0.3cm; }

This sets the distance between lines to 0.3 cm.

Width:

To control the width of an element, you can use three properties, they are: • “width”: sets the element width.

• “min-width”: sets the minimum width of an element. • “max-width”: sets the maximum width of an element.

The value of these properties can be an absolute value or a percentage.

Example:

table {

width: 100% }

This sets the width of the

CSS Tutorials : Lesson 12 – Elements Display

In this tutorial you will learn about Cascading Style Sheets (CSS) - Elements Display, Float, Position, Visibility, Cursor, Vertical align and z-index.

The display properties enable you to set the way to display elements and the position of the element relative to another element or to the whole document.

Float

To set the appearance of an element or an image relative to another element, use the property “float”, this property can have on of the following values:

left, right, or none.

Example:

img

{

float: left; }

This sets the image position to be at the left of the element.

Position

To set the position of an element, use the property “position”, this property can have on of the following values:

• absolute: relative to the parent element. • relative: relative to the normal position of the element.

Example:

h3 { position: relative; right: 10px; }

This will position the < h3 > tag at 10 pixels to the right relative to its original position. The “position” property just defines the position and it needs one of the following properties: “top”, “right”, “bottom”, and “left”

These properties declare the amount as an absolute value or a percentage.

Visibility

To set if an element will be visible or invisible, use the property “visibility”, it van have one of the following values: visible or hidden.

Example:

.hide { visibility: hidden; }

This will make the element that uses this class to be invisible when the document is rendered.

Cursor

To set the type of the cursor, use the property “cursor”, this property can have one of the following values:

crosshair, help, move, pointer, text, url, wait, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-sw-resize, or w-resize.

Example:

body {

cursor: crosshair; }

This sets the cursor of the whole document to crosshair.

Vertical align

To set the vertical alignment of an element, use the property “vertical-align”, this property can have one of the following values:

sub, super, top, bottom, middle, text-top, text-bottom, an absolute value, or a percentage.

Example:

td {

vertical-align: top; }

This sets the contents of the table cell to be in the top.

z-index

If there are elements that overlap, and you want to display them as layers, you can define the order of the element using the property “z-index”, the value is a number that represents the element order.

Example:

img {

z-index: -1; }

This will place the < img > element behind all other elements.

CSS Tutorials : Lesson 13 – Pseudo Classes

In this tutorial you will learn about Cascading Style Sheets (CSS) - Pseudo Classes, Link, First letter and First line

CSS has pre-defined pseudo classes.

pseudo class has special syntax, the rule starts with the selector, then the pseudo class, and finally the declaration, the selector and the pseudo class are separated with a colon “:”.

CSS defines the following pseudo classes:

link, hover, active visited, first-line, and first-letter.

Link

To define link properties, you can use four pseudo classes, they are: • link: sets the style of the unvisited link.

• hover: sets the style of the link when mouse goes over it. • active: sets the style of the link when activated.

• visited: sets the style of the visited link.

Example:

a:link { color: #0000FF; } a:visited

{ color: #FF0000; } a:hover { color: #00FF00; } a:active { color: #0000FF; }

This sets the link color to be in blue when unvisited and when active, to be in red when visited, and to be in green when mouse goes over it.

First letter

To set a different style for the first letter of an element, use the pseudo class “first-letter”, this can set the first letter font, color, and text properties.

Example:

p { font-size: 10px; } p: first-letter { color: red; }

This will display the first letter of the element < p > in red color.

First line

To set a different style for the first line of an element, use the pseudo class “first-line”, this can set the first line font, color, and text properties.

Example:

p { font-size: 10px; } p: first-line { color: red; }

This will display the first line of the element < p > in red color.

CSS Tutorials : Lesson 14 – Media Styles

In this tutorial you will learn about Cascading Style Sheets (CSS) - Media Styles, Internal different media CSS and External CSS files.

CSS adds support for different media types, you can create many styles, and each style defines how the document will be styled when its media type is used.

There are two ways to use a different CSS for different media types in the same document, you can place the style internally in the HTML document, or you can create as many CSS files and link them to the HTML document.

Internal different media CSS

To use internal media CSS, use the “@media” rule, the rule(s) will be inside the < style > elements.

Example:

@media screen { p { font-size: 12px; } } @media print { p { font-size: 10px; } }

This will set the size of the text of the < p > element to 12 pixels when displayed at the screen, and to 10 pixels when printed.

External CSS files

To use external CSS files, add a < link > element inside the < head > element of the HTML document for every CSS file to be used, add the attribute “media” to the element, and specify the media type that will use this file, media values can be one of the following:

all, aural, braille, embossed, handheld, print, projection, screen, tty, or tv.

Example:

We have two CSS files, the first one is named “screen_style.css”, and it defines how the HTML document will be displayed on screen, the second one is named “print_style.css”, and it defines how the HTML document will be displayed when printed, to use both of them in the HTML document:

< head >

< link rel=”stylesheet” type=”text/css” media=”screen” href=”screen_style.css” />< link /> < link rel=”stylesheet” type=”text/css” media=”print” href=”print_style.css” />< link /> < /head >

This will use the “screen_style.css” for screen display, and “print_style.css” for printing.

Printing HTML documents always causes problems, with CSS you can specify a printing style and attach it to the document.

CSS has a great support to document printing, it adds many rules that helps in adjusting the printing measures of the document.

CSS Tutorials : Lesson 15 – Units, Colors, References

In this tutorial you will learn about Cascading Style Sheets (CSS), Units and Colors, Percentage, Values, Colors, References - Font and Text, Color and Background, Layout, Classification, Positioning and Pseudo-classes.

Units and Colors

Percentage

Percentage values have to be followed by “%”.

Values

The absolute values represent a measurement, there are many measurements in CSS, so the measurement unit has to be stated.

CSS measurement units are: • cm: centimeter.

• em: font size.

• ex: half of the font size. • in: inch. • mm: millimeter. • pc: pica. • pt: point. • px: pixel.

Colors

Colors values can be in one of the following formats: • color-name: the name of the color (red, green,…).

• #rrggbb: a hexadecimal representation of the color, the first two digits are for red, the following two digits are for green, and the last two digits are for blue (#FF00FF).

• rgb(x,y,z): RGB values representation of the color (rgb(255,255,0)).

• rgb(x%,y%,z%): RGB percentage representation of the color (rgb(100%,100%,0%)).

Font and Text:

direction Sets the reading order of the specified element. font Sets up to six separate font properties of the element. font-family Sets the name of the font used for text in the element. font-size Sets the size of the font used for text in the element.

font-style Sets the font style of the element as italic, normal, or oblique. font-variant Sets whether the text of the element is in small capital letters. font-weight Sets the weight of the font of the element.

line-height Sets the distance between lines in the element.

letter-spacing Sets the amount of additional space between letters in the element.

text-align Sets whether the text in the element is left-aligned, right-aligned, centered, or justified.

text-decoration Sets whether the text in the element has blink, line-through, overline, or underline decorations.

text-indent Sets the indentation of the text in the element. text-transform Sets the rendering of the text in the element.

vertical-align Sets the vertical positioning of the element.

Color and Background

background Sets up to five separate background properties of the element. background-attachment Sets how the background image is attached to the element

within the document.

background-color Sets the color behind the content of the element. background-image Sets the background image of the element.

background-position Sets the position of the background of the element.

background-repeat Sets how the background-image property of the element is tiled. color Sets the color of the text of the element.

Layout

border Sets the properties to be drawn around the element. border-bottom Sets the properties of the bottom border of the element. border-bottom-color Sets the color of the bottom border of the element. border-bottom-style Sets the style of the bottom border of the element. border-bottom-width Sets the width of the bottom border of the element. border-color Sets the border color of the element.

border-left Sets the properties of the left border of the element. border-left-color Sets the color of the left border of the element. border-left-style Sets the style of the left border of the element. border-left-width Sets the width of the left border of the element. border-right Sets the properties of the right border of the element. border-right-color Sets the color of the right border of the element. border-right-style Sets the style of the right border of the element. border-right-width Sets the width of the right border of the element.

border-style Sets the style of the left, right, top, and bottom borders of the element.

border-top Sets the properties of the top border of the element. border-top-color Sets the color of the top border of the element. border-top-style Sets the style of the top border of the element. border-top-width Sets the width of the top border of the element.

border-width Sets the width of the left, right, top, and bottom borders of the element.

float Sets on which side of the element the text will flow.

Margin Sets the width of the left, right, bottom, and top margins of the element.

margin-bottom Sets the height of the bottom margin of the element. margin-left Sets the width of the left margin of the element. margin-right Sets the width of the right margin of the element. margin-top Sets the height of the top margin of the element.

Padding Sets the amount of space to insert between the element and its margin or, if there is a border, between the element and its border.

padding-bottom Sets the amount of space to insert between the bottom border of the element and the content.

padding-left Sets the amount of space to insert between the left border of the element and the content.

padding-right Sets the amount of space to insert between the right border of the element and the content.

padding-top Sets the amount of space to insert between the top border of the element and the content.

Classification

display Sets whether the element is rendered.

list-style Sets up to three separate list style properties of the element. list-style-image Sets which image to use as a list-item marker for the element. list-style-position Sets how the list-item marker is drawn relative to the content of

the element.

list-style-type Sets the predefined type of the line-item marker for the .

Positioning

Bottom Sets the bottom position of the element in relation to the bottom of the next positioned element in the document.

Height Sets the height of the object.

Left Sets the position of the element relative to the left edge of the next positioned element in the document.

Overflow Sets how to manage the content of the element when the content exceeds the height and/or width of the object. Position Retrieves the type of positioning used for the object.

Right Sets the position of the element relative to the right edge of the next positioned element in the document.

top Sets the position of the element relative to the top edge of the next positioned element in the document.

Visibility Sets whether the content of the element is displayed. Width Sets the width of the object.

Pseudo-classes

active Sets the style of anchor when the link is engaged or active. cursor Sets the type of cursor to display as the mouse pointer moves

over the element

hover Sets the style of the anchor when the user hovers the mouse over the links.

link Sets or retrieves the style of the < a > element for the default state of the link.

visited Sets the style of the anchor for previously visited links.

CSS Lists: Part 1

Lists have been used as an active navigational element for a while now, by using CSS to style them in a fashion that makes them recognizable as part of the page’s navigation. They weren’t originally intended for this, however. The more you look back at HTML specifications, the more it’s obvious that their purpose was as a visual, documentational aid. Indeed, those of you who are veterans to the web will remember the very old pages characterized by the left-aligned black text on a white background, the ubiquitous

Times New Roman font, the very long pages with many anchors, and the black circle bulletpoint lists. Actually, the HTML part didn’t change much since those times as far as lists are concerned, apart from the

class

attribute.

We’ll start with just such a list:



List Item 1



List Item 2



List Item 3 The HTML used for it is:

<div class=”list_container”> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </div>

I opted not to style the list

ul

or

il

elements themselves, but rather encase the list in a

DIV

so that we’ll be able to address the different elements within it in a simple manner. This isn’t really necessary—you can often achieve exactly what you need by styling the

ul

element and addressing the elements under it, instead. Remember though, that the element that you wrap the list around needs to be a

DIV

, rather than a

SPAN

, since strict XHTML won’t validate an Inline element having a Block child (you could, of course, add

display: block;

to its class, by why go that far when

DIV

is ready and waiting to serve?). Since I’m going to be referring to elements of the Box Model frequentry throughout this document, you may want to check out the Box Model article to get better acquainted with how CSS tells the browser to draw elements onto the display device.

We’ll start by taking the reigns and assigning values to several well-known properties:

.list_container ul { margin-left: 0; padding-left: 0; list-style-type: none; font-size: 14px; line-height: 17px; font-family: Trebuchet MS, sans-serif, Arial, Helvetica; }

The first thing we do is eliminate the padding and margin to the left of the text. We may want to recover that later, but for now we’re simplifying the list. We also remove the bulletpoints completely by assigning

none

to the list-style-type property. Lastly, we assign font and line-height properties. You may be wondering why bother with

line-height

? This is a technicality that you’ll be able to experiment with later—If you just set a font size, sometimes the list

il

items will distance themselves from each other in Internet Explorer, creating what looks like a margin, even if you specify the

li

’s margin property to 0. There is a similar problem with horizonal lists, however the solution to that problem is different. The problem often shows itself when the

line-height

is too small compared to the font size, though your best bet is to simply check your design in Internet Explorer and see how it renders. Also keep in mind that while the

UL

element is a Block element, the

LI

element is of type list-item, which means that the line-height property governs its height, rather than the height property. In fact, if you were to replace the line-height property with the height property of the same value, you’ll get some amusing results, which will vary from one browser to another.

Here’s what our list looks like now:



List Item 1



List Item 2



List Item 3

The list has been simplified to simply lines at this point, though of course lists have inherent properties that mere HTML lines do not. Before we keep adding properties to the list, let’s first turn the list items into links. We do this as easily as it sounds, by encasing them in

a

elements:

<div class=”list_container”> <ul> <li><a href=”#”>List Item 1</a></li> <li><a href=”#”>List Item 2</a></li> <li><a href=”#”>List Item 3</a></li> </ul> </div>

Now that we have links on our list, we should style them as well:

.list_container a { display: block; padding: 1px; padding-left: 10px; width: 200px; background-color: #FFF; border-bottom: 1px solid #DDF; } .list_container a:link, .list_container a:visited { color: #369; text-decoration: none; } .list_container a:hover { background-color: #369; color: #fff; }

Before going over the changes, let’s view them first:



List Item 1



List Item 2



List Item 3

Suddenly it no longer looks like a “documentation aid” anymore... All that’s changed is that the items were made into links, and the links were styled the same way you would normally use CSS to style any other link. Actually that’s not entirely accurate: a very important property has been added -

display: block;

. This transformed the

a

elements from Inline elements into into Block elements, similar to how

DIV

s and

P

s are. The block takes up whatever space it can, horizontally, within the

il

area. This way, the structure of the list is taken advantage of, and you can add borders and padding that apply to all of the links in the same manner. This is also helpful when designing mouse-over effects, of course, since the cursor will be detected all over the link area, not just the text portion.

Notice that the only elements that were specified a width were the

a

elements. In other words, at the very least, the encasing

DIV

is taking up all the horizontal space that it can. Normally, when encasing a list with a

DIV

, you would need to specify a width for the

a

elements, and for the

DIV

itself. You can’t leave the width of the

a

elements empty, or the

il

elements will react badly in different manners depending on the browser. You also shouldn’t set the

a

width to

100%

, since this will conjure its own set of problems, even if you’ve set the

DIV

’s width to a specific amount of pixels. This may seem troublesome, but there’s really nothing preventing you from setting both width properties to the same pixel value, which is the recommended route.

Let’s not write off the list markers just yet. Remember that it’s always nice to get more graphical value out of less code, when possible (and when appropriate!). We’ll make three changes to the CSS:

.list_container ul { margin-left: 2em; padding-left: 0; list-style-type: upper-roman; font-size: 14px; line-height: 17px; font-family: Trebuchet MS, sans-serif, Arial, Helvetica; color: #369; }

The list-style-type property value was changed to

upper-roman

, the margin-left was set to

2em

, and

color: #369;

was added, all to the

.list_container ul

selector. Here’s what we get after applying the changes:



List Item 1



List Item 2



List Item 3

The margin-left had to be increased, since the list markers would otherwise appear outside of the list’s area, to the left (in fact, the list itself is no longer 200 pixels wide, only the

a

elements are). The list-style-type property value was changed to

upper-roman

(check the list-style-type CSS property reference for more options), and the markers themselves were colored using the color set to the

UL

element. Note that this will allow the background behind the list to show through if you don’t set a background-color (or a background-image) value to the

.list_container

class.

We’ve covered some basic uses of HTML lists as navigational elements. You can see this is no rocket science, and is very easy to manipulate and scale. In CSS Lists: Part 2, we’ll get into more complex lists, and more subtle property usage.

CSS Lists: Part 2

In CSS Lists: Part 1, we took a plain HTML list, encased it in a DIV, and used CSS to style the list by accessing it through the DIV’s decendant-elements. Here was how the list looked like when we finished styling it (before re-adding the markers):



List Item 1



List Item 2



List Item 3

It’s now clearly a navigational element, with mouse-over reactions to boot. Let’s look at a few variations we can achieve simply by playing around with the CSS, while leaving the HTML as it is. Needless to say, if

we were to add HTML elements, there would be more for us to style, but for now, we’ll stick to the original structure.

We’ll start with a version that intentionally seeks to maximize the graphical detail that we can attain, by styling every element in the HTML. This is also where we’ll encounter the first CSS-standards browser issue:

.list_container li { width: 200px; border: 1px solid #000; margin-bottom: 4px; } .list_container a { display: block; padding: 2px; padding-left: 10px; background-color: #A74B4B; border: 2px solid; border-color: #C98787 #6C3131 #6C3131 #C98787; } .list_container a:link, .list_container a:visited { border-color: #FFF; text-decoration: none; } .list_container a:hover { border: 2px solid; border-color: #6C3131 #C98787 #C98787 #6C3131; }

We left the

UL

element unchanged, since it mainly styled font properties which will stay the way they are for now. Something may draw curious attention in the code above: The width property was moved from the

a

element to the

LI

element—I’ll explain this in a moment. The

LI

element was also added a

1px

black border, and a margin of

4px

in order to space the list items out. The main graphic element that was added was the button-like border to the a element. I used the short-hand definition of border-color, defining the four colors clock-wise. Here’s what we got:



List Item 1



List Item 2



List Item 3

Considering how little HTML code makes up this list, this is quite remarkable. If you tried doing that using tables, you’d probably have to use about 10 times the code. Now, why was the width property moved from the

a

element to the

LI

? Didn’t I write in CSS Lists: Part 1 that you’re supposed to keep the width property to the

a

element and the

DIV

? I did, and for good reason: this specific list will function one way in Explorer 6, and another in Firefox and Explorer 7. This is because Explorer 6 does not implement CSS to exact standards. Let’s first go over how the CSS standard browser “sees” things: Think about it like boxes within boxes. If you define the inner box to a certain size, you dictate the outer box to at least that size. Remember that since the

a

elements have the property of

display: block

, that they will take up however much horizontal space that they can. Now consider that the

a

element is the one which dictates the width, and the

LI

elements wrap around it—that would mean that the

LI

elements would have to take into consideration all of the

a

element’s margins and borders, something that not all browsers do well. Instead, we define the

LI

element’s width, and let the

a

element “flow” within it, taking up however much space it needs, like pouring liquid into a specific-size container. This is easier for the browser to calculate and render. This, again, has to do with the Box Model, as was mentioned in the previous article.

Internet Explorer 6 doesn’t support CSS standards fully, and renders things differently: Even though the

a

’s property of display was set to

block

, the link’s active area will only react when the cursor touches the text itself, not the entire list item. In fact, the oddity goes further—if you’ve assigned border reactions to the

a:hover

(and we did), they will indeed take effect, but only if you trigger them by moving the cursor over the link text itself.

Quite a few of you reading this are probably thinking to yourselves: “if this is some experimental future-standards thing that isn’t applicable today, why didn’t you say so earlier?”... Well, because it isn’t. The the above “mix” of properties is already implemented on many sites, for 3 main reasons:



Even though it does not render exactly the same on the two latest versions of Explorer, both versions render it acceptably. Even if you have no conditioning for alternate CSS when a different browser is encountered, it won’t “break” the page (and you could condition different style sheets for the two different browser versions, if you really wanted to, in which you’d use the stricter set of rules).



You can always condition to have the browser load a different CSS file if a completely non-supporting browser is encountered. In the meantime, why deny non-supporting browsers the most effective manner of achieving the goal, using standard CSS?



Generally, when you code for the web, you code for the most commonly supported standards, slightly biased upwards, and then make sure that your design ‘downgrades’ gracefully. This way, you’re giving users of modern browsers a better user experience, without hindering users of older browsers. This does not, mind you, take into account mobile browsers, at least not the

nonconforming ones. The Opera browser, on the other hand, used on many non-PC devices, is highly standards compliant, and is usually easier to code for than Internet Explorer versions. Now let’s design a list that’s close in terms of outcome, but is more lenient on CSS standards. What would we have to do in order for it to render exactly the same in all major browsers? Well, first, we’d use the rule mentioned in CSS Lists: Part 1 -- assign a pixel width property to the

DIV

, and the

a

elements. Since

we’re not going to be assigning anything to the

LI

’s width property, there’s no point in adding a border to it, because its width will be dictated by the

a

elements, which will cause problems if we try to outline it (remember the boxes within boxes problem?). So how close can we get, if we have to change so much? This close:



List Item 1



List Item 2



List Item 3

Well, as you can see, one “layer” of detail had to be removed. Of course, we’re still using the original HTML code—we could add HTML in order to achieve the goal, but then, we could just as well use tables and burden the browser further. We’re trying to maximize our gain from lists and CSS, so for now, we’ll stick with the original HTML. Before moving on to additional functions, let’s see a couple of additional design options. First:



List Item 1



List Item 2



List Item 3

Two new tricks were employed for this list. The first was to apply a different margin-left for the

hover

mode, in order for the items to indent when they’re touched by the cursor. The second was to add a border-left of a different thickness under the same condition. This adds a strong sense of selecting links, since it appears like pulling tabs. This list won’t have any problems with Explorer 6, since it styles the

a

element, and leaves the

LI

element alone. Here’s the complete CSS of the above list:

.list_container ul { margin-left: 0; padding-left: 0; list-style-type: none; font-size: 12px; line-height: 14px; font-family: Trebuchet MS, sans-serif, Arial, Helvetica; } .list_container a { display: block; width: 200px; padding: 1px; padding-left: 10px; background-color: #55F; border: 1px solid #005; margin-bottom: 2px; margin-left: 0px; margin-right: 24px; } .list_container a:link, .list_container a:visited { color: #FFF; text-decoration: none; } .list_container a:hover { border: 2px solid; color: #00A; background-color: #FFF; border: 1px solid #080; border-left: 15px solid #080; margin-left: 10px; margin-right: 0px; }

A few things to note: When assigning specific margin values, or specific border values, make sure you have a constant sum of values for the top/bottom, and for the left/right. If you don’t, the overall object will actually change size. So why does the

a

element start with a margin-right of

24px

? Because of the potential margin plus the potential border. It starts off with just a

1px

uniform border, so the object moved 1 pixel to the right (because it is left-aligned). If you were to move your cursor over it, it would increase its border-left to

15px

, and its margin-left to

10px

, a total of 25. So again, why 24 instead of 25? Because of the initial 1 pixel border—it’s counted in as part of the left/right sum. When the link is in

hover

state, the margin-right is reduced to 0.

And now for something completely different:



List Item 1



List Item 2



List Item 3

Images were expected at some point, weren’t they? This is the exact same HTML as the rest of the lists, the only thing that’s changed is the use of images. In fact, this is a mild implementation of them—you can achieve all sorts of effects using filters. Also there’s no position change, which, when using images, can be used to create effects like pushing buttons or flipping switches. Here’s the CSS:

.list_container_f { } .list_container_f ul { width: 140px; padding: 5px; margin-left: 0; padding-left: 5px; padding-right: 5px; padding-top: 15px; padding-bottom: 15px; list-style-type: none; font-size: 12px; line-height: 15px; font-family: Trebuchet MS, sans-serif, Arial, Helvetica; border: 1px solid #000; background: url(‘wall4.jpg’) no-repeat; } .list_container_f a { display: block; font-weight: bold; width: 130px; padding: 1px; border: 1px solid #000; margin-bottom: 3px; background: url(‘wall2.jpg’) no-repeat; indent: 50px; } .list_container_f a:link, .list_container_f a:visited { color: #FFF; text-decoration: none; } .list_container_f a:hover { color: #FC0; border: 1px solid #FC0; }



As you can see, the

UL

element was heavily styled this time. It was given a background of its own, and a

1px

black border. Notice that its padding properties were addressed individually, giving the

UL

area

5px

horizontal padding, and

15px

vertical padding. This padding had to be accounted for in the width property, however—you’ll notice a

10px

gap between the

LI

and the

UL

elements. Also notice that the text-indent property was used to push the text to the right. This is very convenient, since it leaves the padding and margin properties alone, which means you don’t have to deal with the implications of setting them. What implications? Well, add

margin-left: 30px;

to the

a

element. Then load the page in both Explorer 7, and Firefox. Explorer will assume that you want the

a

elements to remain within the

LI

elements, which you’d like to keep within the

UL

element. Firefox, on the other hand, assumes no such thing. It will simply shift the

a

elements 30 pixels to the right, and the

UL

and

LI

elements will stay right where they were prior to the change. This is just one of many disagreements between the browsers, but don’t worry, if you find a disagreement between Explorer 7 and Firefox, there’s usually a straight-forward way of mending the problem (unlike, for example, a rendering difference between Explorer 6 and Firefox). Though these problems will crop up every now and then, they’re worth the extra work of finding solutions for them: the reward is very little code that defines a lot of details, and renders very easily (and quickly) in the viewer’s browser. In future documents, I’ll expand on how additional HTML elements can be styled within lists while maintaining the same course of containing the entire navigational area within one selector class. I’ll give examples of horizontal lists, which are very useful, and have a special affinity for background images and buffers due to their fixed height (you can guess where I’m going with this, since the line-height doesn’t change...).

Until then, happy experimenting!

CSS Lists: Part 3 - Horizontal Lists

In this installment of CSS Lists, we’ll go over the always-handy horizontal lists. It’s recommended that you at least read CSS Lists: Part 1 so that you understand how to transform static lists into dynamic

navigational components.

Horizontal lists differ from vertical lists in several ways, but in order to fully understand that, we need to understand how they’re ‘made horizontal’. Oddly enough, all you need to do is to set the display property value of the

LI

elements to

inline

. Well, that’s not all you’re going to want to do, but that’s the crux of it. Here’s what I mean:



List Item 1



List Item 2



List Item 3

That was a plain list. No properties were assigned to it. Now I’ll add the following CSS: .horiz li { display: inline; }

After applying just that rule, here’s the same list:



List Item 1



List Item 2



List Item 3

As was done in previous installments of CSS Lists, I’m wrapping the list with a

DIV

element, and styling it and its descendant elements. The HTML/XHTML I’m working with is:

<div class=”horiz”> <ul> <li><a href=”#”>List Item 1</a></li> <li><a href=”#”>List Item 2</a></li> <li><a href=”#”>List Item 3</a></li> </ul> </div>

The next thing to do is to remove the “vestigial” inherent list properties, which means removing the margin, padding, and list-style-type property values (by ‘removing’ I of course mean either resetting to

0

or

none

). While I’m doing that, I might as well set the font-family, font-size, and line-height property values:

.horiz ul { margin: 0; padding: 0; list-style-type: none; font-family: Georgia, “Times New Roman”, Times, serif; font-size: 14px; line-height: 17px; }

The list now looks like one stack of inline elements, which, in a way, it is:



List Item 1



List Item 2



List Item 3

If you remember the sequence of steps from CSS Lists: Part 1, you know that I’ll now start messing around with the

A

elements. However, one of the big differences between the lists I’ve demonstrated so far, and horizontal lists, is that horizontal lists don’t have the same link width for each link. While this is a mixed blessing, it’s more of an advantage than a disadvantage, since you waste less space on your page overall.

Starting with the basics:

.horiz a { padding: 2px 1em 2px 1em; background-color: #a75355; } .horiz a:link, .horiz a:visited { color: #FFF; text-decoration: none; } .horiz a:hover { }

Here’s how the markup renders now:



List Item 1



List Item 2



List Item 3

What’s unexpected, was that there would be any space between the list elements. Remember though, that they’re inline elements now, which means that they’ll act like ones, and treat white spaces, which include newlines, as, well, spaces... This requires a tweak to the markup:

<div class=”horiz”> <ul> <li><a href=”#”>List Item 1</a></li ><li><a href=”#”>List Item 2</a></li ><li><a href=”#”>List Item 3</a></li> </ul> </div>

If you’ve been around since the olden days of image stacking, you’ll recognize this trick as “tag breaks” or “in-tag newlines”. There was a need to remove the newlines between the

LI

tags, so the first thing you would think of doing is just placing them all in a row. This works, but makes for extremely

un-maintainable markup, especially when you have 8 list items and 8 corresponding link URLs. However, neither HTML, nor XHTML, mind if there’s a newline within a tag. This lets us close the ending

LI

tags the line after they open.

Here’s the result of that tweak:



List Item 1



List Item 2



List Item 3

If you do want spaces between the list items, you’d usualy use the margin property instead of white-spaces. We’re not barbarians, you know...

As well, I didn’t find the room to comment about the usage of the padding property in the

A

element style rule until now. It’s the usual ‘top-clockwise’ shorthand syntax, but unlike vertical arrays, I had to pad all sides. This is because, just like the

LI

elements, the

A

elements are also inline, which means that they’ll take not a pixel more than they need to render (unlike block-level elements, which will take whatever horizontal space you give them). This meant that I needed to pad their right side by the same amount as I padded their left side (I say “need” loosely, since you can really do whatever you wish that suits your design).

Now to give them some hover reactions:

.horiz a { padding: 2px 1em 2px 1em; background-color: #a75355; border-right: 1px solid #693334; border-bottom: 1px solid #693334; } .horiz a:link, .horiz a:visited { color: #FFF; text-decoration: none; } .horiz a:hover { background-color: #bc787a; color: #FFF; }

Nothing new here. I just gave the

:hover

state a slightly brighter color. I also added some borders to the links for spice. Here’s how the list looks now:



List Item 1



List Item 2



Very Long Link



Short

Before I move on, I should mention this little neat feature: you can center the list by centering the text of the

UL

element. That is to say, by adding this:

.horiz ul { text-align:center; } This is the list you’ll get:



List Item 1



List Item 2



Very Long Link



Short

Why would that happen? Well, now that every element that’s a descendant of the

UL

element is inline, it’ll be effected by the text-align property. And remember that this rule selects the

UL

element, not the

DIV

, so you can still throw things in there and have them unaffected by the centering.

If you consider the usage of horizontal links, they’re often used to guide the visitor around the broad sections on the site. They also sometimes act as guides to where the visitor currently is. Look at the following style rule:

.arbitrary { border-width: 5px 3px 5px 3px; border-style: solid; border-color: #bc787a; } Now look at the following implementation:

<div class=”horiz”> <ul> <li><a href=”#”>List Item 1</a></li ><li class=”arbitrary”><a href=”#”>List Item 2</a></li ><li><a href=”#”>Very Long Link</a></li ><li><a href=”#”>Short</a></li> </ul> </div>

And finally, how it looks in practice:



List Item 1



List Item 2



Very Long Link



Short

This can be a means of tagging the page the visitor is currently visiting. You’re styling one specific

LI

element and adding, in this case, border properties to it. Note how much larger the top, and the bottom borders had to be made, however. This, again, relates to all of these elements being inline. The

A

elements, even though they were given border and padding to, one would think, ‘inflate’ the

LI

elements that wrap them, they did so only horizontally, not vertically. Thus, in order to see the vertical border applied to the

LI

elements, they have to surpass the

A

’s element box. Once you’ve done that though, you’re in the clear, this will render properly in Firefox, Internet Explorer versions 7 and 6, and Opera. The subject of images in lists will likely be covered in the next installment. You’d be surprized in what ways lists can manipulate images, and do so with relatively few properties at that.

CSS Selectors: Part 1

Knowing how to apply CSS to a document takes more than memorizing all of the CSS properties and remembering how the document flow works. Of course, you could ‘make it work’ by making a new class for every element on your page and having a 40Bk .css file that loads along with it, but that’s not practical, on many levels. To properly implement CSS, you need to know how to use selectors. Selectors define type(s) of HTML element(s) the styling (whatever’s between the

{ }

) applies to. They’re the “other side” of a CSS style rule definition.

But First!

A prerequisite to properly implementing selectors is understanding the Document Tree. If you haven’t already, it’s recommended you go over the Document Tree article which details how the document tree is applied to HTML/XHTML documents.