Hands on HTML & CSS

Last updated Jan 5, 2023 Edit Source

# Hands on HTML & CSS

This is my practices on HTML&CSS in order to develop the front-end of websites.

# HTML Basics

# HTML element

A HTML document describes the content of a web page, which contains many HTML elements:

Example: in Hello world!, ‘’ is an opening tag, ‘class=“nice”’ is an attribute and its value, ‘Hello world!’ is enclosed text content, and ‘’ is a closing tag.

# Basic HTML

A basic index.html is:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My test html page</title>
</head>
<body>
    <p><strong>HTML tag: h1~h5</strong></p>
    <h1>HTML Basics</h1>
    <h2>2023年，崭新的一年</h2>
    <h3>2023年，崭新的一年</h3>
    <!-- <h4>2023年，崭新的一年</h4>
    <h5>2023年，崭新的一年</h5>
    <h6>2023年，崭新的一年</h6> -->

    <p><strong>HTML tag: img</strong></p>
    <img src="images/2023.jpg" alt="my test image" width="600" height="400">

    <p><strong>HTML tag: p</strong></p>
    <p>新的转机和闪闪的星斗，正在缀满没有遮拦的天空。这是5000年的象形文字，这是未来人们凝视的眼睛👁。</p>

    <p><strong>HTML tag: strong</strong></p>
    <p>新的转机和闪闪的星斗，正在缀满没有遮拦的天空。这是5000年的象形文字，<strong>这是未来人们凝视的眼睛👁。</strong></p>

    <p><strong>HTML tag: Unordered List</strong></p>
    <p>At Mozilla, we're a global community of</p>
    <ul>
        <li>technologists</li>
        <li>thinkers</li>
        <li>builders</li>
    </ul>
    <p>working together…</p>

    <p><strong>HTML tag: Ordered List</strong></p>
    <p>At Mozilla, we're a global community of</p>
    <ol>
        <li>technologists</li>
        <li>thinkers</li>
        <li>builders</li>
    </ol>
    <p>working together…</p>

    <p><strong>HTML tag: a</strong></p>
    <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">mdn HTML Basics</a>
</body>

The page based on it:

e3ed2a84-b999-4113-b138-310a22c9ab35

# CSS Basics

CSS basics

CSS is all about style (how it looks) of web content. It concerns the following questions:

How do I make text red?
How do I make content display at a certain location in the (webpage) layout?
How do I decorate my webpage with background images and colors?

# File Layout

1
2
3
4
5
6
7
$ tree -L 2
.
├── images
│   └── 2023.jpg
├── index.html
└── styles
    └── style.css

We store the CSS content in a .css file under the styles folder. The content of style.css is like:

1
2
3
p {
    color: red;
}

and imports it in index.html:

1
2
3
4
5
6
7
<head>
    <meta charset="UTF-8">
    <title>My test html page</title>
  
    <!-- import css here -->
    <link href="styles/style.css" rel="stylesheet"> 
</head

which makes all the  elements red, as following:

# Different Types of Selectors

There are 5 basic types of selectors.

Selector name	What does it select	Example
Element selector (sometimes called a tag or type selector)	All HTML elements of the specified type.	`p` selects `<p>`
ID selector	The element on the page with the specified ID. On a given HTML page, each id value should be unique.	`#my-id` selects `<p id="my-id">` or `<a id="my-id">`
Class selector	The element(s) on the page with the specified class. Multiple instances of the same class can appear on a page.	`.my-class` selects `<p class="my-class">` and `<a class="my-class">`
Attribute selector	The element(s) on the page with the specified attribute.	`img[src]` selects `<img src="myimage.png">` but not `<img>`
Pseudo-class selector	The specified element(s), but only when in the specified state. (For example, when a cursor hovers over a link.)	`a:hover` selects `<a>`, but only when the mouse pointer is hovering over the link.

First, find the output from Google Fonts that you previously saved from What will your website look like?. Add the link element somewhere inside your index.html’s head (anywhere between the <head> tags). It looks something like this:

1
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

Next, delete the existing rule you have in your style.css file. It was a good test, but let’s not continue with lots of red text.

Add the following lines (shown below), replacing the font-family assignment with your font-family selection. The property font-family refers to the font(s) you want to use for text. This rule defines a global base font and font size for the whole page. Since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family.

1
2
3
4
html {
  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */
  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google Fonts */
}

The page is like this now:

Now let’s set font sizes for elements that will have text inside the HTML body (<h1>, <li> and ). We’ll also center the heading. Finally, let’s expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

which changes the font-size and other styles:

# The Box Model

Most HTML elements can be thought of as boxes sitting on the top of other boxes. CSS is about setting the size, color and position of boxes.

Three boxes sat inside one another. From outside to in they are labelled margin, border and padding

Each box taking up space on your page has properties like:

padding, the space around the content. In the example below, it is the space around the paragraph text.
border, the solid line that is just outside the padding.
margin, the space around the outside of the border.

In this section we also use:

width (of an element).
background-color, the color behind an element’s content and padding.
color, the color of an element’s content (usually text).
text-shadow sets a drop shadow on the text inside an element.
display sets the display mode of an element. (keep reading to learn more)

# Changing the Page Color

1
2
3
html {
  background-color: #00539f;
}

# Styling the Body

1
2
3
4
5
6
7
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

width: 600px; This forces the body to always be 600 pixels wide.
margin: 0 auto; When you set two values on a property like margin or padding, the first value affects the element’s top and bottom side (setting it to 0 in this case); the second value affects the left and right side. (Here, auto is a special value that divides the available horizontal space evenly between left and right). You can also use one, two, three, or four values, as documented in Margin Syntax.
background-color: #FF9500; This sets the element’s background color. This project uses a reddish orange for the body background color, as opposed to dark blue for the `` element. (Feel free to experiment.)
padding: 0 20px 20px 20px; This sets four values for padding. The goal is to put some space around the content. In this example, there is no padding on the top of the body, and 20 pixels on the right, bottom and left. The values set top, right, bottom, left, in that order. As with margin, you can use one, two, three, or four values, as documented in Padding Syntax.
border: 5px solid black; This sets values for the width, style and color of the border. In this case, it’s a five-pixel–wide, solid black border, on all sides of the body.

# Positioning and Styling the Main Page Title

1
2
3
4
5
6
h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

text-shadow applies a shadow to the text content of the element. Its four values are:

The first pixel value sets the horizontal offset of the shadow from the text: how far it moves across.
The second pixel value sets the vertical offset of the shadow from the text: how far it moves down.
The third pixel value sets the blur radius of the shadow. A larger value produces a more fuzzy-looking shadow.
The fourth value sets the base color of the shadow.

# Centering the Image

1
2
3
4
img {
  display: block;
  margin: 0 auto;
}

Next, we center the image to make it look better. We could use the margin: 0 auto trick again as we did for the body. But there are differences that require an additional setting to make the CSS work.

The body is a block element, meaning it takes up space on the page. The margin applied to a block element will be respected by other elements on the page. In contrast, images are inline elements, for the auto margin trick to work on this image, we must give it block-level behavior using display: block;

Now, the page looks like this:

🪴 无人之路