A CSS ruleset is the foundation of how styles are applied to HTML elements on a web page. It consists of a selector and one or more declarations, which define how elements are displayed.
- A CSS ruleset is made up of a selector and declarations.
- The selector targets HTML elements to apply styles.
- Declarations are pairs of property names and values that define how the selected elements should be styled.
- The declarations are enclosed in curly braces {}.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* This is a CSS ruleset */
p {
color: blue;
font-size: 16px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>This is a paragraph with blue text and a font size of 16px.</p>
</body>
</html>
<!--Driver Code Ends-->
In the example,
- The selector is p, which targets all <p> (paragraph) elements in the HTML.
- The declarations define how the <p> element should look. The color property changes the text color to blue, and the font-size property sets the text size to 16px.
Types of Selectors
Selectors in CSS are used to target HTML elements that you want to style. They are the first part of a ruleset.
- Type Selector: Targets elements by their tag name (e.g., div, p).
- Class Selector: Targets elements by their class (e.g., .my Class).
- ID Selector: Targets an element by its ID (e.g., #myId).
- Universal Selector: Targets all elements (e.g., *).
- Attribute Selector: Targets elements based on their attributes (e.g., [type="text"]).
CSS RulesetSelectors: Targeting Elements
Selectors determine which HTML elements the styles apply to. They play a very important role in determining the element on which the set of rules are to be applied. Here are some common types.
1. Universal Selector
The universal selector targets all the elements that are visible on the screen that means it targets the complete cross-axis and main-axis of the screen we could also say it as the view-width and view-height of the screen.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
font-family: sans-serif;
font-weight: 900;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p id="one">Hello GFG</p>
<p id="two">Hello GEEKS </p>
</body>
</html>
<!--Driver Code Ends-->
In this code the font-family and the font-size property will be applied to all the paragraph tags no matter what id they contain ,because the universal selector targets all the hat are inside it's view width and view height.
2. Type Selector
Targets specific HTML tags.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h1 {
font-size: 25px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Welcome GEEKS</h1>
</body>
</html>
<!--Driver Code Ends-->
3. Class Selector
Targets elements with a specific class attribute. Classes start with a dot (.).
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.alert {
height: 200px;
width: 200px;
background-color: blueviolet;
color: white;
font-size: 23px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="alert">I am selected by my class name</div>
</body>
</html>
<!--Driver Code Ends-->
4. ID Selector
Targets an element with a specific id attribute. IDs start with a hash (#).
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#GFG {
height: 200px;
width: 200px;
background-color: blueviolet;
color: white;
font-size: 23px;
text-align: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="GFG">I am selected by my id's name</div>
</body>
</html>
<!--Driver Code Ends-->
5. Grouping Selector
Applies the same style to multiple elements. Same style can be applied on different elements with the help of grouping.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h1,h2,h3{
font-family: sans-serif;
font-size: 25px;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>G</h1>
<h2>F</h2>
<h3>G</h3>
</body>
</html>
<!--Driver Code Ends-->
6. Descendant Selector
The descendant selector helps to apply rule sets to all the children of a parent. It is denoted by a gap, whether they are direct or indirect children.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#one p {
color: blueviolet;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="one">
<p>paragraph-1</p>
<p>paragraph-2</p>
<p>paragraph-3</p>
<div id="two">
<p>paragraph-4</p>
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
7. Child Selector
targets all direct children of a parent it uses >(decrement operator) as a child selector.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#one>p {
color: blueviolet;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="one">
<p>paragraph-1</p>
<p>paragraph-2</p>
<p>paragraph-3</p>
<div id="two">
<p>paragraph-4</p>
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
8. Pseudo-classes
Applies style based on state of an element.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#one {
height: 200px;
width: 200px;
border: 2px solid black;
}
#one:hover {
background-color: blueviolet;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="one">
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Declarations: Styling Properties
A declaration specifies a CSS property and its value, separated by a colon (:). Declarations must end with a semicolon (;).
1. Color and Background
The declaration block to style the body of an element can be written by keeping body as a selector and the declaration must be kept within these {} braces.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
body {
color: black;
background-color: white;
background-image: url('background.jpg');
}
</style>
<!--Driver Code Starts-->
</head>
<body>
</body>
</html>
<!--Driver Code Ends-->
2. Font and Text
The declaration block to style the h1 element by using an element selector.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h1 {
font-size: 32px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Welcome to GFG</h1>
</body>
</html>
<!--Driver Code Ends-->
3. Box Model (Margin, Padding, Border)
The box model describes the structure of an element as a rectangular box consisting of content, padding, border, and margin.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
margin: 20px;
padding: 10px;
border: 1px solid black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div> </div>
</body>
</html>
<!--Driver Code Ends-->
4. Positioning of elements within the width and height of the screen
CSS positioning controls how an element is placed on a page using properties like static, relative, absolute, fixed, and sticky.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<link rel="stylesheet" href="styles.css">
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<div class="box static">Static</div>
<div class="box relative">Relative</div>
<div class="box absolute">Absolute</div>
<div class="box fixed">Fixed</div>
<div class="box sticky">Sticky</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
/*styles.css*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 200vh;
/* To demonstrate scrolling for fixed and sticky positions */
}
.container {
position: relative;
height: 400px;
border: 2px solid black;
padding: 20px;
}
.box {
width: 100px;
height: 50px;
margin: 10px;
padding: 10px;
color: white;
text-align: center;
line-height: 50px;
}
.static {
position: static;
background-color: gray;
}
.relative {
position: relative;
background-color: blue;
top: 20px;
/* Moves relative to its original position */
left: 20px;
}
.absolute {
position: absolute;
background-color: red;
top: 50px;
/* Moves relative to the nearest positioned ancestor */
left: 50px;
}
.fixed {
position: fixed;
background-color: green;
top: 10px;
/* Always stays at the same position relative to the viewport */
right: 10px;
}
.sticky {
position: sticky;
background-color: orange;
top: 0;
/* Sticks to the top of its container while scrolling */
}
5. Flexbox
Flexbox is a layout model that provides efficient alignment and distribution of space among items in a container, even if their size is dynamic.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: lightgray;
}
.box {
width: 150px;
height: 150px;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box">Centered Box</div>
</body>
</html>
<!--Driver Code Ends-->
6. Responsive Design
Using media queries to adjust styles for different screen sizes.
HTML
<!--Driver Code Starts-->
<html>
<!--Driver Code Ends-->
<head>
<style>
body {
font-size: 16px;
}
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Resize the browser to see the font size change.</p>
</body>
</html>
<!--Driver Code Ends-->
7. Advanced Selectors
Advanced selectors in CSS allow for more precise targeting of elements, such as using pseudo-classes (e.g., :nth-child()), pseudo-elements (e.g., ::before), attribute selectors, and combinators like > or ~. They enhance styling capabilities by enabling dynamic and contextual styling based on states, relationships, and element attributes.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Attribute selector */
input[type="text"] {
border: 1px solid gray;
padding: 5px;
}
/* Pseudo-element */
p::first-letter {
font-size: 2em;
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<input type="text" placeholder="Type here...">
<p>This is a paragraph demonstrating pseudo-elements.</p>
</body>
</html>
<!--Driver Code Ends-->
8. Pseudo-classes
A pseudo-class is a keyword added to a selector that defines a special state of the selected elements. For example, you might want to style an element when the user hovers over it, or when a link has been visited.
- :hover-: Applies styles when the user hovers over an element .When the mouse pointer is over the button, its background turns brown, and text color changes to white.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
button:hover {
background-color: brown;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button>Click me</button>
</body>
</html>
<!--Driver Code Ends-->
rule sets applied on hover state of element- :nth-child()-: Targets elements based on their position in a parent element. Alternates the background color of list items, creating a striped effect.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
li:nth-child(odd) {
background-color: #f0f0f0;
/* Light gray */
}
li:nth-child(even) {
background-color: #ffffff;
/* White */
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
- :focus –: Applies styles when an element (like an input field) is focused .When a user clicks or tabs into an input field, the border changes to green and the outline is removed.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input:focus {
border: 2px solid green;
outline: none;
}
input {
border: 1px solid gray;
padding: 5px;
width: 200px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<input type="text" placeholder="Click to focus...">
</body>
</html>
<!--Driver Code Ends-->
- :visited –:Styles links that the user has already clicked .Changes the color of links that the user has already visited to purple.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
a:visited {
color: purple;
}
a {
color: blue;
text-decoration: none;
font-size: 18px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p><a href="https://example.com/" target="_blank">Visit Example.com</a></p>
</body>
</html>
<!--Driver Code Ends-->
- :not() –: Excludes elements that match a specific selector .Styles all <p> elements except those with the class .special.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p:not(.special) {
color: gray;
}
p.special {
color: blue;
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="special">This is a special paragraph.</p>
<p>Another normal paragraph.</p>
</body>
</html>
<!--Driver Code Ends-->
9. Pseudo-Elements
A pseudo-element allows you to style specific parts of an element, such as the first letter or the first line, or even insert content before or after the element.
(Note: Double colons :: are recommended for pseudo-elements, but some older browsers also support a single colon :)
- ::before –: Inserts content before an element .Adds a red arrow emoji before every <h1>.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h1::before {
content: "👉 ";
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
<!--Driver Code Ends-->
- ::after –: Inserts content after an element. Appends " (Read more)" to every paragraph.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p::after {
content: " (Read more)";
color: blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Paragraph-1</p>
<p>Paragraph-2</p>
<p>Paragraph-3</p>
<p>Paragraph-4</p>
<p>Paragraph-5</p>
</body>
</html>
<!--Driver Code Ends-->
- ::first-letter – : Styles the first letter of a block of text.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p::first-letter {
font-size: 100px;
color: red;
}
p {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->
this code enlarges the first letter of the paragraph which is w in this case.
first letter got selected and rules are set on to it- ::first-line –: Styles the first line of a block of text. Makes the first line bold and uppercase.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p::first-line {
font-size: 30px;
font-family: sans-serif;
font-weight: 900;
}
p {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>A CSS ruleset is various affirmations to various pieces or elements of the document.
The objective is to apply a bunch of properties for certain distinct qualities to a solitary
or a particular arrangement of components in the connected HTML page. </p>
</body>
</html>
<!--Driver Code Ends-->
- ::placeholder –: Styles the placeholder text in input fields. Changes the appearance of placeholder text in input fields.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
input::placeholder {
color: gray;
font-style: italic;
font-size: 12px;
font-weight: 900;
}
input {
height: 50px;
width: 200px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<input type="text" placeholder="Enter your name here please">
</body>
</html>
<!--Driver Code Ends-->
rule set's applied on input's placeholder10. Combining Pseudo-Classes and Pseudo-Elements
You can use pseudo-classes and pseudo-elements together for advanced styling. On hovering the button a flame symbol will appear before the content ie Click me in the button.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
button:hover::before {
content: "🔥 ";
font-size: 1.2rem;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button>Click me</button>
</body>
</html>
<!--Driver Code Ends-->
use of both pseudo element and pseudo classes
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read