Skip to content

CSS Study Notes


To include an external stylesheet in your HTML, place the following code within the <head> section:

<link rel="stylesheet" href="xxx.css">

Here, xxx.css refers to the CSS file in the same directory. Note: It is advisable to use external style sheets whenever possible (as shown above).


Basic Syntax

selector {
  property: value;

Comparison of Various Selectors

Selector Definition Invocation Specificity
Tag Selector p <p> ... </p> Low
Class Selector .carrot {...} / p.carrot {...} class = "carrot" Medium
ID Selector #first id = "first" High

Selector Groups

Define the same styles for different elements.

h3 {
  color: navy;


/* Font Color */
color: #56a455;

/* Background Color */
background-color: blue;

/* Opacity */
/* Values between 0.0 and 1.0 */
opacity: 0.5;


Font Size

Style Percentage EM Value
h1 200% 2em
h2 150% 1.5em
h3 133% 1.125em
body 100% 1em
/* Font Size */
font-size: 200%;

Font Selection

Note: For font names with multiple words, use quotation marks, e.g., 'Courier New'.

/* Font Selection */
/* Local Fonts */
font-family: "Courier New", Courier, monospace, External Font Name;
/* External Fonts */
@font-face {
  font-family: External Font Name;
  src: url("External Font URL");

Text Formatting

The default value is normal.

/* Bold */
font-weight: bold;

/* Italic */
font-style: italic;

/* Letter Case */
/* uppercase, lowercase, capitalize (first letter capitalized) */
text-transform: uppercase;

/* Underline */
text-decoration: underline;

/* Strikethrough */
text-decoration: line-through;

/* Line Height */
line-height: 1.4em;

/* Alignment */
/* left, right, center, justify (justified) */
text-align: left;


/* Unvisited Link */
a:link {
  color: #ff0000;

/* Visited Link */
a:visited {
  color: #00ff00;

/* Hovered Link */
a:hover {
  color: #ff00ff;

/* Active Link */
a:active {
  color: #0000ff;


Lists, Tables, and Forms

To be added.


To be added.


Order of Property Categories

  • Display & Layout
  • Positioning
  • Box Model
    • Margin
    • Border
    • Padding
  • Dimensions
  • Text Styling
    • Font
    • Text
    • Text Color
  • Background
  • Outline
  • Transparency & Shadows
  • Animation
    • Transitions
    • Transformations
    • Keyframes
  • Miscellaneous
    • Pseudo-classes & Pseudo-elements
    • Quotes
    • Media Queries

Property Order List

Certainly, here is the translated content in colloquial yet professional English:


I hope this translation meets your requirements. If you have any further requests or questions, feel free to ask.

References and Acknowledgments

Original: This post is protected by CC BY-NC-SA 4.0 agreement, should be reproduced with attribution.

This post is translated using ChatGPT, please feedback if any omissions.