CSS

• content - information to be presented
• style - how information is presented

• separation of content from presentation
• site wide consistency
• reduce data stranger over a network
• easy to reformat pages for device portability
• better accessibility

• Cascading Style Sheets 3 (CSS3)
• Used to specify the presentation of elements separately from the structure of the document

set of rules

• Give access to information not declared in the HTML document
• ex.
• a:visited *visited link
• a:hover *mouse over link
• a:active *selected link
• a:link *unvisited link

• style declarations are preceded by a period
• .special { color: purple;}

<h1 class = "special"> Deitel & Associates, Inc.</h1>

Styles for child elements have higher specificity and take precedence over styles defined over their parent elements

• Author (developers) a user, or user agent (browser)
• Author TPO user TPO user agent 
• TPO - take precedence over

• styles defined in external style sheets
• apply to all html documents on a site
• <link rel="stylesheet" type = "text/css" href = "styles.css"/>

• relative size preferred over point size
• xx-small, x-small, small, smaller, medium, large, x-large, xx-large
• Or point size
• p{font-size: 0.4em}
• em is the size of the letter M

• bold, norma, bolder, lighter
• boldness can be specified by number from 100-900

• styles declared in HTML document's head section
• Apply to entire html document
• Must be in head element

• styles declared in HTML elements
• only apply to element 
• Do not separate presentation from content
• <p style = "font-size: 20pt; color:deepskyblue;"> this is inline </p>

underline, overline, line-through, blink

indents the first line of text in the element by the specified amount

center align, left right

allows absolute positioning,which provides greater control over where on a page an element resides

• allows developer to layer overlapping elements
• elements with higher z-index values are displayed in front of elements with lower z-index values

• {animation: name timing-function duration delay iteration-count direction;}
• name - of animation
• timing-function - linear, ease, ease in , ease out, cubic bezler
• duration - time
• delay - time after page loads it starts
• iteration-count
• direction - normal, alternate
• @keyframes animationname
• {
• 0% {opacity: 0; left: 50px; top:0px;}
• }

• -webkit: on webkit based browsers like chrome, safari, android and IOS browsers
• -moz: mozilla firefox
• -ms: only Microsoft browsers

• do not change the flow of the document
• img
• a
• em
• strong
• span - groups elements, no formatting, creates container for CSS rules or id attributes for a section

• displayed on their own line
• have virtual boxes around them
• p
• all headings (h1-h6)
• div - grouping like span, but it's block level

• background-color
• backrground-image

specifies the url of the image

places image on the page using the values top, bottom, center, left and right

• tiling of the image
• no-repeat - just one copy
• repeat - tiles vertically and then horizontally
• repeat-x tiles only horizontally
• repeat-y tiles only vertically

• determines the distance between the content inside an element and the edge of the element
• padding-top, padding-right, etc

• Determines the distance between the lament's edge and any outside text
• transparent can't make it a color
• margin-top, margin- left etc.

• border-width: thin, medium, thick
• border-color
• border-style: hidden, rotten, dashed, solid, double

Lets programmer decide if an element is displayed as a black element, inline element, or is not rendered at all

• adds text shadow to any text
• Property has 4 values: horizontal and vertical, offset, blur radius, and color
• h1 {text-shadow: -4px 4px 6px dimgrey;}

• Adds shadow effect to any block-level element
• same 4 property values
• h1{box-shadow: 25px 25px 50px dimgrey