CSS

To make your website beautiful, we still need to write it.

/* comment */
p {
    color: orange;
}

Usage

• External

  <link rel="stylesheet" href="styles/style.css">
  

• Internal

  <style>
      p { color: orange; }
  </style>
  

Selector

p {} /* <p> */
p, li {}  /*<p> and <li> */
li em {} /* all <em> inside <li> */
li > em {} /* direct <em> son of <li> */
h1 + p {} /* the first {p} after <h1> */

 /* class='special' */
.special {}
li.special {} /* <li class='special'> */

/* id='index' */
#index {}

/* pseudo-class (state) */
a:link {color: pink;}
a:visited {color: green;}
a:hover {text-decoration: none;}

/* pseudo-element */
p::first_line {}

/* attribute */
a[attr] {} /* a with attr */
a[attr=value] {} /* a with attr = value */
a[attr^=value] {} /* a with attr starts with value */
a[attr$=value] {} /* a with attr ends with value */
a[attr*=value] {} /* a with value in attr */

/* all */
* {}

Function

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
  transform: rotate(0.8turn)
}

@ Rules

/* import from another file */
@import 'styles2.css'; 

Cascading and Inheriting

• Cascading

  p {color: blue;}
  p {color: red;}
  
  /* then <p> is red */
  

• Priority

  <h1 class="main-heading">This is my heading.</h1>
  

  More specific, higher priority.

  .main-heading { 
      color: red; 
  }
  
  h1 { 
      color: blue; 
  }
  
  /* <h1> is red */
  

• Inherit

  <p>We can change the color by targetting the element with a selector, such as this <span>span</span>.</p>
  

  body {
      color: blue;
  }
  
  /* span is also blue. */
  

  <ul>
      <li>Default <a href="#">link</a> color</li>                             // blue
      <li class="my-class-1">Inherit the <a href="#">link</a> color</li>      // green
      <li class="my-class-2">Reset the <a href="#">link</a> color</li>        // black
      <li class="my-class-3">Unset the <a href="#">link</a> color</li>        // green
  </ul>
  

  body {
      color: green;
  }
  
  .my-class-1 a {
      color: inherit; /* inherit body */
  }
  
  .my-class-2 a {
      color: initial; /* the same with default */
  }
  
  .my-class-3 a {
      color: unset; /* return to default */
  }
  

• override

  sometimes it is just useful.

  code {
      background-color: #ffffff !important;
  }
  

References

• background

  background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
  /* equals to */ 
  background-color: red;
  background-image: url(bg-graphic.png);
  background-position: 10px 10px;
  background-repeat: repeat-x;
  background-scroll: fixed;