1. Two aspects of any document
    • content - information to be presented
    • style - how information is presented
  2. CSS advantages
    • separation of content from presentation
    • site wide consistency
    • reduce data stranger over a network
    • easy to reformat pages for device portability
    • better accessibility
  3. HTML's main goal is to define content, what is the defining style
    • Cascading Style Sheets 3 (CSS3)
    • Used to specify the presentation of elements separately from the structure of the document
  4. Style sheet
    set of rules
  5. Pseudo Classes
    • 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
  6. Style classes
    • style declarations are preceded by a period
    • .special { color: purple;}

    <h1 class = "special"> Deitel & Associates, Inc.</h1>
  7. Parent v. child styles
    Styles for child elements have higher specificity and take precedence over styles defined over their parent elements
  8. Styles can be defined by
    • Author (developers) a user, or user agent (browser)
    • Author TPO user TPO user agentĀ 
    • TPO - take precedence over
  9. External style
    • styles defined in external style sheets
    • apply to all html documents on a site
    • <link rel="stylesheet" type = "text/css" href = "styles.css"/>
  10. font-size
    • 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
  11. CSS font-weight possible values
    • bold, norma, bolder, lighter
    • boldness can be specified by number from 100-900
  12. Embedded styles
    • styles declared in HTML document's head section
    • Apply to entire html document
    • Must be in head element
  13. Inline styles
    • 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>
  14. CSS properties
  15. Text-decoration
    underline, overline, line-through, blink
  16. text-indent
    indents the first line of text in the element by the specified amount
  17. Text align
    center align, left right
  18. Positioning property
    allows absolute positioning,which provides greater control over where on a page an element resides
  19. z-index
    • allows developer to layer overlapping elements
    • elements with higher z-index values are displayed in front of elements with lower z-index values
  20. Animation 6 parts
    • {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;}
    • }
  21. Browser compatible extensions
    • -webkit: on webkit based browsers like chrome, safari, android and IOS browsers
    • -moz: mozilla firefox
    • -ms: only Microsoft browsers
  22. inline-level elements
    • 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
  23. Block level elements
    • displayed on their own line
    • have virtual boxes around them
    • p
    • all headings (h1-h6)
    • div - grouping like span, but it's block level
  24. CSS can control the backgrounds of block level elements by adding
    • background-color
    • backrground-image
  25. background-image property
    specifies the url of the image
  26. background-position property
    places image on the page using the values top, bottom, center, left and right
  27. Background-repeat property
    • 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
  28. Padding
    • determines the distance between the content inside an element and the edge of the element
    • padding-top, padding-right, etc
  29. Margin
    • Determines the distance between the lament's edge and any outside text
    • transparent can't make it a color
    • margin-top, margin- left etc.
  30. Border is controlled using
    • border-width: thin, medium, thick
    • border-color
    • border-style: hidden, rotten, dashed, solid, double
  31. Display property
    Lets programmer decide if an element is displayed as a black element, inline element, or is not rendered at all
  32. Text-shadow property
    • 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;}
  33. Box-shadow property
    • Adds shadow effect to any block-level element
    • same 4 property values
    • h1{box-shadow: 25px 25px 50px dimgrey
Card Set