Front-End Notes | CSS Fundamentals

I. Introduction to CSS

CSS is mainly used to beautify web pages and lay them out.

1.1 Limitations of HTML

HTML focuses only on the semantics of content. For example, <h1> only indicates that it is a heading, while <p> only indicates that it is a paragraph, and so on.

When only HTML is used, web pages look unattractive. Although HTML can apply simple styles, doing so is extremely cumbersome and bloated.

In other words, HTML is mainly used to build the structure and display element content.

1.2 The Role of CSS

CSS is short for Cascading Style Sheets and is also called a CSS style sheet or cascading style sheet.

CSS is also a markup language. It is mainly used to set the text content (font, size, alignment, etc.), the appearance of images (width and height, border styles, margins, etc.), and the layout and visual styles of HTML pages.

Simply put, CSS can beautify HTML and make page layouts simpler.

1.3 CSS Syntax Rules

A CSS rule consists of two main parts: a selector and one or more declarations.

选择器 {属性:值 属性:值}

The selector is the HTML tag to which the CSS style will be applied, while the braces contain the specific styles set for that object.

Properties and property values appear as “key-value pairs.”

1.4 CSS Code Style

Recommended code style:

1. Style formatting

   • Expanded format

     h3 {
     	color: blue;
     	font-size: 12px;
     }

2. Letter case in styles

   • Style selectors, property names, and property-value keywords should all use lowercase letters except in special cases.

3. Spacing rules

   • Keep one space before a property value, after the colon;
   • Keep one space between the selector and the brace.

II. Basic CSS Selectors

2.1 The Role of CSS Selectors

The role of selectors is to select different tags according to different needs. Simply put, they are used to select tags.

2.2 Selector Categories

Selectors are divided into basic selectors and compound selectors.

A basic selector consists of a single selector.

Basic selectors also include tag selectors, class selectors, id selectors, and universal selectors.

2.3 Tag Selectors

Use an HTML tag name as the selector to categorize tags by name and assign a uniform CSS style to a particular type of tag on the page.

Syntax

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}

Purpose: Select all tags of a particular type, such as all <div> tags or all <p> tags.

Advantage

It can quickly apply a uniform style to all tags of the same type on a page.

Disadvantage

It cannot apply differentiated settings and can only select all tags of the current type.

2.4 Class Selectors

If you want to select different tags differently, either one tag or several tags, you can use a class selector.

Syntax

.类名 {
	属性1: 属性值1;
	...
}

Example

.red {
	color: red;
}
<div class=`red`> 红色 </div>

Class selector mnemonic: Define the style with a dot, apply it in the structure with a class; one or more, and the most commonly used in development.

Notes

1. Long names or phrases can be represented with hyphens.
2. Do not use names made up entirely of numbers or Chinese characters; try to use English letters instead.
3. Names should be meaningful so that others can understand the purpose of the class name at a glance.

Multiple Class Names

We can assign multiple class names to a tag to achieve more selection options. Each of these class names can select the tag. Put simply, one tag has multiple names.

1. How to use multiple class names

   <div class="red fong35">Huffie</div>

   • Write multiple class names in the tag’s class attribute
   • Multiple class names must be separated by spaces
   • The tag can then have the styles of each of these class names

2. Advantages of multiple class names

   • They save CSS code and make unified changes very convenient
   • Multiple class selectors are used more often when layouts become more complex later on

2.5 id Selectors

An id selector can assign a specific style to an HTML element marked with a particular id.

HTML elements use the id attribute to set the id selector, while an id selector in CSS is defined with ”#”.

Syntax

#id名{
	属性: 属性值1;
	...
}

Mnemonic: Define the style with #, apply it in the structure with id; it can only be used once, and no one else should use it.

2.6 Universal Selectors

In CSS, the universal selector is defined with ”*”. It selects all elements on the page.

Syntax

* {
	属性1: 属性值1;
	...
}

1. The universal selector does not need to be invoked; it automatically applies styles to all elements
2. It is used only in special cases

2.7 Summary of Basic Selectors

Basic selector	Purpose	Characteristics	Usage	Syntax
Tag selector	Selects all tags of the same type	Cannot make differentiated selections	Often used	p {color: red;}
Class selector	Selects 1 or more tags	Can select according to requirements	Used very often	.nav{color: red;}
id selector	Can select only 1 tag at a time	The ID attribute can appear only once in each HTML document	Generally used together with js	#nav{color: red;}
Universal selector	Selects all tags	Selects too many, including some that are not needed	Used in special cases	* {color: red;}

III. CSS Font Properties

CSS Fonts properties are used to define the font family, size, weight, and text style.

3.1 Font Family

CSS uses the font-family property to define the font family of text.

h2 {font-family: "Microsoft Yahei";}
p {font-family: Arial, "Times New Roman";}

• You can specify multiple fonts, separated by commas

  The browser will use the first font whenever possible. If the first font is not installed on the user’s computer, the browser will check the remaining fonts in order.

• If a font name consists of multiple words, enclose it in quotation marks

• Try to use the system’s default fonts to ensure that every user’s browser can display them correctly

  Common fonts: “Microsoft Yahei”, tahoma, arial, “Hiragino Sans GB”

3.2 Font Size

CSS uses the font-size property to define the font size.

p {font-size 20px;}

• The default text size in Google Chrome is 16px
• Different browsers may display different default font sizes, so we should give the font size an explicit value whenever possible
• You can specify the text size for the entire page on the body

3.3 Font Weight

CSS uses the font-weight property to set the weight of the text font.

.bold {font-weight: bold;}
.bold {font-weight: 700;}

Parameters: normal means normal, bold means bold, and numbers from 100-900 can also represent font weight.

In actual development, we recommend using numbers: 400 for normal, 700 for bold.

3.4 Text Style

CSS uses the font-style property to set the style of text.

Property	Purpose
normal	Default value; the browser displays a normal font style
italic	The browser displays an italic font style

Note: We rarely make text italic. Instead, we often change italic tags (em, i) to normal.

3.5 Font Shorthand Property

Font properties can combine text styles into a single declaration, which saves more code.

Syntax

div {font: font-style font-weight font-size/line-height font-family;}

Example

font: italic 700 16px "Microsoft Yahei"

• When using the font property, you must write values in the order shown in the syntax above. The order cannot be changed, and the properties are separated by spaces
• Properties that do not need to be set can be omitted, but the font-size and font-family properties must be retained; otherwise, the font property will not work

3.6 Summary of Font Properties

Property	Meaning	Notes
font-size	Font size	The usual unit is px; always include the unit
font-family	Font	“Microsoft Yahei”, tahoma, arial, “Hiragino Sans GB”
font-weight	Weight	Bold is 700/bold, non-bold is 400/normal, and numbers have no unit
font-style	Style	Italic is italic, normal is normal, and normal is commonly used
font	Shorthand property	Shorthand properties have a required order that cannot be changed arbitrarily; the font size and font family are mandatory

IV. CSS Text Properties

CSS Text properties can define the appearance of text, such as text color, text alignment, text decoration, text indentation, and line spacing.

4.1 Text Color

The color property is used to define the color of text.

div {color: red;}

Representation	Property value
Predefined color value	red, green, blue, pink
Hexadecimal	#FF0000, #123456, #666666
RGB code	rgb(255,0,0) or rgb(100%,0%,0%)

4.2 Text Alignment

The text-align property is used to set the horizontal alignment of text content within an element.

div {text-align: center;}

Property value	Explanation
left	Left-aligned (default)
right	Right-aligned
center	Centered

4.3 Text Decoration

The text-decoration property specifies decorations added to text, such as underlines, strikethroughs, and overlines.

div {text-decoration: underline;}

Property value	Description
none	None (most commonly used to remove link underlines)
underline	Underline (commonly used)
overline	Overline (almost never used)
line-through	Strikethrough (almost never used)

4.4 Text Indentation

The text-indent property is used to specify the indentation of the first line of text, usually to indent the first line of a paragraph.

p {text-indent: 2em;}

By setting this property, the first line of the element can be indented by a specified length, which can even be negative.

em is a relative unit equal to the text size of the current element.

4.5 Line Spacing

The line-height property is used to set the distance between lines (line height), controlling the distance from one line of text to another.

p {line-height: 26px;}

Line spacing=top spacing+text height+bottom spacing. Changing line height changes the two upper and lower spacing values.

4.6 Summary of Text Properties

Property	Meaning	Notes
color	Text color	Usually uses base 16
text-align	Text alignment	Sets the horizontal alignment of text
text-indent	Text indentation	Used to indent the first line of a paragraph by two characters text-indent: 2em
text-decoration	Text decoration	Add an underline with underline; remove it with none
line-height	Line height	Controls the distance between lines

V. Ways to Include CSS

5.1 The Three Types of CSS Style Sheets

According to where CSS styles are written (or how they are included), CSS style sheets can be divided into three main types:

1. Inline style sheets (inline)
2. Internal style sheets (embedded)
3. External style sheets (linked)

5.2 Internal Style Sheets

An internal style sheet is written inside an html page. All CSS code is extracted and placed separately in a <style> tag. Setting CSS with an internal style sheet is also known as embedded inclusion.

<style>
    div {
        color: red;
    }
</style>

• In theory, the <style> tag can be placed anywhere, but it is generally placed in the <head> tag.
• This method can control the element styles of the entire page
• The code structure is clear, but it does not completely separate structure and style

5.3 Inline Style Sheets

An inline style sheet sets CSS styles in the style attribute inside an element tag. It is suitable for modifying simple styles and is also commonly called inline inclusion.

<p style="color: red;">Hello world.</p>

• style is actually an attribute of a tag
• The content inside the double quotation marks must follow CSS syntax rules
• It can control only the style of the current tag
• It is too cumbersome to write and is not recommended for extensive use. Consider it only when adding a simple style to the current element.

5.4 External Style Sheets

Actual development uses external style sheets, which are suitable when there are many styles. The key idea is to write the styles separately in a CSS file and then include that CSS file in the HTML page.

Including an external style sheet involves two steps:

1. Create a style file with the .css extension and put all CSS code in this file.
2. In the HTML page, use the <link> tag to include this file

<link rel="stylesheet" href="css文件路径">

Property	Purpose
rel	Defines the relationship between the current document and the linked document. Here it must be set to “stylesheet”, meaning that the linked document is a style sheet file
href	Defines the URL of the linked external style sheet file, which can be either a relative path or an absolute path

5.5 Summary of Ways to Include CSS

Style sheet	Advantage	Disadvantage	Usage	Scope
Inline style sheet	Convenient to write and has high priority	Mixes structure and style	Used less often	Controls one tag
Internal style sheet	Partially separates structure from style	Does not completely separate them	Often used	Controls one page
External style sheet	Completely separates structure from style	Must be included	Used most often	Controls multiple pages

VI. Chrome Developer Tools

Chrome provides a very useful set of developer tools for debugging our HTML structure and CSS styles.

6.1 Opening Developer Tools

Right-click the page and select Inspect Element, or press F12.

6.2 Using Developer Tools

1. HTML is on the left, and CSS styles are on the right
2. Use Ctrl+滚轮 to enlarge the code font size
3. In the CSS styles on the right, you can change values and inspect colors
4. Use Ctrl+0 to restore the browser size
5. If you click an element and find that no styles appear on the right, the class name or style inclusion is very likely incorrect
6. If styles appear but have a yellow exclamation mark in front of them, a style property has been written incorrectly

This article refers to Teacher Pink’s video tutorial from Heima Programmer. Heima Programmer Teacher Pink’s introductory front-end video tutorial: https://www.bilibili.com/video/BV14J4114768