CSS (extra)

To style the documents. Source notes from CSS.adoc.

How CSS Works?

1. Convert HTML to DOM
2. Fetch resources in HTML (images, links, videos)
3. Browser parses CSS
4. Render tree laid out in structure
5. Page is displayed visually

Methods of applying CSS to a document

1. External stylesheet: External css file styling all HTML documents. Reference using HTML <link> element.
2. Internal stylesheet: An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a <style> element contained inside the HTML.
3. Inline styles (Avoid this): CSS declarations that affect a single HTML element, contained within a style attribute 

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
  Hello World!
</h1>

Attributes/Properties

Name desc
@rules (at-rules) provide instruction for what CSS should perform or how it should behave
body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}
link / visited / hover styles unvisited links pink and visited links green; style when the user hovers over it
a:link {
  color: pink;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}
calc() do simple math within CSS:
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}
class To select a subset of the elements without changing the others, you can add a class to your HTML element
.special {
  color: orange;
  font-weight: bold;
}
list-style-type To remove bullets from html doc
li {
  list-style-type: none;
}
selectors A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro
shorthand font, background, padding, border, and margin are called shorthand properties. This is because shorthand properties set several values in a single line.
/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). */
padding: 10px 15px 15px 5px;

/* equivalent to these four lines of code: */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
transform() various values for transform, such as rotate()
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}