YouTipCss Id Class
Rookie Tutorial -- Learn not only technology, but also dreams!
Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks
CSS Tutorial
CSS Tutorial
CSS Introduction
CSS Editor
CSS Syntax
CSS Id and Class Selectors
CSS Create
CSS Backgrounds
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Table
CSS Box Model
CSS Border
CSS Outline Properties
CSS Margin
CSS Padding
CSS Grouping and Nesting
CSS Dimension
CSS Display
CSS Position
CSS Overflow
CSS Float
CSS Align
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Navigation Bar
CSS Dropdown Menu
CSS Tooltip
CSS Image Gallery
CSS Image Transparency/Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Forms
CSS Counters
CSS Website Layout
CSS !important
CSS Summary
CSS Examples
CSS Quiz
CSS3 Tutorial
CSS3 Tutorial
CSS3 Introduction
CSS3 Borders
CSS3 Rounded Corners
CSS3 Backgrounds
CSS3 Gradients
CSS3 Text Effects
CSS3 Fonts
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 Transitions
CSS3 Animations
CSS3 Multiple Columns
CSS3 User Interface
CSS3 Images
CSS3 Buttons
CSS3 Pagination
CSS3 Box Sizing
CSS3 Flexbox
CSS3 Media Queries
CSS3 Media Query Examples
CSS3 Quiz
CSS Responsive Design
Viewport
Grid View
Media Queries
Images
Video
Frameworks
CSS Reference Manual
CSS Reference Manual
CSS Selectors
CSS Aural Reference
CSS Web Safe Fonts
CSS Animations
CSS Units
CSS Colors
CSS Color Values
CSS Color Names
CSS Hexadecimal Colors
CSS Syntax
CSS Create
In-depth Exploration
Software
Scripts
Computer
Web Service
Scripting Languages
Programming Languages
Search Engines
Development Tools
Computer
Network Services
CSS id and class
id and class selectors
If you want to set CSS styles for HTML elements, you need to set "id" and "class" selectors in the elements.
id selector
The id selector can specify a specific style for HTML elements marked with a specific id.
HTML elements set the id selector with the id attribute, and in CSS the id selector is defined with "#".
The following style rule applies to the element attribute id="para1":
Example
#para1
{
text-align:center;
color:red;
}
Try it »
Do not start ID attributes with a number, as ID names starting with numbers will not work in Mozilla/Firefox browsers.
class selector
The class selector is used to describe the style of a group of elements. The class selector differs from the id selector in that class can be used in multiple elements.
The class selector is represented by the class attribute in HTML, and in CSS, the class selector is displayed with a dot . :
In the following example, all HTML elements with the center class are centered.
Example
.center {text-align:center;}
Try it »
You can also specify specific HTML elements to use class.
In the following example, all p elements use class="center" to center the text of the element:
Example
p.center {text-align:center;}
Try it »
Multiple class selectors can be separated by spaces:
Example
.center { text-align:center; }
.color { color:#ff0000; }
Try it »
The first character of a class name cannot be a number! It will not work in Mozilla or Firefox.
CSS Syntax
CSS Create
Byte Ark Coding Plan
Supports mainstream large models such as Doubao, GLM, DeepSeek, Kimi, MiniMax, etc., with official direct supply for stable and reliable service.
¥9.9
/ month
Activate Now
iFlytek Star Coding Plan
Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform.
¥3.9
/ month
Activate Now
6 notes
Write notes
Category Navigation
Python / Data Science
AI / Intelligent Development
Front-end Development
Back-end Development
Database
Mobile Development
DevOps / Engineering
Programming Languages
Computer Fundamentals
XML / Web Service
.NET
Website Building
Advertisement
CSS Tutorial
CSS Tutorial
CSS Introduction
CSS Editor
CSS Syntax
CSS Id and Class Selectors
CSS Create
CSS Backgrounds
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Table
CSS Box Model
CSS Border
CSS Outline Properties
CSS Margin
CSS Padding
CSS Grouping and Nesting
CSS Dimension
CSS Display
CSS Position
CSS Overflow
CSS Float
CSS Align
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Navigation Bar
CSS Dropdown Menu
CSS Tooltip
CSS Image Gallery
CSS Image Transparency/Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Forms
CSS Counters
CSS Website Layout
CSS !important
CSS Summary
CSS Examples
CSS Quiz
CSS3 Tutorial
CSS3 Tutorial
CSS3 Introduction
CSS3 Borders
CSS3 Rounded Corners
CSS3 Backgrounds
CSS3 Gradients
CSS3 Text Effects
CSS3 Fonts
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 Transitions
CSS3 Animations
CSS3 Multiple Columns
CSS3 User Interface
CSS3 Images
CSS3 Buttons
CSS3 Pagination
CSS3 Box Sizing
CSS3 Flexbox
CSS3 Media Queries
CSS3 Media Query Examples
CSS3 Quiz
CSS Responsive Design
Viewport
Grid View
Media Queries
Images
Video
Frameworks
CSS Reference Manual
CSS Reference Manual
CSS Selectors
CSS Aural Reference
CSS Web Safe Fonts
CSS Animations
CSS Units
CSS Colors
CSS Color Values
CSS Color Names
CSS Hexadecimal Colors
Online Examples
·HTML Examples
·CSS Examples
·JavaScript Examples
·Ajax Examples
·jQuery Examples
·XML Examples
·Java Examples
Character Sets & Tools
· HTML Character Set Settings
· HTML ASCII Character Set
· JS Obfuscation/Encryption
· PNG/JPEG Image Compression
· HTML Color Picker
· JSON Formatting Tool
· Random Number Generator
Latest Updates
· Dart Enums and Symbols
· Dart Unit Testing
· Dart Concurrency and Iso...
· Dart Stream
· Dart Asynchronous Programming
· Dart typedef and...
· Dart Packages and Library Management
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Mark Articles
Browsing History
Clear All
No records