CSS Dimension

The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.

Visit THIS LINK for a list of CSS Dimension Properties and possible property values

CSS Classification

The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.


float:left;clear:both (Venus picture)


Move the mouse over the words to see the cursor change:

Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help


Visit THIS LINK for a list of CSS Classification Properties and possible property values

CSS Positioning

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

Visit THIS LINK for a list of CSS Positioning Properties and possible property values

CSS Pseudo-Classes

CSS pseudo-classes are used to add special effects to some selectors.


Syntax

The syntax of pseudo-classes: selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes: selector.class:pseudo-class {property: value}


Anchor Pseudo-Classes


:first-child Pseudo-class

First paragraph in span > div > p:first-child{text-indent:25px} This paragraph will be indented.

Second paragraph in div. This paragraph and other suceeding paragraphs will not be indented.

This is the first em element in the paragraph. And this is the second em element.

This Link W3Schools is the first-child and this Link W3Schools is not.


:lang Pseudo-class

The short quote: da di, da da, da du uses CSS q:lang(no){quotes: "~" "~"}

Pseudo-Class Purpose
:active
:focus
:hover
:link
:visited
:first-child
:lang
Adds special style to an activated element
Adds special style to an element while the element has focus
Adds special style to an element when you mouse over it
Adds special style to an unvisited link
Adds special style to a visited link
Adds special style to an element that is the first child of some other element
Allows the author to specify a language to use in a specified element
Visit THIS LINK for a list of CSS Pseudo-Classes Properties and possible property values

Pseudo-Element

Syntax

selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}


Only the first line of this text is formatted according to the p:first-line{...} pseudo element within a paragraph. Since it has been defined within the class="firstline" therefore the code becomes p.firstline:first-line{...}

The first letter in the paragraph above uses p.firstline:first-letter{...}

Pseudo-Element Purpose
  • :first-letter
  • :first-line
  • :before
  • :after
  • Adds special style to the first letter of a text
  • Adds special style to the first line of a text
  • Inserts some content before an element
  • Inserts some content after an element

Visit THIS LINK for a list of CSS Pseudo-Element Properties and possible property values