- CSS Introduction
- CSS Syntax
- CSS Selectors
- How To Add CSS
- CSS Comments
- CSS Backgrounds
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height - Width
- CSS Box Model
- CSS Outline
- CSS Text
- CSS Links
- CSS Lists
- CSS Tables
- CSS Display
- CSS Max-width
- CSS Position
- CSS Overflow
- CSS Float
- CSS Inline-block
- CSS Align
- CSS Combinators
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS Opacity
- CSS Navigation Bar
- CSS Dropdowns
- CSS Image Gallery
- CSS Attr Selectors
- CSS Forms
- CSS Counters
- CSS Website Layout
- CSS !important
- CSS Rounded Corners
- CSS Border Images
- CSS Backgrounds
- CSS Colors
- CSS Color Keywords
- CSS Gradients
- CSS Radial Gradients
- CSS Text Effects
- CSS Web Fonts
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Tooltip
- CSS Image Reflection
- CSS The Object-fit
- CSS Object-position
- CSS Button
- CSS Pagination
- CSS Multiple Columns
- CSS User Interface
- CSS Variables
- CSS Box-sizing
- CSS Media Queries
- CSS Flexbox
CSS Selectors
CSS Selectors
CSS selectors are used to "find" (or choose) the HTML elements to style.
CSS selectors can be divided into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
The CSS Element Selector
The element selector selects HTML elements based on the element name.
<html>
<head>
<style>
p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="paragraph">Me too !</p>
<p>And me ! </p>
</body>
</html>
The CSS Id Selector
The id selector selects a specific HTML element by using its id attribute.
Since the id of an element is unique within a page, the id selector is used to select a single unique element!
To select an element with a particular id, type a hash (#) followed by the element's id.
<html>
<head>
<style>
#paragraph {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="paragraph">Hello World !</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The CSS Class Selector
The class selector is used to select HTML elements with a particular class attribute.
To select elements with a specific class, type the class name followed by a period (. ).
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">Red and center aligned heading</h1>
<p class="center">Red and center aligned paragraph.</p>
</body>
</html>
The CSS Universal Selector
The universal selector (*) selects every HTML element on the current page.
<html>
<head>
<style>
* {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="paragraph">Me too !</p>
<p>And me !</p>
</body>
</html>
The CSS Grouping Selector
The grouping selector selects all HTML elements whose style definitions are identical.
Examine the following CSS code (elements h1, h2, and p have identical style definitions):
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello World !</h1>
<h2>Smaller heading !</h2>
<p>This is a paragraph.</p>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP