CSS NOTES 1 : Basics, Properties and Units

CSS NOTES 1 : Basics, Properties and Units | CSS NOTES 2 : Positioning

CSS Basics

3 Places to put CSS
Types of styles Where it goes
Inline/Local Inside of a tag in the body of the page. It affects only that tag.
Example: <p style="background:yellow;color:red;">Text</p>
Embedded/ Internal Inside the head of a page. It affects the whole page.
Example:

<style type="text/css">
/*<![CDATA[*/
h1 {background:green;}
.class2 {font: bold 14pt/20pt arial,sans-serif; background:red;}
strong {background:white;font-style:italic;}
/*]]>*/
</style>

External/Linked/Imported Link in the head to all pages that you want to use the styles on.
Example: <link rel="stylesheet" type="text/css" href="css1.css" />

 

CSS Property Categories
Property What You control
Fonts Letter form,size,boldface,italic
text kerning,leading,alignment,case
lists bullets, indentation
colors borders,text,bullets,rules,backgrounds
backgrounds behind the page or behind a single element on a page
margins margins,padding,borders,width,height
positioning exact placement on the screen

 

Units

Relative Length Values
Name of unit Type of unit What it is Example
em EM Dash Width of the letter M for that font 3em
ex x-height Height of the lowercase x for that font 5ex
percentage % Based on the value currently being used, or, in the case of sizes of cantainers, a percentage of the container element. 125 px

 

Absolute Length Values
Name of unit Type of unit What it is Example
px Pixel Basedon the monitors resolution 125 px
pt Point Generally used to describe font size. 1pt=1/72 of an inch. 12pt
pc Pica Generally used to describe font size. 1pc=12pt. 3pc
mm Millimeter   25mm
cm Centimeter   5.1cm
in Inches 1 inch=2.54cm 2.25in