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 Ruleset
Selectors: 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 }-->
CSS
/*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 placeholder
10. 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
What is a CSS Reset ?
A CSS reset is a set of CSS rules that aim to override the default styles provided by web browsers. The purpose of a CSS reset is to establish a consistent design across different browsers by removing any default styling that may vary between them. This creates a certain amount of headaches for deve
4 min read
What is the use of CSS ruleset ?
In this article, we will learn about the CSS Ruleset & its implementation. The 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 component
3 min read
What is CSS?
CSS, which stands for Cascading Style Sheets is a language in web development that enhances the presentation of HTML elements. By applying styles like color, layout, and spacing, CSS makes web pages visually appealing and responsive to various screen sizes. CSS allows you to control the look and fee
5 min read
What is float property in CSS ?
In this article, we will learn about CSS float property with suitable examples of all available attributes. The float property is used to change the normal flow of an element. It defines how an element should float and place an element on its container's right or left side. The general syntax of the
3 min read
What are nested rules in LESS ?
In this article we will learn about nested rules in Less, We can very easily define nested rules in LESS. Nested rules are defined as a set of CSS properties that allow the properties of one class to be used for another class and contain the class name as its property. In LESS, you can use class or
3 min read
CSS @media Rule
The @media CSS at-rule is used to apply a different set of styles for different media/devices using the Media Queries. A Media Query is mainly used to check the height, width, resolution, and orientation(Portrait/Landscape) of the device. This CSS rule is a way out for making more out of responsive
5 min read
What is at-rules and why use of "at" in CSS ?
In this tutorial, we will learn about At-rules & their usage in CSS. At-rules are simply some CSS statements that instruct the CSS how to behave in particular conditions. ie., At-rules allow developers to change the design or layout of websites based on certain conditions. Every At-rule command
7 min read
Primer CSS Lint Rules (WIP)
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that the patterns ar
2 min read
W3.CSS Lists
Lists are very useful in a webpage. It can be used a variety of content as they are flexible and easy to manage. We use .w3-ul class for the list. The default style for the list is borderless but we can use other classes to add a border and other effects to the list. Example: Adding a list on a webp
5 min read
What is SASS?
Writing and managing CSS can become more challenging as web pages are more complex. Stylesheets are getting larger, more complex, and harder to maintain. A CSS pre-processor can be helpful in this situation. Sass reduces the repetition of CSS. It is free to download and use. Sass allows to use of fe
9 min read