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;
}