CSS Notes Page 1

Cascade Order of Precedence
1. Style Attributes in the Tag Elements
2. Style Tags in the <HEAD> section
3. External Style Sheet Files
4. Browser Defaults
Anchor Example:
```
       <STYLE Type = "Text/Css"></STYLE>
       <STYLE Type = "Text/Css"></STYLE>
       <STYLE Type = "Text/Css"></STYLE>
       <STYLE Type = "Text/Css"></STYLE>
     
```
Move the Mouse Over Me!
Syntax
- 3 Places for Styles
  1. Style Sheets in the <TAG> Elements
```
      <TAG Style = "Property(1 - n):Value(1 - n)">
        Normal Tag Stuff
      </TAG>
    
```
  2. Style Sheets in the <HEAD> Section
```
      <HEAD>
        <STYLE Type = "Text/CSS"></STYLE>
      </HEAD>
    
```
  3. Style Sheets in External Files
```
      <HEAD>
        <LINK Rel = "StyleSheet" Type = "Text/CSS" Href = "FileName.css" />
      </HEAD>
    
```
The file should not contain any HTML tags
Save with a ".css" extension
Group Similarly Styled Tag Elements
<STYLE Type = "Text/CSS"></STYLE>
Use Quotes Around Multiple Word Property Values in the <HEAD> Section
<STYLE Type = "Text/CSS"></STYLE>
Class Selector

Use the Class Selector to Make Multiple Styles on a Tag Element

<STYLE Type = "Text/CSS"></STYLE>

<STYLE Type = "Text/CSS"></STYLE>

<TAG Class = "Right">
This will right justify

<TAG Class = "Right">
This will Left justify

Id Selector

Use the Id Selector to Make Styles on a Single Tag Element

<STYLE Type = "Text/CSS"></STYLE>

<TAG Id = IdName>
This will apply the Style to All of That TAG element with That IdName

BackGround Properties

Examples:

  <STYLE Type = "Text/CSS>
    <!-- BODY {BackGround-Image:URL("FileName"); BackGround-Position:Top Left} -->
  </STYLE>

Property	Description	Values
BackGround	Sets all in one declaration	BackGround-Color BackGround-Image BackGround-Repeat BackGround-Attachment BackGround-Position
BackGround-Attachment	Sets whether it's fixed	Scroll or Fixed
BackGround-Color	Sets BackGround Color	Color-RGB Color-Hex Color-Name Color-Tranparent
BackGround-Position	Sets the Starting Position	Top Left Top Center Top Right Center Left Center Center Center Right Bottom Left Bottom Center Bottom Right X-% Y-% X-pos Y-pos
BackGround-Repeat	If/How Image repeats	Repeat Repeat-X Repeat-Y No-Repeat

Text Properties

Examples:
```
            <TAG Style = "Text-Property:Value">
          
```
- Color: ColorName
- Direction: LTR or RTL
- Letter-Spacing: 16px
- Text-Align:Center
- Text-Align:Left
- Text-Align:Right
- Text-Align:Justify
- Text-Indent: 1cm
- Text-Transform:UpperCase, LowerCase or Capitalize

Property	Description	Values
Color	Sets the Color	Color
Direction	Sets Text direction	LTR or RTL
Letter-Spacing	Increases/Decreases between	Normal Length
Text-Align	Alignment	Left Right Center Justify
Text-Decoration	Adds a decoration	None Underline Overline Line-Through Blink
Text-Indent	Indents the first line of Text in an element	Length or a %
Text-Transform	Controls the Letters in an element	None Capitalize UpperCase LowerCase
White-Space	Sets how it's handled	Normal Pre NoWrap
Unicode-Bidi		Normal Embed Bidi-Override
Word-Spacing	Increase/Decrease Spacing Between Words	Normal Length

Font

Property	Description	Values
font	property for setting all the font attributes	font-style font-variant font-weight font-size/line-height height font-family caption icon menu message-box small-caption status-bar
font-family	list of font family names	family-name
font-size	sets the size	xx-small x-small medium large x-large smaller larger length %
font-size-adjust	specifies an aspect value	none number
font-stretch	condenses or expands the font	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded utra-expanded
font-style	sets the font style	normal italic
font-variant	small caps or normal	normal small-caps
font-weight	sets the weight	normal bold bolder lighter 100 thru 900

Borders

Border-Style:OutSet, Inset, Ridge, Groove, Double, Solid, Dashed, Dotted

Property	Description	Values
Border	Sets them all	Border-Width Border-Style Border-Color
Border-Bottom	Sets bottom border	Border-Bottom-Width border-Style Border-Color
Border-Bottom:Color	Sets the color of the bottom border	Border-Color
Border-Bottom:Style	Sets the Style of the bottom border	Border-Style
Border-Bottom:Width	Sets the Width	Thin Medium Thick Length
Border-Color	Sets the color of the 4 borders	ColorName
Border-Left	Sets all properties for the left border	Border-left-width Border-Style Border-color
Border-Right	Sets all properties for the Right border	Border-Right-width Border-Style Border-color
Border-Top	Sets all properties for the Top border	Border-Top-width Border-Style Border-color
Border-Left	Sets all properties for the left border	Border-left-width Border-Style Border-color
Border-Style	Sets the Style	None Hidden Dotted Dashed Solid Double Groove Ridge Inset OutSet
Border-Width	Sets the width	Thin Medium Thick Length

Margin - defines the space around elements

Property	Description	Values
Margin	Sets them all	Margin-Top Margin-Right Margin-Left Margin-Bottom
Margin-Bottom	Bottom margin	Auto Length %
Margin-Left		Auto Length %
Margin-Right		Auto Length %
Margin-Top		Auto Length %

Padding - Defines padding between element border and content

Padding-Top:(n)cm
Padding-Bottom:(n)cm

Property	Description	Value
Padding	sets them all	Padding-Top Padding-Right Padding-Left Padding-Bottom
Padding-Top	sets Top Padding	Length %
Padding-Bottom		Length %
Padding-Left		Length %
Padding-Right		Length %

List Items

Using an Image as the Bullet
List-Style-Image:URL("FileName")

Property	Description	Value
List-Style	Sets all	List-Style-Type List-Style-Position List-Style-Image
List-Style-Image	Sets Image as LI Mark	None URL
List-Style-Position	Sets Marker in the list	Inside OutSide
List-Style-Type	Sets LI Marker type	None Disk Circle Square Decimal Decimal-Leading-Zero Lower-Roman Upper-Roman Lower-Alpha Upper-Alpha Lower-Greek Upper-Greek Lower-Latin Upper-Latin Hebrew Armenian Georgian CJK-Ideographic Hiragana Katakana Hiragana-Iroha Katakana-Iroha
Marker-Offset		Auto Length

Dimension Properties

Controls the Height and width of an element
Example:
<TAG Style = "Line-Height:5cm">
<STYLE Type = "Text/Css"><!-- DD {Line-Height:5cm} --</STYLE>

Property	Description	Value
Line-Height	Distance between lines	Normal Number Length %
Max-Height	Max Element Height	None Length %
Max-Width	Max Element Width	None Length %
Min-Height	Min Element Height	Length %
Min-Width	Min Element Width	Length %
Width	Element Width	Auto Length %

Classification

Controls Element Display Properties

Used to float elements inside one another

Used to Change the cursor appearance

Property	Description	Values
Clear	Sets the sides Where other Floating elements are not allowed	Left Right Both None
Cursor	Cursor Display	URL Auto CrossHair Default Pointer Move E-Resize Ne-Resize Nw-Resize N-Resize Se-Resize Sw-Resize S-Resize W-Resize Text Wait Help
Display	Element Display	None Inline Block List-Item Run-in Compact Marker Table Inline-Table Table-Row-Group Table-Header-Group Table-Footer-Group Table-Row Table-Column-Group Table-Column Table-Cell Table-Caption
Float	Appearing inside one another	Left Right None
Position	Use this all the time	Static Relative Absolute Fixed
Visibility		Visible Hidden Collapse

Element Positioning

Property	Description	Values
bottom	Sets how far the bottom edge is, relative to the parent bottom edge	auto % length
clip	The Element is clipped to this shape	shape auto
left	Sets how far the left edge is, relative to the left edge of the parent	auto % length
overflow	Sets what happens if the content overflows it's area	visible hidden scroll auto
right	Sets how far the right edge is, relative to the right edge of the parent	auto % length
top	Sets how far the top edge is, relative to the parent's top edge	auto % length
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %
z-index	Sets the stack order of an element	auto number

Pseudo Class

Anchor Examples:
<STYLE Type = "Text/Css"></STYLE>
<STYLE Type = "Text/Css"></STYLE>
<STYLE Type = "Text/Css"></STYLE>
<STYLE Type = "Text/Css"></STYLE>
1. Uses Same <TAG> but with different Class Attributes, it can group effects
2. Hover must follow Link and Visited
3. Active Must Follow Hover
4. Class Names are not Case Sensitive
Pseudo-Class and CSS Classes can be combined
<STYLE Type = "Text/Css"></STYLE&g
<A Class = "Red" Href = "Filename">
The First Child Pseudo-Class
Matches a spacified Element that is the first Child of another Element
Example - This will match every first <DD> after an <LI>
<STYLE Type = "Text/Css"></STYLE>

Pseudo-Class	Purpose
Active
Hover
Link
Visited
:First-Child
:Lang

Pseudo-Elements - Only works on Block level elements

Adds Effects to some selectors or parts of some selectors

Pseudo-Element	Purpose
First-Letter	Adds the Style to the first letter of text
First-Line	Adds the Style to the first Line of an Element's text

The @Media Rule

Changing the font for screen or printer
@Media Screen TAG.test{font-family:veranda,sans-serif}
@Media Print TAG.test {font-family:times,serif}

Different Media Types

Type	Description
all	Used for all Media Types
aural	Speech and sound synthesizers
braille	braille tactile feedback devices
embossed	paged braille printers
handheld	used for small or handheld devices
print	used for print
projection	used for projectors
screen	computers
tty
tv

Hosted by www.Geocities.ws