CSS Cascading Style Sheets

Cascading Style Sheets (Cascading Style Sheets, abbreviated as

Basic Concepts

What is CSS

CSS is a style sheet language used to describe the appearance and layout of web page elements. By defining various style rules, developers can control the appearance of web pages, making them look more beautiful and professional. Compared to HTML, CSS focuses more on style and layout, while HTML focuses more on the structure and semantics of content.

Advantages of CSS

CSS allows you to separate style and structure, making web page structure clearer and styles easier to maintain. Furthermore, CSS offers great flexibility, allowing you to define a variety of style rules to achieve a rich variety of layout effects. CSS also supports responsive design, automatically adjusting layout and style based on the screen size of different devices.

How CSS Works

When a browser loads a web page, it loads both the HTML and CSS files. The browser applies the style rules defined in the CSS file to the corresponding HTML elements, changing their appearance and layout. CSS rules follow the principle of “cascading.” That is, if multiple conflicting rules apply to the same element, the browser determines the final style based on the precedence and specificity of the rules.

CSS Syntax

CSS Rules

CSS rules consist of selectors and declaration blocks, as shown below:

selector {
property1: value1;
property2: value2;
...
}

The selector specifies the HTML element to which the style is applied, and the declaration block contains a series of property-value pairs that define the style of those elements. For example, to set the text color of all paragraphs (<p>) to red, you can use the following CSS rule:

p {
color: red; 
}

CSS Selectors

CSS selectors are used to select HTML elements to which the style is applied. Common selector types include:

Element Selector: Selects elements of a specified type.
Class Selector: Selects elements with a specified class name.
ID Selector: Selects elements with a specified ID.
Descendant Selector: Selects descendant elements of a given element.
Pseudo-class Selector: Apply styles to an element based on its state.

CSS Properties and Values

CSS properties specify the style attributes to be changed, while values specify the values of those attributes. Common CSS properties include:

color: Text color
background-color: Background color
font-size: Font size
font-family: Font family
margin: Margin
padding: Padding
border: Border style
display: Display mode
position: Positioning mode

Common CSS Properties

Sizing Properties

`width` and `height`>

The width property sets the width of an element, and the height property sets the height of an element. These can be fixed values, percentages, or automatically calculated values. For example:

div {
width: 200px;
height: 100px;
}

`margin` and `padding`

margin attributes are used to set the outer margins of an element, and padding attributes are used to set the inner margins of an element. They can be fixed values, percentages, or auto. For example:

div {
margin: 10px;
padding: 20px;
}

Text Properties

`color` and `font-size`

The

color attribute sets the text color, and the font-size attribute sets the font size. For example:

p {
color: red;
font-size: 16px;
}

`font-family`

The

font-family attribute sets the font family, and you can specify multiple alternative fonts. For example:

body {
font-family: "Arial", sans-serif;
}

Background Properties

`background-color`

The

background-color property is used to set the background color of an element. For example:

div {
background-color: #f0f0f0;
}

`background-image`

The

background-image property is used to set the background image of an element. For example:

div {
background-image: url("background.jpg");
}

Practical Application Tips

Responsive Design

To make web pages look better on different devices, you can use media queries to adjust styles. For example, to hide an element on small screens:

@media screen and (max-width: 600px) {
.element {
display: none;
}
}

CSS Preprocessors

CSS preprocessors (such as Sass and Less) provide additional features, such as variables, nesting, and mixins, making CSS more flexible and efficient. For example, define a variable and reference it in multiple places:

$primary-color: #336699;

.button {
background-color: $primary-color;
}

.header {
color: $primary-color;
}

CSS Framework

CSS frameworks (such as Bootstrap and Foundation) provide a set of predefined style rules and components that can be used to quickly build web pages. For example, let’s quickly create a responsive navigation bar using Bootstrap:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Bootstrap Navbar Example</title> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
</head> 
<body> 

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
Navbar 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 

<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
<ul class="navbar-nav mr-auto"> 
<li class="nav-item active"> 
Home <span class="sr-only">(current)</span> 
</li> 
<li class="nav-item"> 
About 
</li> 
<li class="nav-item dropdown"> 
 
Services 
 
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
Service 1 
Service 2 
<div class="dropdown-divider"></div> 
Service 3 
</div> 
</li> 
<li class="nav-item"> 
Contact 
</li> 
</ul> 
</div> 
</nav> 

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

The above code demonstrates how to quickly create a web page with a navigation bar using Bootstrap. By importing Bootstrap’s stylesheets and JavaScript files, you can quickly build a web page using its predefined style rules and components, and achieve responsive design.

Summary

CSS is an indispensable part of web development. Proper CSS style design and layout can enhance the user experience and presentation of a web page.