Detailed explanation of CSS basics
CSS Basics Detailed Explanation
1. CSS Syntax Structure
When writing CSS styles, we must follow a specific syntax structure. CSS styles consist of selectors, attributes, and attribute values. The specific structure is as follows:
selector {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
...
}
The selector is used to select the HTML element to which the style should be applied, the attribute represents the style property to be modified, and the attribute value represents the specific value of the attribute.
2. CSS Selectors
CSS selectors are used to select HTML elements to which the style should be applied. Common CSS selectors include:
- Tag selector: Selects elements with a specific HTML tag. For example,
p {}selects all elements with the<p>tag. -
Class Selector: Selects elements with a specific class. For example,
.red {}selects all elements with aclassattribute set tored. -
ID Selector: Selects elements with a specific ID. For example,
#header {}selects all elements with anidattribute set toheader. -
Descendant Selector: Selects descendant elements of a specific element. For example,
div p {}selects all<p>elements under a<div>element. -
Pseudo-class selector: Selects elements based on a specific state, for example,
a:hover {}selects all elements hovering over
3. CSS Properties and Property Values
CSS properties are used to control the style of an element, and property values represent the specific values of the properties. Commonly used CSS properties include:
- color: Sets text color, for example,
color: red; -
font-size: Sets font size, for example,
font-size: 16px; -
background-color: Sets background color, for example,
background-color: #f0f0f0; -
margin: Sets margins, for example,
margin: 10px; -
padding: Sets the inner margin of an element, for example,
padding: 5px; -
border: Sets the border of an element, for example
border: 1px solid #000;
4. CSS Style Inclusion Methods
There are three common ways to apply CSS styles to HTML pages:
- Inline Styles: Use the style attribute within an HTML element to define styles, for example,
<p style="color: red;">text content</p>. -
Internal style sheet: Use the
<style>tag in the<head>of an HTML document to define styles, for example.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Text content</p>
</body>
</html>
- External style sheet: Define CSS styles in an external file, and then introduce the external style sheet in the HTML document through the
<link>tag, for example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Text Content</p>
</body>
</html>
5. CSS Example Demonstration
The following example demonstrates the basic usage of CSS. Suppose we have an HTML file index.html with the following content:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to the world of CSS</h1>
<p>This is a simple text content. Let's learn CSS together! </p>
</div>
</body>
</html>
Then we create a new CSS file, styles.css, and define the following styles:
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
text-align: center;
}
h1 {
color: blue;
}
p {
color: green;
font-size: 16px;
}
Open the index.html file in a browser and you’ll see that the styles we defined are applied to the page’s title and text content.
6. Summary
This article provides a detailed introduction to the basics of CSS, including its syntax, selectors, properties, and property values. By learning CSS, we can better control the style and layout of web pages, giving them a more aesthetically pleasing and professional appearance.