CSS Recap

    avatar
    Created by
    Khin Htet Htet Htar

    Cards (53)

    • CSS

      Cascading Style Sheet
      View source
    • CSS

      A language used for describing how documents are presented visually, how they are arranged and styled
      View source
    • CSS Rule-set/Pattern

      Selector points to the HTML element you want to style<|>Declaration block contains one or more declarations separated by semicolons<|>Each declaration includes a CSS property name and a value, separated by a colon<|>Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces
      View source
    • CSS Example

      • #Make the background color of body text lightblue
      • body { background-color: lightblue; }
      • #Make all <h1> elements' text color white and align center
      • h1 { color: white; text-align: center; }
      • selector
      • property
      • value
      View source
    • Including Styles

      • Inline CSS
      • Embedded CSS
      • External CSS
      View source
    • Inline CSS

      You can write your styles directly inline on each element. But this is NOT A GOOD IDEA most of the time.
      View source
    • Embedded CSS

      Styles are embedded inside of a <style> element. It makes it impossible to share the styles among multiple documents. Not recommended either!
      View source
    • External CSS

      Write your styles in a .css file and import the file into the html document using a <link> element in the head of your html document. Recommended!
      View source
    • CSS Measurement Units

      • Lengths
      • Absolute length units
      • Relative length units
      • Percentages
      • Numbers
      View source
    • Absolute length units

      cm - centimeters<|>mm - millimeters<|>in - inches (1in = 96px = 2.54cm)<|>px - pixels (1px = 1/96th of 1in)<|>pt - points (1pt = 1/72 of 1in)<|>pc - picas (1pc = 12 pt)
      View source
    • Relative length units

      em - Relative to the font-size of the element (2em means 2 times the size of the current font)<|>rem - Relative to font-size of the root element<|>% - Relative to the parent element
      View source
    • CSS Font

      • font-family - Specify the font family for text
      • font-size - Specify the font size of text
      • font-style - Set whether a font should be styled with a normal, italic, or oblique
      • font-variant - normal, small-caps
      • font-weight - The font-weight property sets how thick or thin characters in text should be displayed
      View source
    • font

      The font CSS sets all the different properties of an element's font.
      View source
    • CSS Font Stack Website https://www.cssfontstack.com
      View source
    • CSS Color

      • Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values
      • CSS <color> property - This property is used to set the text color for HTML elements
      • CSS <background-color> property - This property is used to set the background color for HTML elements
      View source
    • CSS Text Properties

      • Text Alignment
      • Text Decoration
      • Text Transforming
      • Spacing
      View source
    • Text Alignment

      The text-align CSS property sets the horizontal alignment of a block element or table-cell box.
      View source
    • Text Decoration

      The value text-decoration: none; is often used to remove underlines from links.<|>The other text-decoration values are used to decorate text.
      View source
    • text-decoration

      A shorthand for multiple text decoration properties.
      View source
    • Text Transforming

      CSS text-transform property sets controls text case and capitalization.
      View source
    • Spacing

      letter-spacing: sets the horizontal spacing behavior between text characters<|>word-spacing: property sets the length of space between words and between tags.
      View source
    • Coding Exercise 1

      1. Style the following logo. Style <h1> with the following styles:
      2. uppercase all the letters, without touching the html
      3. set the font-family to be 'Courier New', 'monospace'
      4. center align the text
      5. set the font weight to 100
      6. make the text size 40 px
      7. set spacing between letters to 20 px
      8. add a wavy plum underline (plum is the color)
      View source
    • HTML for Coding Exercise 1

      • <!DOCTYPE html><html><head><title>Hipster Logo</title><link href="app.css"></head><body><h1>Purple Grain</h1></body></html>
      View source
    • More CSS Properties

      • CSS Backgrounds
      • CSS Borders
      • CSS Margins
      • CSS Paddings
      • CSS Height and Weights
      View source
    • CSS Selectors

      • Basic Selectors
      • Element selector
      • ID selector
      • Class selector
      • Universal selector
      • Group Selector
      • Attribute Selector
      • Descendant Selector
      • Direct Child Selector
      View source
    • Element selector

      p { text-align: center; color: red; }
      View source
    • ID selector

      #para1 { text-align: center; color: red; }
      View source
    • Class selector

      .center { text-align: center; color: red; }
      View source
    • Universal selector

      * { text-align: center; color: blue; }
      View source
    • Group Selector

      h1, h2, p { text-align: center; color: red; }
      View source
    • Attribute Selector

      input[type="password"] { border-color: red; }
      button[id="signup"]{ background-color:yellow; }
      a{ text-decoration:none; color:black; }
      a[href="#about"]{ text-decoration:underline dotted purple 5px; }
      View source
    • Descendant Selector

      Apply a style rule to a particular element only when it lies inside a particular element. E.g., the style rule will apply to <a> element only when its parent is <li>
      View source
    • Direct Child Selector

      The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendent elements further down the hierarchy don't match.
      View source
    • Universal selector

      Applies styles to all elements on the page
      View source
    • Group Selector

      Applies styles to multiple elements at once (e.g. h1, h2, p)
      View source
    • Selector Example
      View source
    • Attribute Selector

      Selects elements based on their attribute values
      View source
    • Attribute Selector

      • "skillstation"
      • "skillstation"
      View source
    • Attribute Selector Example

      1. input[type="password"] {border-color: red;}
      2. button[id="signup"]{background-color:yellow;}
      3. a{text-decoration:none;color:black;}
      4. a[href="#about"]{text-decoration:underline dotted purple 5px;}
      View source
    • Descendant Selector

      Applies a style rule to a particular element only when it lies inside a particular element
      View source
    See similar decks