CSS NOTES 1 : Basics, Properties and Units

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

CSS Basics

• CSS stands for Cascading Style Sheets and is a way to control the presentation of XHTML.
• CSS is not HTML or XHTML, but works with it to control presentation of the HTML or XHTML elements on the page.
• CSS rules can create styles that can be applied as a group to a tag on a page, like a word processor would.
• A CSS rule looks like this:
  selector{property:value;}
  For example:
  strong{color:red;} would make all strong tags on the page red.
  • The selector can be an html element selector, class selector, ID selector, or others, and tells the browser what you are formatting
  • Properties identify what is being defined.
  • Values are assigned to a property to define its nature. A value can be a keyword such as "yes" or "no," a number, or a percentage.

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> 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