CSS First

Cascading Style Sheets (CSS CSS is a markup language used to control the layout and style of web pages. In web development, CSS plays a crucial role, helping us achieve the beauty and layout of web pages. This article will discuss some of the basics of CSS in detail to help readers better understand and apply CSS.

What is CSS?

CSS is a style sheet language used to describe the appearance and style of a web page. By applying CSS styles to HTML elements, we can control element attributes such as size, color, and font, thereby achieving the aesthetics and layout of the web page.

CSS It mainly includes the following parts:

Selector: Used to select the HTML element to which the style is applied.
Property: Defines the style of the element, such as color and size.
Value: Specifies the value of the property, such as red or 12px.
Style Rule: Consists of a selector, a property, and a value, used to define the style of the element.

How to Include CSS

There are three ways to include CSS styles in HTML:

Inline Styles

Inline styles are written directly within the style attribute of an HTML element. They can be used to set styles for a single element. For example:

<div style="color: red; font-size: 16px;">This is red text</div>

Internal Style Sheets

Internal style sheets are written within the <style> tags, located within the <head> tags. They can be used to set styles for the entire page. For example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 14px;
}

</style>
</head>
<body>
<p>This is a blue paragraph</p>
</body>
</html>

External Style Sheet

External style sheets are typically written in a separate CSS file and included in HTML pages using the <link> tags. This allows you to reuse the same style sheet, separating style from content. For example:

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<p>This is an externally styled paragraph</p> 
</body> 
</html>

/* styles.css */ 
p { 
color: green; 
font-size: 16px; 
}

CSS Selectors

CSS selectors are used to select HTML elements to which styles are applied. Common selectors include the following types:

Element selector: Selects elements by name, such as p and div.
ID selector: Selects an element by its unique ID, using the # symbol, such as #header.
Class selector: Selects an element by its class name, using the . symbol, such as .container.
Descendant selector: Selects descendant elements of a given element, using spaces to separate them, such as ul li.
Pseudo-class selector: Selects an element based on its state, such as :hover and :focus.

In CSS, selectors can be combined to achieve more precise selections, as shown below:

/* Example of combined selectors */ 
header h1 {
color: red; 
} 

.container .content {
font-size: 14px; 
}

CSS Box Model

The box model in CSS is a concept used to describe the layout of elements in the standard Document Object Model. Each HTML element can be thought of as a rectangular box consisting of the following parts:

Content Box: The area that displays the element’s content, whose size is determined by its width and height.
Padding: The space between the content box and the border, which can be set using the padding property.
Border: The boundary between the inner and outer margins, which can be set using the border property.
Margin: The space between the border and adjacent elements, which can be set using the margin property.

The following figure shows some examples of box model properties:

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

CSS Layout

CSS layout refers to controlling the arrangement and position of elements on a web page using CSS styles. Common CSS layout methods include the following:

Fluid Layout

Fluid layout means that elements are arranged sequentially from top to bottom and left to right according to the document flow. No additional styling is required; the default properties of elements are used to achieve layout.

<!-- Fluid Layout Example -->
<div>element 1</div>
<div>element 2</div>
<div>element 3</div>

Floating Layout

Floating layout allows an element to float to a specified position by setting its float attribute. This is commonly used to achieve multi-column layouts or wrap text around https://coder-cafe.com/wp-content/uploads/2025/09/images.

/* Float Layout Example */
.float-left {
float: left;
width: 50%;
}

.float-right {
float: right;
width: 50%;
}

Flexible Layout

Flexible layout uses the Flexbox layout, a new feature in CSS3, to achieve flexible layouts. It allows you to arrange elements in a single direction and control their size, order, and alignment.

/* Flexible Layout Example */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.flex-item {
flex: 1;
}

Grid Layout

Grid Layout uses the new Grid Layout in CSS3 to implement complex grid layouts. Divide the page into rows and columns, allowing you to flexibly control the position and size of elements.

/* Grid Layout Example */

.grid-container {
display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-gap: 10px;

}

.grid-item {
background-color: lightblue;

}

CSS Responsive Design

Responsive design is a web design approach that adapts to different device resolutions and screen sizes. By using techniques like CSS3 media queries and flexible layouts, web pages can display well on different devices.

CSS3 Media Queries

Media queries are a new feature in CSS3 that allow you to apply different styles based on different media types and characteristics. Using media queries, we can adjust the style and layout of a page based on the device’s screen width, height, orientation, and other characteristics.

Here’s a simple media query example:

@media screen and (max-width: 768px) {
/* Styles applied when the screen width is less than 768px */
body {
font-size: 14px;
}
}

@media screen and (orientation: landscape) {
/* Styles applied in landscape orientation */
header {
background-color: lightblue;
}
}

CSS Animation Effects

CSS3 provides a rich set of animation effects. You can use keyframes (@keyframes) to define the animation process, giving elements different styles at different time points.

Here is a simple CSS animation example:

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.rotate {
animation: rotate 2s linear infinite;
}

<!-- CSS Animation Example --> 
<div class="rotate">Rotation Animation</div>

CSS Preprocessor

A CSS preprocessor is a tool that takes programming language-like code and converts it into standard CSS. Common CSS preprocessors include SASS, LESS, Stylus, etc., which can help improve the reusability and maintainability of CSS.

Here is a code example written in SASS:

// variables
<span class="katex math inline">primary-color: #3498db;

// mixins
@mixin button(</span>background-color) {
background-color: <span class="katex math inline">background-color;
color: white;
padding: 10px 20px;
border: none;
}

// button styles
.button {
@include button(</span>primary-color);
}

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

CSS Framework

A CSS framework is a set of pre-written CSS styles. Styles help developers quickly build web pages. Commonly used CSS frameworks include Bootstrap, Foundation, Semantic UI, etc., which provide a rich set of components and styles to quickly build responsive web pages.

Here is a code example using the Bootstrap framework:

<!-- Example using the Bootstrap framework --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> 
<title>Bootstrap Example</title> 
</head> 
<body> 
<div class="container"> 
<h1>Hello, Bootstrap!</h1> 
<button class="btn btn-primary">Click Me</button>
</div>

</body>

</html>

Summary

This article summarizes the basics of CSS, including import methods, selectors, the box model, layout, responsive design, animation effects, preprocessors, and frameworks. By learning and mastering this knowledge, developers can better implement web page style and layout, improving user experience and development efficiency.