Web Design

Chapter 2   CSS

(1) CSS

∗ CSS: cascading style sheet

▸ CSS describes how HTML elements are to be displayed

▸ A CSS style consists of two components separated by a colon, which is called "style declaration":

property:value
property is the CSS property and value is the value of the property, i.e. color:blue (set the color as blue)

∗ CSS evolution

▸ 1996: CSS1

▸ 1998: CSS2

▸ 1999: CSS3

∗ The unit of font sizes

▸ In the early stage, web designers used "em" as the unit of font size because pixels were not supported back then.

✶ "em" is the unit of the font width in typography (em: equal to the width of the capital M); 1em means the font size is the same as that of the environment

▸ As browsers start to support pixels, people began to use pixels as font size units

▸ Using "em" makes font size management very convinient: if the font size of the parent element is changed, the font size of the child will change accordingly. For example:

<body>
<h1>...</h1>
<p>...<span>...</span>...</p>
</body>
Font sizes are set as follows:
<body>: 16px
<h1>: 1.2em
<p>: 0.8em
<span>: 0.8em
The actual font sizes are: <h1> 19.2 px (16×1.2), <p> 12.8 px (16×0.8), and <span> 10.24 px (12.8×0.8)

∗ Types of CSS styles:

▸ Inline styles, internal style sheets, and external style sheets

∗ Inline styles

▸ An element's style can be set in the style attribute with the following format:

style="property:value;"

▸ For example, center alignment of a paragraph:

<p style="text-align:center;">To be centered with an inline style</p>

▸ A element with multiple styles, e.g.:

<p style="text-align:center; color:red;">Multiple inline styles</p>

▸ Exercise: save dessert1-8.html as dessert1-9.html, and modify as follows:

1. The <h1> tag:
<h1 style="color:red;">Dessert shop</h1>
2. The five <h2> tags:
<h2 style="color:olive;">
dessert1-9

▸ Disadvantages of inline styles:

✶ Unable to share the styles with other elements in the same document or other documents
✶ A style applies to only one element, which is very inefficient
Unless it is very necessary, don't use inline styles

∗ Internal style sheets

▸ The styles may share among elements in the document

▸ To generate an iternal style sheet: add the <style> element in the <head> element as follows:

<style>
selector {
  property1: value1;
  property2: value2;
  ...
}
</style>
selector can be a tag, e.g., setting all paragraphs to blue color:
p {
  color: blue;
}

▸ Exercise: save dessert1-9.html as dessert1-10.html, and modify as follows:

✶ Add the following styles into the <head> element and delete all inline styles
...
<head>
...
<style>
h1 {
  color: red;
  font-size: 2em;
}

h2 {
  color: olive;
  font-size: 1.5em;
}
</style>
</head>
...
✶ Check to see if the result is the same

▸ Multiple selectors are separated by commas, e.g.:

<style>
h1, h2, h3 {
  color: navy;
}
</style>

▸ Disadvantages of internal styles: unable to share with other documents

▸ Unless it is necessary, do not use internal style sheets

∗ External style sheets

▸ A file containing style declarations, which can be share among documents (therefore, all documents can have the same styles)

▸ The extension of the file name should be .css

▸ In the HTML document, add a <link> element to the <head> element to link the external style sheet

▸ Exercise: save dessert1-10.html as dessert2-1.html, and modify as follows:

✶ Create a new file .../webdesign/css/dessert2-1.css and copy the content of <style> to the css file
✶ Delete the <style> element in dessert2-1.html
✶ Add the following link to the <head> element:
<link rel="stylesheet" href="css/dessert2-1.css">
# link: link the external resources
# rel: the relation of the external resources to the document
Check to see if the result is the same

∗ Setting styles using an id or a class

▸ An id attribute can be used to specify a certain tag (id should be unique), e.g.:

<p id="myParagraph">This is my paragraph</p>

▸ A class can be used to specify multiple tags, e.g.:

<p class="similar">This is paragraph 1</p>
<p class="similar">This is paragraph 2</p>
<div class="similar">This is block 1</div>
<div class="similar">This is block 2</div>

▸ Use # and . to select id and class, respectively. Examples:

#myParagraph {
  font-weight: bold;
  margin-top: 1em;
  text-align: center;
}

p.similar {
  color: blue;
  text-align: justify;
}

.similar {
  background-color: yellow;
  line-height: 2em;
}

∗ CSS comments:

/* ... */

∗ Enhancing the browser supports to HTML5 and CSS3

▸ Most modern browsers support HTML5 and CSS3 (implementations may be different)

normalize.css: set default styles for all kinds of browsers

✶ Suggestion: the first of CSS links be <link rel="stylesheet" href="css/normalize.css">

(2) Selecting CSS elements

∗ Child and descendant elements

▸ Child element: element A contains element B directly B is A's child element, e.g.:

<ul>
  <li> ... </li>
  <li> ... </li>
</ul>
li is ul's child element

▸ Descendant element: element A contains element B directly or indirectly B is A's descendant element, e.g.:

<ul>
  <li> ... </li>
</ul>
li is ul's descendant element
<ul>
  <li> ... <a ... > ... </a> ... </li>
</ul>
a is ul's descendant element

∗ CSS selectors

▸ The element type, class, and id selector

SelectionDescriptionExamples
Universal selector All kinds of elements
* { 
  ...
}
Type selector Specify the tag name
<h1>...</h1>
<h2>...</h2>
h1, h2 {
  ...
}
Class selector Specify the class attribute
<div class="note">
<p class="note">
.note {
   ...
}
p.note {
  ...
}
ID selector Specify the id attribute
<p id="intro"> ... </p>
#intro {
  ...
}
Child selector Specify the child elements
<ul>
  <li>A</li>
  <li>B
    <ol>
      <li>C</li>
      <li>D</li>
    </ol>
  </li>
  <li>E</li>
</ul>
ul > li {
  ...
}  A, B, E
Descendant selector Specify the descendant elements
(HTML same as above)
ul li {
  ...
}      A, B, C, D, E
✶ Examples:
HTML:
<ul id="account">
  <li>Sign up</li>
  <li>Sign in</li>
  ...
</ul>

...

<ul id="branch">
  <li>Taichung shop</li>
  <li>Tainan shop</li>
  ...
</ul>

#branch li {
  color: blue;
}
"Taichung shop" and "Tainan shop" affected, but not "Sign up" and "Sign in"

▸ Attribute selector

Selection Description Examples
Existence selector Attribute existent input[name] can select <input type="text" name="username">
Equality selector Specify attribute value input[name="username"] can select <input type="text" name="username">
Prefix selector The attribute value
starts with some string
input[name^="user"] can select <input type="text" name="username">
Suffix selector The attribute value
ends with some string
input[name$="name"] can select <input type="text" name="username">

▸ Examples:

HTML:
<form method="post" action="#">
  <p>Name: <input type="text" name="name"></p>
  <p>
    Sex:
    <label><input type="radio" name="sex" value="F">Female</label> 
    <label><input type="radio" name="sex" value="M">Male</label>
  </p>
  <p><input type="submit" value="Submit"></p>
</form>
CSS:
input[type="text"] {
  padding: 1em 2em;
  border: 1px solid blue;
  color: blue;
  border-radius: 5px;
  outline: none;
}

input[type="text"]:focus {
  color: #ff00ff;
  background-color: lightyellow;
}

input[type="submit"] {
  background-color: lightblue;
}

input[type="submit"]:hover {
  background-color: #9991f5;
}

∗ Priority of CSS settings

▸ If two or more selections map to the same element, the priority is as follows. E.g.: <p id="note"> ... </p>

✶ Highest priority for !important
#note {
  color: red !important;
}
p {
  color: blue;
}
✶ And then: higher priority for more specific selection
p#note {
  color: blue;    /* Higher priority */
}
p {
  color: red;
}
✶ And then: higher priority for later setting
p {
  color: red;
}
p {
  color: blue;    /* Higher priority */
}

▸ Pressing F12 in a browser may open the Web Developer plugin, and we can view the CSS settings and re-set them

(3) Background color and images

∗ Color formats:

▸ Color names, e.g.: color: red;

▸ HEX codes, e.g.: color: #ee3e80;

▸ RGB values, e.g.: color: rgb(100, 100, 90);

▸ HSL values, e.g.: color: hsl(120, 100%, 50%);

∗ Background color

simplest.html

<!doctype html>
<html>
<head>
<title>Simplest page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/simplest.css">
</head>
<body>

</body>
</html>

simplest.css

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background-color: lightblue;
}

∗ Background image

▸ Repeated background image (download: background.jpg)

html, body {
  ...
}

body {
  background: url("../img/background.jpg");
}

▸ Non-repeated: add background-repeat

...

body {
  ...
  background-repeat: no-repeat;
}

▸ Cover the whole page: add background-size

...

body {
  ...
  background-size: 100% 100%;
}

▸ Fixed (fixed background): add fixed (add a lot of texts in body)

...

body {
  background: url("../img/background.jpg") fixed;
  ...
}

(4) Text fonts

∗ Setting fonts

▸ Font-family

body {
  font-family: Georgia, Times, serif;
}
h1, h2 {
  font-family: Arial, Verdana, sans-serif;
}
h3 {
  font-family: "Courier New", Courier, monospace;
}

▸ The fonts have to be install in users' browsers

▸ Font-family: each font is tried successively until one is available

▸ Common fonts, serif, sans-serif, monospace, etc., are usually placed at the end of font-family

▸ Designers' suggestion: do not use more than 3 fonts in a page to keep it beautiful

∗ Font size

body {
  font-size: 2em;    /* or 200%, 32px */
}

∗ Text styles

▸ Font

font-weight: bold;
font-style: italic;    /* or normal, oblique */

▸ Text transformation

text-transform: uppercase;    /* or lowercase, capitalize */

▸ Text decoration

text-decoration: underline;    /* or overline, line-through, blink, none */

∗ Text layout

▸ Line height, spacing, alignment, indentation

line-height: 1.4em;
letter-spacing: 0.2em;
word-spacing: 1em;
text-align: justify;       /* or left, right, center */
vertical-align: text-top;  /* or baseline, sub, super, top, middle, bottom, text-bottom */
text-indent: 4em;

▸ First word and first line of a paragraph

p:first-letter {
  font-size: 200%;
}
p:first-line {
  font-weight: bold;
}

▸ Shadows

text-shadow: 1px 1px 0 #000000; /* Shadow's horizontal position, verticle position, blur radius, color */
✶ Multiple shadows
p#first {
  font-size: 10em;
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
✶ Examples: Design Shack, Line25
shadow1
shadow2
shadow3
shadow4
shadow5
shadow6
✶ FIRE:
#fire {
  text-align: center;
  font-family: "League-Gothic", Courier;
  font-size: 15em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
     0     0   20px #fefcc9,
    10px -10px 30px #feec85,
   -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
   -20px -60px 60px #cd4606,
     0   -80px 70px #973716,
    10px -90px 80px #451b0e;
}

∗ Link styles

a:link {
  color: deeppink;
  text-decoration: none;
}
a:hover {
  color: deepskyblue;
  text-decoration: underline;
}
a:active {
  color: darkcyan;
}

∗ Mouse/cursor styles

a {
  cursor: auto;    /* or crosshair, default, pointer, move, text, wait, help */
}
a {
  cursor: url(...) 10 10, auto;
}

▸ Image cursor size: 10x10 pixels

▸ Image size should be smaller than 32x32

auto: if the image is not dispayable, return to default

▸ Assignment 1

(5) Box

∗ Box size

▸ Units: pixel (related to pixel), percentage (related to parent size), em (related to text size)

▸ E.g., width, min-width, max-width, height, min-height, max-height

▸ Example:

✶ HTML:
<div>
  <p>No matter where from France were the desserts produced and no matter if the flavor is simple country or fine banquet, French desserts always used the highest quality, freshest, and in-season ingredients. French desserts have a long history, and modern desserts came from France.</p>
</div>
✶ CSS:
div {
  width: 30em;
  height: 20em;
  background-color: #7f7f7f;
}
p {
  width: 75%;
  height: 75%;
  background-color: #d2d2d2;
}
box1

▸ Size settings may apply to images:

✶ HTML:
<img id="myImg" src="myImg.png">
✶ CSS:
img#myImg {
  width: 12em;
  height: 12em;
}
✶ Or scale according to the containing element:
img#myImg {
  width: 100%;
  height: auto;
}

∗ Attributes of boxes: borders, margins, and paddings

▸ Various attribute settings:

a: border-top-width, b: border-right-width, c: border-bottom-width, d: border-left-width
e: margin-top, f: margin-right, g: margin-bottom, h: margin-left
i: padding-top, j: padding-right, k: padding-bottom, l: padding-left
box2

▸ Borders: visible, invisible, width, color, style

border-width: 3px;
border-style: solid;    /* Or dotted, dashed, double, groove, ridge, inset, outset */
border-color: #0088dd;
border: 3px dotted #0088dd;
✶ Styles of the four borders
# border-top-width, border-right-width, border-bottom-width, border-left- width
# border-top-style, border-right-style, border-bottom-style, border-left-style
# border-top-color, border-right-color, border-bottom-color, border-left- color

▸ Margins: distance between the box and its neighbors

▸ Paddings: distance between the border and the content

▸ Examples:

p {
  margin-top: 1em;
  border-width: thin;    /* Or medium, thick */
}

div {
  border-width: 2px;        /* Top, bottom, left, right: 2px */
  border-width: 2px 1px;    /* Top and bottom: 2xp, left and right: 1px */
  border-width: 2px 1px 1px 2px;    /* Top, right, bottom, left */
  padding: 3px;
}

∗ Round corner

border-radius sets round corners, e.g.:

HTML:
<p class="one">Round corners</p>
CSS:
p {
  border: 5px solid #ee3e80;
  padding: 1.5em;
  width: 6em;
  border-radius: 10px;
}

▸ Four corners of a box:

border-radius: 10px;         /* Four corners */
border-radius: 10px 20px;    /* Upper left and bottom right, upper right and bottom left */
border-radius: 10px 20px 30px 40px;    /* Upper left, upper right, bottom right, bottom left */

▸ Try to make a circle

∗ Overflow

▸ The content exceeds the box size

hidden: hide the overflow
scroll: show the scroll bar

▸ E.g.:

p {
  overflow: hidden;
}
div {
  overflow: scroll;
}

∗ Alighment of blocks

▸ Default: left

▸ Center: margin: 0 auto; (0 is arbitrary)

▸ Right: float: right;

∗ Properties of block and inline elements

▸ Block elements:

✶ Default width: same as the containing element
✶ Default height: determined by the content
✶ Default flow: from top to bottom

▸ Inline elements:

✶ Default width: determined by the content
✶ Default height: determined by the content
✶ Default flow: from left to right

∗ Block or inline mode

▸ Elements may be displayed as inline or block elements

display: inline as an inline element (flow from left to right as a text)
display: block as a block element (flow from top to bottom as a block)
display: inline-block as an inline block element (flow from left to right as a block)
display: none hide the element

▸ Example: navigation buttons

navButton.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation buttons</title>
<link rel="stylesheet" href="css/navButton.css">
</head>
<body>

<nav>
  <ul>
    <li><a href="#">Main page</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

</body>
</html>

navButton.css
body {
  background-color: lightblue;
}

nav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

nav li {                    /* Least amount of settings here, most in <a> */
  display: inline-block;    /* Allow left-to-right arrangement */
  margin-right: 1em;
}

nav li a {                  /* Most settings here */
  display: block;           /* Allow padding */
  color: black;
  text-decoration: none;
  padding: 0.5em 2em;       /* Set button size with padding */
  background-color: lightgray;
  border-radius: 10px;
  border: 1px solid black;  
}

▸ Result:

navButton.png

▸ Exercise: create the following navigation buttons

navButton2.png
✶ All buttons attach to each other; first and last button with left and right round corners, respectively
✶ Hint:
# Remove <li> spance between inline elements: attach the opening tag to the previous closing tag
<li><a href="#">Main page</a></li><li>
    <a href="#">Products</a></li><li>
    <a href="#">Services</a></li><li>
# Set the <a> element in the first and last <li> elements:
nav ul li:first-child a {
  ...
}

nav ul li:last-child a {
  ...
}

∗ Box shadows

box-shadow: add shadows to a box

▸ E.g.:

✶ HTML:
<p class="one">Various shadow styles, paragraph 1</p>
<p class="two">Various shadow styles, paragraph 2</p>
<p class="three">Various shadow styles, paragraph 3</p>
<p class="four">Various shadow styles, paragraph 4</p>
<p class="five">Various shadow styles, paragraph 5</p>
✶ CSS:
p {
  margin-left: 1.5em;
  background-color: rgb(244, 218, 176);
  padding: 1.5em;
  width: 10em;
  display: inline-block;
}

.one {
  box-shadow: -5px -5px #555555;
}

.two {
  box-shadow: 5px 5px 5px #555555;
}

.three {
  box-shadow: 5px 5px 5px 5px #555555;
}

.four {
  box-shadow: 0 0 10px #555555;
}

.five {
  box-shadow: inset 0 0 10px #555555;
}

▸ Note:

✶ Three numbers: horizontal offset, vertical offset, and shadow color
✶ Four numbers: horizontal offset, vertical offset, blur radius, and shadow color
✶ Five numbers: horizontal offset, vertical offset, blur radius, shadow spread, and shadow color

▸ Results:

shadow7

∗ Exercise: background and box shadows

▸ Save dessert2-1.html and dessert2-1.css as dessert2-2.html and dessert2-2.css, respectively, and modify as follows:

✶ HTML:
# Change the CSS link: <link rel="stylesheet" href="css/dessert2-2.css">
# Add id in the <img> element, <img id="dessertImg" src="img/dessert.jpg" alt="Dessert image">
✶ CSS:
# Set the background color to light blue
# Add black borders, round corners, and the "paragraph 3" style in the above to the image
dessert2-2

(6) Lists

∗ List styles

list-style-type: list item styles (numbers or markers)

ol {
  list-style-type: decimal;    /* or: decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman */
}
ul {
  list-style-type: disc;    /* or: none, circle, square */
}

list-style-image: use images markers

ul {
  list-style-image: url("../img/star.png");
}

▸ Exercise: save dessert2-2.html and dessert2-2.css as dessert2-3.html and dessert2-3.css, respectively, and modify as follows:

✶ Downolad star.png star.png and save it into the img/ directory
✶ HTML:
# Modify the CSS link: <link rel="stylesheet" href="css/dessert2-3.css">
# Add attribute id to the <ul> element: <ul id="open">
✶ CSS: set the star image as the list item markers and add some margin to the items
dessert2-3

(7) Tables

▸ Considerations of table styles

✶ There should be paddings in table cells so that texts would not touch the cell borders
✶ The heading styles should be different from those of other rows (e.g., bold face)
✶ Make the styles of adjacent rows different for better looking
✶ Numbers should align to the right

▸ Exercise: save dessert2-3.html and dessert2-3.css as dessert2-4.html and dessert2-4.css, respectively, and modify as follows:

✶ HTML:
# Modify the CSS link: <link rel="stylesheet" href="css/dessert2-4.css">
# Remove the border attribute and add the id attribute to the table element: <table id="branch">
✶ CSS:
# Table: total width, top and bottom borders, no borders insidethe table
# Heading: font size, top and bottom borders, text alignment, background color
# Other rows: different background colors for even and odd rows, mouse hover effect
# Set paddings
...

/* Table styles */
table#branch {
  width: ...;
  border-bottom: ...;
  border-collapse: collapse; 
}

table#branch th {
  text-align: ...;
  font-size: ...;
  border-top: ...;
  border-bottom: ...;
  background-color: ...;
}

table#branch tr:nth-child(odd) {
  background-color: ...;
}

table#branch tr:nth-child(even) {
  background-color: ...;
}

table#branch tr:hover {
  background-color: ...;
}

table#branch th,
table#branch td {
  padding: ...;
}
✶ Result:
dessert2-4

▸ Assignment 2

(8) Gradient

∗ Types of gradient

▸ Linear gradient

✶ Background color gradient from top to bottom
background: linear-gradient(<color1>, <color2>);
background: linear-gradient(to bottom, <color1>, <color2>);
✶ From left to right
background: linear-gradient(to right, <color1>, <color2>);
✶ From upper left to bottom right
background: linear-gradient(to bottom right, <color1>, <color2>);
✶ Multiple colors
background: linear-gradient(<color1>, <color2>, <color3>);

▸ Radial gradient

✶ Evenly spaced color stops
background: radial-gradient(red, green, blue);
✶ Unevenly spaced
background: radial-gradient(red 5%, green 15%, blue 60%);

(9) Forms

∗ Form styles

▸ No one likes to fill forms; hence, form styles should be attractive

▸ Exercise: save dessert2-4.html and dessert2-4.css as dessert2-5.html and dessert2-5.css, respectively, and modify as follows:

✶ HTML:
# Modify the CSS link: <link rel="stylesheet" href="css/dessert2-5.css">
# Add the following three fields after the "sex" field
<p>Mobile phone: <input id="mobile" type="text" name="mobile"></p>
<p>Email: <input id="email" type="email" name="email"></p>
<p>Web page: <input id="web" type="text" name="web"></p>
Fig.2-1
✶ CSS:
# Style of the text input fields: light yellow background, round corners, paddings, with three icons, red borders for mouse hover
formStyle1
formStyle2
# HTML: add attributes to input fields for CSS selection
- Add the id attribute to the form element for CSS selection: <form id="member" ...>
- Add class text to text input fields with yellow background (username, password, mobile, email, web):
<input class="text" type="text" ...>
- Add another class padding to input fields with icons (mobile, email, web):
<input id="mobile" class="text padding" type="text" ...>
<input id="email" class="text padding" type="email" ...>
<input id="web" class="text padding" type="text" ...>
# CSS: set styles for various input and select elements (font-size, color, background-color, border-radius, margin-bottom, background-position, background-repeat)
- Text styles:
/* Form styles */
#member .text {
  font-size: ...;
  color: ...;
  ...
}
- On-focus and mouse hover of input and select classes (:focus, :hover)
#member .text:focus,
#member .text:hover,
#member select:hover {
  border: ...;
}
- mobile, email, and web fields: set the background figures (mobile.png mobile.png, email.png email.png, web.png web.png), and add some paddings (background-image, padding)
#member input#mobile {
  background-image: ...;
  background-repeat: ...; 
  background-position: ...; 
}
#member input#email {
  background-image: ...;
  ... 
}
#member input#web {
  background-image: ...;
  ... 
}
#member input.padding {
  padding: ...;
}
- Font sizes, paddings, and round corners for the <select> element (font-size, padding, border-radius)
#member select {
  font-size: ...;
  ...
}
# Styles of the submit button:
btn1
- Text color, padding, background color, color gradient (color, padding, background-color, linear-gradient)
#member input[type="submit"] {
  color: ...;
  padding: ...;
  background: linear-gradient(...);
}
- Mouse hover: color, border, border-top, background color, color gradient (color, border, border-top, background-color, background)
    btn2
#member input[type="submit"]:hover {
  background: linear-gradient(...);
}
# Set the styles of the <fieldset> and <legend> elements:
fieldset
- <fieldset>: width, border, round corners, padding, text alignment (width, border, border-radius, padding, text-align)
- <legend>: background color, border, round corners, padding, text alignment (background-color, border, border-radius, padding, text-align)
/* Fieldset settings */
#member fieldset {
  width: ...;
  ...
}
#member legend {
  background-color: ...;
  ...
}

▸ Assignment 3

(10) Layouts

▸ HTML treats every element as a box, and an element can be a block box or an inline box

▸ Normal flow:

✶ The default flow of block boxes is from top to bottom, and the default width of a block box equals the width of its containing element
✶ The default flow of inline boxes is from left to right, and the width of an inline element is determined by its content

▸ Another feature of boxes: forms the "layout" of the page

∗ Element positioning:

▸ Relative positioning: relative to the element's original position, we may set en element's top, bottom, left, or right offset

The original place will remain and positions of other elements will not be affected

▸ Absolute positioning: relative to the reference element, we may an element's the top, bottom, left, or right offset

The element exits the normal flow and its original place is taken
✶ Reference element:
# One of the element's ancestors which has positioning setting (searched one parent after another)
# If none of the ancestors has positioning setting, the reference element is <body>

▸ Fixed position: relative to the browser position, we may set an element's top, bottom, left, or right offset

The element exists the normal flow, its original place is taken, and it stays fixed relative to the browser

▸ Example: the history of bicycles (Reference)

bicycle.html
<!doctype html>
<html>
<head>
<title>The evolution of bicycles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bicycle.css">
</head>  
<body>

<div>
  Life is like riding a bicycle. To keep your balance, you must keep moving.”
  — Albert Einstein, Physicist
</div>
  
<div>
  In 1817 Baron von Drais invented a walking machine that would help him
  get around the royal gardens faster:   two same-size in-line wheels, the
  front one steerable, mounted in a frame which you straddled. The device was
  propelled by pushing your feet against the ground, thus rolling yourself and
  the device forward in a sort of gliding walk.
</div>

<div>
  The machine became known as the Draisienne or hobby horse. It was made
  entirely of wood. This enjoyed a short lived popularity as a fad, not being
  practical for transportation in any other place than a well maintained pathway
  such as in a park or garden.
</div>

<div>
  The next appearance of a two-wheeled riding machine was in 1865, when pedals
  were applied directly to the front wheel. This machine was known as the velocipede
  ("fast foot"), but was popularly known as the bone shaker, since it was also made
  entirely of wood, then later with metal tires, and the combination of these with
  the cobblestone roads of the day made for an extremely uncomfortable ride. They
  also became a fad, and indoor riding academies, similar to roller rinks, could
  be found in large cities.
</div>

</body>
</html>


bicycle.css
div {
  padding: 0.5em;
  border: 1px solid blue;
}

div#position {
  color: red;
  border: none;
}
✶ Setting different positionings:
1. Initially, the flow of div elements is normal (from top to bottom) and their widths are the same as the containing element (i.e., body)
2. Relative positioning: set the div#position element to be relative positioning, with top and left offsets
the element remains in the normal flow (only its position changed), other div elements remain their orginal positions
...

div#position {
  ...
  top: 1em;
  left: 6em;
  position: relative;
}
3. Absolute positioning: next modify the div#position element to be absolute positioning with reference to the body element the element exits the normal flow with its orginal place taken by the next element
...

div#position {
  ...
  position: absolute;
}
4. Fixed positioning: set the div#position element to be fixe positioning (with reference to the browser)
the element exits the normal flow with its original place taken by the next element and the element remains fixed when scrolling
...

div#position {
  ...
  position: fixed;
}
✶ Block overlapping: blocks may overlap each other after re-positioning
z-index is used to determine which block should be on top
div {
  ...
  border: 1px solid blue;
  position: relative;
  z-index: 10;
  background-color: lightblue;
}
...

div#position {
  ...
  z-index: 5;
  background-color: lightgreen;
}
# Higher value of z-index means the block is on a higher level
# A block has to have the position setting for the z-index to be available

∗ Example: fixed-menu layout

▸ The menu is fixed (won't move when scrolling) on the left side and content is on the right side

fixedMenu.html

<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="css/fixedMenu.css">
</head>  
<body>

<div id="menu">
  <h1>Menu</h1>
  <p><a href="#">Traffic</a></p>
  <p><a href="#">Lodging</a></p>
  <p><a href="#">Resteraunts</a></p>
</div>

<div id="content">
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
  <p>Page content</p>
</div>

</body>
</html>

fixedMenu.css:

html, body {
  padding: 0;
  margin: 0;
}

#menu {
  position: fixed;
  width: 6em;
  background-color: lightblue;
}

#content {
  margin-left: 6em;
  background-color: lightgreen;
}

p {
  margin: 0;
  padding: 0;
}

position

∗ Floating elements

▸ If a block is set "float," it will exit the normal flow but the content of the next elements will flow around it. This is called "text wrapping."

bicycle.html example:

bicycle.css
div {
  padding: 0.5em;
  border: 1px solid blue;
}

div#position {
  float: left;
  width: 15em;
  color: red;
  border: none;
}
div#position element exits the normal flow, with its original place taken and the text of the next element wrapping around

▸ Collapse of the containing element

✶ In the following, all <li> elements are floating and there is nothing left in <ul>, so it colapses (the height is zero).
floatMenu.html
<!doctype html>
<html>
<head>
<title>Floating elements: prevent the parent element from collapsing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/floatMenu.css">
</head>
<body>

<ul id="nav">
  <li><a href="#">Main page</a></li>
  <li><a href="#">Figures</a></li>
  <li><a href="#">Design</a></li>
  <li><a href="#">Tools</a></li>
</ul>

</body>
</html>
floatMenu.css
ul#nav {
  margin: 0;
  padding: 0;
  border: 1px solid red;
}

ul#nav li {
  float: left;
  list-style: none;
  margin-right: 2em;
}
floatMenu
✶ Methods of preventing from collapsing: refer to here and here. One of the solutions: set overflow: auto for the parent element
floatMenu.css
ul#nav {
  ...
  overflow: auto;
  border: 1px solid red;
}
floatMenu2
<ul> keeps its height (determined by its content)

∗ Layout examples

▸ Use different techniques to achieve the following layout

layout

▸ Layout with float

Floating the two blocks such that they flow from left to right
layoutFloat.html:
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="css/normalize.css"> 
<link rel="stylesheet" href="css/layoutFloat.css"> 
</head> 
<body> 

<div id="wrapper">
  <nav>This is nav</nav>
  <header>This is header</header>
  <div id="container">
    <aside>This is aside</aside>
    <div id="content">This is content</div>
  </div>
  <footer>This is footer</footer>
</div>

</body>
</html>
#wrapper contains: nav, header, #container, footer
#container contains: aside, #content
layoutFloat.css:
* {
  box-sizing: border-box;
}

hmtl, body {
  height: 100%;
}

div#wrapper {
  margin: 0 auto;
  width: 80%;
}

nav {
  height: 4em;
  border: 1px solid red;
}

header {
  height: 6em;
  border: 1px solid blue;
}

div#container {
  overflow: auto;
}

aside {
  width: 20%;
  height: 20em;
  float: left;
  border: 1px solid green;
}

div#content {
  width: 80%;
  height: 20em;
  float: left;
  border: 1px solid brown;
}

footer {
  border: 1px solid olive;
}
box-sizing: size of a box includes borders, so adding/deleting borders will not increase/decrease the size
html, body: same height as that of the browser, no borders, no paddings
#wrapper: the block containing every thing, aligned center, 80% of the body width
nav, header: heights
#container: the block containing aside and #content, preventing from collapse
aside: 20% of the width of #wrapper, fixed height, flow left
#content: 80% of the width of #wrapper, same height as that of aside, also flow left (so that aside and #content can stay together)
✶ Add borders to all blocks for better observation

▸ Layout with flex

Flex means "flexible boxes"
layoutFlex.html (similar to layoutFloat.html)
...
<link rel="stylesheet" href="css/layoutFlex.css">

...
layoutFlex.css (similar to layoutFloat.css):
...

div#container {
  display: flex;
  flex-direction: row;
}

aside {
  height: 20em;
  flex: 1 2 20%;
  background-color: green;
}

div#content {
  height: 20em;
  flex: 1 1 80%;
  border: 1px solid brown;
}

...
display: flex: diplayed as a flexible box
flex-direction: the flow direction is "row" (i.e., from left to right, which is also the default direction)
flex: 1 2 20%: expand automatically with the scale of other elments as 1. When the page width is not enough, shrink 2 times, the base width is 20% of the parent element. May also be written as follows:
flex-grow: 1;       /* 0 means no expansion, 1 means expand with the same scale as others */
flex-shrink: 2;     /* if not enough width, shrink 2 times */
flex-basis: 20%;    /* base width is 20% of parent */

▸ Float with grid

The page is treated as grids
layoutGrid.html (similar to layoutFlex.html)
...
<link rel="stylesheet" href="css/layoutGrid.css">

...
layoutGrid.css (similar to layoutFlex.css):
...

div#container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

aside {
  height: 20em;
  border: 1px solid green;
}

div#content {
  height: 20em;
  border: 1px solid brown;
}

...
display: grid;: diplayed as a grid
grid-template-columns;: the widths of the grids are 1/4 and 3/4, respectively (i.e., represented by fractions)

▸ Assignment 4

(11) CSS preprocessors and frameworks

∗ CSS preprocessors

▸ A CSS preprocessor has its own CSS syntax, like a programming language (having logic and being more efficient). The actuall CSS files will be generated later.

▸ Products: Less, Sass, Stylus, ...

▸ Stylus examples:

✶ Ommit braces, colons, and semi-colons:
body
  background-color blue
✶ Variables:
blue = #475cd1
red = #be2525
body
  background-color blue
  color red
  border 1px solid @color
✶ Functions and parameters:
background-color(color)
  background-color color

body
  background-color(blue)

∗ CSS frameworks (front-end frameworks)

▸ There are many pre-designed styles available, and developers just add certain classes for style setting

▸ Products: Bootstrap, Foundation, Bulma, ...