CSS Syntax

  • Selector { Property:Value; Property:Value }

    • Simple selectors

      Selector Example Example Description
      #id #firstname Select elements with id=”firstname”
      .class .intro Select all elements with class=”intro”
      element.class p.intro Select <p> elements with class=”intro”
      * * Select all elements
      element p Select all <p> elements
      element,element,… div, p Select all <div> elements and all <p> elements

    • Combinator selectors: select elements based on a specific relationship between them

      Combinator Example Example Description
      descendant selector (space) div p Select all <p> elements inside <div> elements
      child selector (>) div > p Select all <p> elements where the parent is a <div> element
      adjacent sibling selector (+) div + p Select the first <p> element that is placed immediately after <div> elements
      general sibling selector (~) p ~ url Select every <url> element that is preceded by a <p> elements

    • Pseudo-class selectors: select elements based on a certain state

        selector:pseudo-class {
      property: value;
  }
      Selector Example Example Description
      :active a:active Select active link
      :focus input:focus Select the <input> element that has focus
      :hover a:hover Selects links on mouse over
      :visited a:visited Selects all visited links
      … … …

      Check this link for more CSS pseudo classes.

    • Pseudo-elements selectors: select and style a part of an element

        selector::pseudo-element {
      property: value;
  }
      Selector Example Example Description
      ::after p::after Insert something after the content of each <p> element
      ::before p::before Insert something before the content of each <p> element
      ::first-letter p::first-letter Selects the first letter of each <p> element
      ::first-line p::first-line Selects the first line of each <p> element
      ::marker ::marker Selects the markers of list items
      ::selection p::selection Selects the portion of an element that is selected by a user

    • Attribute selectors: select elements based on an attribute or attribute value

      Selector Example Description
      [attribute] [target] Selects all elements with target attribute
      [attribute=value] [target=”_blank”] Selects all elements with target=”_blank”
      [attribute~=value] [title~=”flower”] Selects all elements with a title attribute that contains a space-separated list of words, one of which is “flower”
      [attribute|=value] [lang|=”en”] Selects all elements with a lang attribute value starting with “en”
      [attribute^=value] a[href^=”https”] Selects all <a> elements with a href attribute value starting with “https”
      [attribute$=value] a[href$=”.pdf”] Selects all <a> elements with a href attribute value ending with “.pdf”
      [attribute*=value] a[href*=”w3schools”] Selects all <a> elements with a href attribute value containing the substring “w3schools”

Add CSS

  • External CSS
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
...
</html>
  • Internal CSS ```html
... 

- Inline CSS
```html
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
  • Cascading Order
    1. Inline style
    2. External and internal style sheets. The down style can override the upper style.
    3. Browser default.

Properties

  • Color
<p style="background-color: rgb(60, 179, 113)">Green Background</p>
<p style="background-color: #3cb372">Green Background</p>
<p style="background-color: hsl(147, 50%, 47%)">Green Background</p>
<p style="background-color: rgba(60, 179, 113, 0.5)">Half Transparent Green Background</p>
  • Backgrounds
body {
  background-color: lightblue;
}

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat; /* Other values: repeat-x, repeat-y */
  background-position: right top;
  background-attachment: fixed; /* Other values: scroll */
}

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
  • Box Model:
    • Parts from inside out: Content, Padding, Border, Margin
    • Width and height of an element: When you set the width and height properties of an element with CSS, you just set the width and height of the content area.
      • Total width of an element = width of content area + left padding + right padding + left border + right border
      • Total height of an element = height of content area + top padding + botton padding + top border + bottom border
      • Unless you set box-sizing property.
    • Example
      p {
      border: 2px solid red; /* border-width, border-style, border-color */
      border-radius: 5px;
  }

  /* padding is similar with margin */
  p {
      margin: 25px 50px 75px 100px; /* margin-top, marin-right, margin-bottom, margin-left */
  }

  p {
      margin: 25px 50px; /* top and bottom margin, right and left margin */
  }

  /* Margin Collapse: Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. The following actual margin is 50px. */
  h1 {
      margin: 0 0 50px 0;
  }
  h2 {
      margin: 20px 0 0 0;
  }