Reference Website
1. Text and Fonts
font-family
p { font-family: Arial; } h1 { font-family: Times New Roman; }
font-size
h1 { font-size: 60px; } /* em is dynamic */ span { font-size: 2.0em; }
font-weight
Describe how bold the text is: range from 100 to 900 (100: Lightest 900: Boldest).
normal: Standard weight. Equivalent of 400.
bold: Bold weight. Equivalent of 700.
bolder: Bolder than the inherited font weight.
lighter: Lighter than the inherited font weight.
p { font-weight: 100; /* range from 100 to 800*/ } h1 { font-weight: normal; }
line-height
Describe the line space
/* line-hight */ p { line-height: 2; }
text-align
Describe where the text is
h1 { text-align: center; }
text-decoration
p { text-decoration: underline; } h1 { text-decoration: line-through; }
2. Using Google Fonts
Visit Google Fonts → Select Fronts → Copy Link into your <head> tag
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
To customize in your .css by using font-family
selection { font-family: Indie Flower; }
3. The Box Model
Padding, Margin, Border, and More
Box Model
In a document, each element is represented as a rectangular box. In CSS, each of these rectangular boxes is described using the standard box model.
Each box has four edges:
Margin: space between the border on the outside and sth. else
selection1 { margin-top: 20px; margin-right: 40px; margin-bottom: 50px; margin-left: 100px; } selection2 { margin: [top] [right] [bottom] [left]; /* Clockwise Order*/ } selection3 { margin: 20px 40px 50px 100px; }
Border
selection { border: 2px solid blue; }
Padding: space between the border inside and the content
selection1 { padding: 10px; padding-right: 20px padding-left: 20px; } selection2 { padding-left: 20px; } selection3 { padding-right: 20px }
Content
selection1 { width: 50%; } selection2 { height: 200px; }
4. Creating a Tic Tac Borad
/* Solution*/ h1 { text-align: center; } #left { border-right: 1px solid black; } #right { border-left: 1px solid black; } .hello { border-bottom: 1px solid black; } table tr td{ width: 100px; height: 100px; } table { margin: 10px auto; }