CSS Notes — Prefetch Technologies

General rule

Typical CSS format:

selector {
   property: value;
   property2: value;
}

img {
   border-color: green;
   border-width: 3px;
}

Using styling in HTML:

`html`
`head`
   `title`Foo bar</title>
   <style type="text/css">
      li {
          color: purple;
      }
   </style>
</head>

Define your CSS in an external file:

`html`
`head`
   `title`Foo bar</title>
   <link rel="stylesheet" type="text/css" href="/css/layout.css">
</head>

Notes related to color selection:

Reference to the various color types available
CSS provides color systems* Hexadecimal color system color: #000000; (# is referred to as an octothorp)
RGB color system (rgb(0,100,255);
RGBA color system (rgba(0,100,255,.1); can be used to add opacity to an object

Element selector:

p {
  border ...;
}

ID selector:

<p id="myP"</p>

## myP {
   border ...;
}

Class selector:

<p class="myP"</p>

.myP {
  border ...;
}

The * selector selects everything on page:

* {
   border ...;
}

Descendent selector selects descendents:

li a {
   /* CSS all a tags that follow a li */
}

Adjacent selectors:

h4 +ul {
  /* Do something to ul tags adjacent to h4 */
}

Attribute selector:

a[href="http://prefetch.net"] {
   /* do something to a tags with an href to prefetch.net */
}

Select every X element:

ul:nth-of-type(3) :
   /* slect every third ul */
}

Styling a ul (parent) causes the li (children) to inherit the formatting

`ul`
  `li`item1</li>
  `li`item2</li>
</ul>

ul {
   color: red;
}

Styles applied to specific tags will override outer tags due to specificity

Assign a font to a paragraph:

p {
   font-family: "Arial";
   font-size: 200px; /* absolute size in pixels */
   font-size: 2.0em; /* dynamic font size in relation to parent */
}