CSS Propeties To Do

  • Box Model
  • Borders
  • Width and Height
  • Background-Color
  • Background-Image
  • Background-Repeat
  • Background-Attachment
  • Styling Lists
  • Customising Mouse

Box Model

This paragraph is aligned to right.

<p align = 'right'>

This paragraph is aligned to center.

<p align = 'center'>

Aligning Text Vertically

vertical-align only works with tables

Top Middle Bottom

Color

{COULDN'T GET THIS TO WORK HERE}
The text inside the paragraph is (supposed to be) green.
Got it working here

The text outside the paragraph is (supposed to be) black (by default).

CSS hexadecimal color property
The CSS

p.hex
{
  color: #0000FF;
}

The HTML

<p class = 'hex'>

CSS red, green blue (RGB) color property
The CSS

p.rgb
{
  color: rgb(255,0,0);
}

The HTML

<p class = 'rgb'>

Font-family

<p class="serif">

This is a paragraph shown in serif font.

This is a paragraph shown in sans-serif font.

This is a paragraph shown in monospace font.

This is a paragraph shown in cursive font.

This is a paragraph shown in fantasy font.

Font-size

<p class = 'small'>

Paragraph text set to be small

p.small
{
  font-size: small;
}

Paragraph text set to be medium

Paragraph text set to be large

Paragraph text set to be very large

h1.20px{font-size: 20px;}

h1.1.25em{font-size: 1.25em;}

Font-style

This paragraph is normal.

This is a paragraph in italic style.

This paragraph is oblique.

Font-variant

Paragraph font variant set to normal.

Paragraph font variant set to small-caps.

Font-weight


This is a font with a "lighter" weight.

<p class = 'light'>


This is a font with a "bold" weight.

<p class = 'bold'>


This is a font with a "bolder" weight.

<p class = 'bolder'>


This is a font with a "lighter" weight.

<p class = 'light'>


This is a font with a "thick" weight.

<p class = 'thick'>


This is a font with a "700" weight.

<p class = 'thicker'>

Letter-spacing

This paragraph has no additional letter-spacing applied.

This paragraph is letter-spaced at 4px.

This paragraph is letter-spaced at -1.5px

Text Decoration

This is default style of the text (none).

This text inherits the decoration of the parent. <p class="inherit">

This is overlined text. <p class="overline">

This is underlined text. <p class="underline">

This is lined-through text.<p class="line-through">

Text Indent {NOT WORKING}

This is an example of text-indent property. First line of our text is indented to the right in 60px. Besides pixels you can also use other measurement units, like pt, cm, em, etc.

Text Shadow {HALF WORKING}

Text-shadow example

Text-shadow with blur effect

Text Transform {CAPITALIZE NOT WORKING}

in this example you can see all the first characters of words turned to capital characters.

<p class = 'caps'>

in this example you can see all the characters of words turned to uppercase characters.

<p id = 'uppercase'>

IN THIS EXAMPLE YOU CAN SEE ALL THE CHARACTERS OF WORDS TURNED TO LOWERCASE CHARACTERS.

<p id="lowercase">

Word-spacing

This paragraph has no additional word-spacing applied.

This paragraph is word-spaced at 30px.

This paragraph is word-spaced at 20px.

This paragraph is word-spaced at -5px.

White-spacing

This paragraph has multiple spaces and a line break, but it will be ignored, as we used the nowrap value.

In the markup we have multiple spaces and a line break.

In the markup we have multiple spaces and a line break, but in the result multiple spaces are ignored.

In the markup we have multiple spaces and a line break.