What is at-rules and why use of "at" in CSS ?
Last Updated :
29 Jul, 2024
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 begins with '@' followed by an identifier and end with a semi-colon ';' or next CSS block.
Syntax:
@identifier (condition);
@identifier (condition) {}We will understand both the syntaxes through the examples. Let's first discuss the @charset.
- @charset: It defines the character set to be used by the website. We can use it easily if the CSS file contains non-ASCII characters. The list of charsets that can be used is UTF-8, iso-8859-15, iso-8859-1 etc. You can check out any specific character sets but the most common and popular, set is UTF-8 on the websites.
Example:
@charset "UTF-8";
- @import: It is used to import CSS styles or rules from other CSS files that are either located in the local system or from the internet. It is usually mentioned at the top of the stylesheet that is instructed to include the external stylesheet. The below example illustrates all kinds of @import that we generally use.
Example: In this example, we will create the index.html file along with creating the required stylesheet.
index.html
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<title>GeeksforGeeks</title>
<link href="style.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<h2 class="heading">GeeksforGeeks</h2>
</body>
</html>
Inside the index.html, we have imported the style.css which will just change the colour of the heading which is "GeeksforGeeks".
style.css:
@import 'mobile.css' screen and (max-width: 300px);
@import url('desktop.css') screen and (min-width: 300px);
mobile.css:
.heading{
color: red;
}desktop.css:
.heading{
color: green;
}Explanation: Lets us understand the CSS files one by one. The mobile.css file changes the colour of the heading to red whereas desktop.css to green. Now instead of media querying on a single file, style.css we have used two different files for desktop screens and mobile screens. You can see, we have used the "and" condition with the "max-width" to ensure the media query.
Output: In the output, we are running on the browser for both desktop and mobile screens.
- @namespace: It is used to tell the CSS engine that all the XML namespaces are to be used in the CSS style sheet.
Example:
<!--Normal namespaces-->
@namespace url/String; /* Url or string of XML namespace */
<!--Prefixed namespace-->
@namespace anything url/String; /* Anything is identifie */
Using it in Selector
anything|title {your style}- @media: It is used on a part or block of HTML code based on the results of media queries. For example, responsive navigation bars are made using the media screen width.
Example: In this example, we will use the same code as above for the index.html.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<style>
.heading {
color: red;
}
@media screen and (min-width: 450px) {
.heading {
color: green !important;
}
}
</style>
</head>
<body>
<h2 class="heading">GeeksforGeeks</h2>
</body>
</html>
Explanation: Here, when the screen width is less than 450 px, the colour of the heading will be red else green. The @media is used with the screen to get the correct context that we want to check the screen width and the condition is "min-width: 450px". You can use more queries also.
Output:
- @support: It is used to know the support capability of the browser, ie. if the condition meets then it applies the style for those elements. For example, if the browser supports grid.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Geeks for geeks</title>
<style>
@supports (display: grid) {
#lists {
display: grid;
grid-template-columns: auto auto auto auto;
}
#lists>div {
padding: 20px;
border: 4px solid blue;
background-color: lightblue;
}
}
</style>
</head>
<body>
<div id="lists">
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
<div>Geeks</div>
</div>
</body>
</html>
Output:
grid layoutIn case, if the browser is not supporting the display: grid property then you can use the below code:
@supports not (display: grid)
{
/*code for no grid support*/
}
- @page: It is used to modify some CSS properties & applies the style to the individual pages when printing a document.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<style>
@page {
size: A5 landscape;
margin: 2in;
}
</style>
</head>
<body>
<div id="page">
<p>Welcome to GeeksforGeeks</p>
<p>
Here we can find lot's of tutorials
related to Programming, Data Structures
and Algorithms. I have found tutorials
and articles related to Array, Linked
Lists, HashMap, Stack, Queue, Binary
Trees, Binary Search,tree, heap, hash,
graph matrix and lots and lots. There
are lots of courses at geeksforgeeks.org
related to competitve programming,
interview preparation. The only thing
that is required are keen to learn and
learn.
</p>
</div>
</body>
</html>
Explanation: Here in the @page at-rule, we mention the details that how to page should be printed. If you right-click on the webpage, the print option comes which when printed shows the output as specified.
Output:
- @font-face: It specifies a custom font with which to display the text. Font can be loaded from anywhere on the server or system. Firstly, we must define the font name and then provide the URL of the font to be loaded from.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<style>
@font-face {
font-family: "Roboto";
src: url("Roboto/Roboto-Bold.ttf");
}
#page p {
font-family: "Roboto";
}
</style>
</head>
<body>
<div id="page">
<p>
GeeksforGeeks is website for programming
geeks. It has tons of articles for
programming in almost all popular
programming language.
</p>
</div>
</body>
</html>
We need to download the Roboto font from fonts.google.com, to download click here. Ensure that it must be downloaded in the same working directory where index.html is placed, in order to work it properly.
Output:
@font-face- @keyframes: It gradually changes from one set of CSS to another set of CSS styles.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
#page {
animation-duration: 3s;
font-size: 24px;
animation-name: gfgexpanding;
}
@keyframes gfgexpanding {
from {
font-size: 12px;
}
to {
font-size: 24px;
}
}
</style>
</head>
<body>
<div id="page">
<p>
GeeksforGeeks is website for programming
geeks. It has tons of articles for
programming in almost all popular
programming language.
</p>
</div>
</body>
</html>
The syntax is very clear. First, we have linked the container with the animation. Next, we have used the @keyframes with the same name as in #page to make the animation.
Output:
Also, you can provide the percentage change as follows:
@keyframes gfgexpanding{
0% {font-size: 12px;}
25% {font-size: 16px;}
50% {font-size: 18px;}
100% {font-size: 24px;}
}- @counter-style: It lets you define counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into another string.
Syntax:
@counter-style counter-style-name {
system: system;
symbols: symbols;
additive-symbols: additive-symbols;
negative: negative-symbol;
prefix: prefix;
suffix: suffix;
range: range;
pad: padding;
}Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<style>
@counter-style mynums {
system: numeric;
symbols: "0""1""2""3""4""5""6""7""8""9";
prefix: "(";
suffix: ") ";
}
#gfg>ul {
list-style-type: mynums;
}
</style>
</head>
<body>
<div id="gfg">
<ul>
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ul>
</div>
</body>
</html>
Here the important thing is the system. If it is alphabetic, you have to mention all the characters and if numeric all the digits.
Output:
@counter-style
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