CSS Fundamentals

       
字数统计: 843字   |   阅读时长: 5min

CSS Fundamentals

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages.

CSS Syntax

CSS consists of selectors and declarations:

1
2
3
4
selector {
  property: value;
  another-property: another-value;
}

For example:

1
2
3
4
h1 {
  color: blue;
  font-size: 24px;
}

Ways to Include CSS

1. External CSS

1
2
3
<head>
  <link rel="stylesheet" href="styles.css">
</head>

2. Internal CSS

1
2
3
4
5
6
7
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>

3. Inline CSS

1
<p style="color: red; font-size: 16px;">This is a paragraph.</p>

CSS Selectors

Selectors determine which elements the styles will be applied to.

Basic Selectors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Element selector */
p {
  color: gray;
}

/* Class selector */
.highlight {
  background-color: yellow;
}

/* ID selector */
#header {
  font-size: 32px;
}

/* Universal selector */
* {
  margin: 0;
  padding: 0;
}

Combinators

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Descendant selector (elements inside other elements) */
article p {
  font-style: italic;
}

/* Child selector (direct children only) */
ul > li {
  list-style-type: square;
}

/* Adjacent sibling selector (element immediately after) */
h2 + p {
  font-weight: bold;
}

/* General sibling selector (all siblings after) */
h2 ~ p {
  color: purple;
}

Attribute Selectors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Elements with a specific attribute */
a[target] {
  color: red;
}

/* Elements with specific attribute value */
input[type="text"] {
  border: 1px solid gray;
}

/* Elements with attribute value containing a word */
[class~="card"] {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Pseudo-classes and Pseudo-elements

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
/* Pseudo-classes (special states) */
a:hover {
  text-decoration: underline;
}

button:focus {
  outline: 2px solid blue;
}

li:first-child {
  font-weight: bold;
}

li:nth-child(odd) {
  background-color: #f2f2f2;
}

/* Pseudo-elements (specific parts of elements) */
p::first-line {
  font-variant: small-caps;
}

p::before {
  content: "→ ";
}

p::after {
  content: " ←";
}

The CSS Box Model

Every HTML element is a box consisting of:

  • Content: The actual content of the element
  • Padding: Space between the content and the border
  • Border: A line around the padding
  • Margin: Space outside the border
1
2
3
4
5
6
div {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}

By default, width and height only set the content dimensions. The total width of an element is:
width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Box-sizing Property

1
2
3
4
/* Makes width/height include content, padding, and border */
* {
  box-sizing: border-box;
}

Typography

1
2
3
4
5
6
7
8
9
10
11
12
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: justify;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 1px;
  word-spacing: 3px;
  color: #333;
}

Web Fonts

1
2
3
4
5
6
7
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/mycustomfont.woff2') format('woff2'),
       url('fonts/mycustomfont.woff') format('woff');
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Colors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.example {
  /* Keyword */
  color: red;
  
  /* Hex */
  background-color: #ff0000;
  
  /* RGB */
  border-color: rgb(255, 0, 0);
  
  /* RGBA (with opacity) */
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  
  /* HSL (hue, saturation, lightness) */
  outline-color: hsl(0, 100%, 50%);
  
  /* HSLA (with opacity) */
  text-shadow: 1px 1px 3px hsla(0, 100%, 50%, 0.7);
}

CSS Cascade, Specificity, and Inheritance

Cascade

CSS rules cascade based on:

  1. Importance (!important)
  2. Specificity
  3. Source order (last defined rule wins)

Specificity

Specificity determines which rules take precedence:

  • Inline styles: 1000
  • IDs: 100
  • Classes, attributes, pseudo-classes: 10
  • Elements, pseudo-elements: 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Specificity: 1 */
p {
  color: red;
}

/* Specificity: 11 (10 + 1) */
.content p {
  color: blue;
}

/* Specificity: 101 (100 + 1) */
#main p {
  color: green;
}

Inheritance

Some CSS properties are inherited from parent to child elements, like color, font-family, and text-align. Others, like margin and padding, are not.

1
2
3
4
5
6
7
8
body {
  font-family: Arial, sans-serif; /* Inherited by all child elements */
  color: #333; /* Inherited by all child elements */
}

h1 {
  color: blue; /* Overrides inherited color */
}

CSS Variables (Custom Properties)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --padding-standard: 15px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--padding-standard);
}

.alert {
  border-color: var(--secondary-color);
  padding: calc(var(--padding-standard) * 2);
}

Best Practices

  1. Use a CSS reset or normalize.css to ensure consistent styling across browsers
  2. Follow a naming convention like BEM (Block Element Modifier)
  3. Organize CSS logically by grouping related styles
  4. Keep selectors simple to improve performance and maintainability
  5. Minimize use of !important as it breaks the natural cascade
  6. Use shorthand properties when appropriate
  7. Comment your code for complex sections
  8. Avoid inline styles except for dynamic content

Learning Resources

Understanding CSS fundamentals is essential before moving on to more advanced layout techniques like Flexbox and Grid.

扫一扫，分享到微信

微信分享二维码