2. CSS Basic

• Four elements of CSS rule

1) Selector 2) Declaration 3) Property 4) Value

p /* selects all p elements */ {

    /* Declaration block */

    background-color /*property*/ : blue; /*value*/
} 

/* element selector -selects all HTML elements */
p {

}

/* id selector - # prefix */
<div id="latest">
#latest {

}

/* class selector - . prefix */
<div class="latest">
.latest {

}

/* elements with class selector */
<div class="latest">
div.latest {

}

/* descendant selector - only affect its children */
<div id="blog">
  <h1>Latest News</h1>
  <div>
    <h1>Today's Weather</h1>
    <p>The weather will be sunny</p>
  </div>
  <p>Subscribe for more news</p>
</div>
<div>
  <h1>Archives</h1>
</div>

/* only applied on blog div's h1 */
#blog h1 {

}

/* only applied to Today's Weather */
#blog div h1 {
    
}

/* child selector - only directly contained!(no child-of-child) */
/* only applied to "Latest News" */
#blog > h1 {
  color: blue;
}

/* special keywords for states */
a:hover {

}

Box Model

All web pages are configured by boxes

boxmodel boxconfig

/* content size */
div {
  width: 1px;
  min-width: 1px;
  max-width: 2px;
  height: 1px;
  min-height: 1px;
  max-height: 2px;
}


/* padding - included in background */
/* padding box width = content width + padding-left + padding-right */
/* padding box height = content height + padding-top + padding-bottom */
div {
  padding-bottom: 4px;
  padding-top: 4px;
  padding-left: 5px;
  padding-right: 2px;
}

/* border */
div {
  border-width: thin;
  border-width: medium;
  border-width: thick;
  border-style: solid;
  border-style: dotted;
  border-style: solid;
  border-style: double;
}

/* margin - not included in background */
div {
  margin-top: 4px;
  margin-bottom: 1px;
  margin-left: 5px;
  margin-right: 3px;
}

Document Flow

How to calculate HTML element position?

default: block and inline

block: occupy whole horizontal width and new line before and after new elements - stack on top of each other like boxes - div is block element(can change to inline using display) inline: multiple elements fit in one line - img is inline by default

biline

Alignment

1) text alignment:

p {
  text-align: center;
}

2) HTML Element Alignment

• center align: we have to set child to block display and use margin: auto ```css .parent { border: 4px solid red; }

.child { width: 50%; padding: 20px; border: 4px solid green; margin: auto; } ```

• left/right align -> float: right/left