CSS - Syntax
CSS - Syntax
CSS stands for Cascade Style Sheet is popular stylesheet language used to design an interactive webpage. In this tutorial we will learn CSS syntax and usages of CSS along with HTML.
CSS Syntax
Following is the syntax of styling using CSS.
selector {
property: value;
}-
Selector: CSS selectors are used to select the HTML element or groups of elements you want to style on a web page.
-
Property: A CSS property is an aspect or characteristic of an HTML element that can be styled or modified using CSS, such as color, font-size, or margin.
-
Value: Values are assigned to properties. For example, color property can have value like red, green etc.
For Example:
Multiple Style Rules
If you want to define multiple rules for a single selectors you can specify those in single block separated by a semicolon (;) .
Syntax
selector{
property1: value1;
property2: value2;
property3: value3;
}Now let us look an example for styling using CSS.
Example
CSS Selectors Syntax
CSS Selectors are used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more. Different types of selectors are mentioned below:
Universal Selector
Universal selectors select and apply styles to all elements in an HTML document.
* {
font-family: Verdana, sans-serif;
color: green;
}Element Selectors
Element selectors select specific HTML elements.
h1 {
color: #04af2f;
}Class Selectors
Class selectors select and style an element with a specific value for its class attribute.
.myDiv {
color: #04af2f;
}Id Selectors
Id selectors select a single element with a particular value for the id attribute.
#myDiv {
color: #04af2f;
}Attribute Selectors
Attribute selectors select an element based on a specific attribute value.
a[target] {
background-color: peachpuff;
}Example: This example demonstrates the types of selectors mentioned above.
CSS Grouping and Nesting Syntax
Grouping and nesting selectors allow us to apply the same style to multiple elements at a time.
CSS Grouping Selector Syntax
Grouping selectors are comma-separated and used to select multiple elements and style them at a time.
div, p {
background-color: #04af2f;
color: white;
}CSS Nesting Syntax
Nesting allows the nesting of one specific style rule within another.
div p {
background-color: #04af2f;
color: white;
font-size: 20px;
letter-spacing: 1px;
}CSS Pseudo-Classes & Pseudo-Elements Syntax
Pseudo-class and pseudo-element, both select specific types of elements. The pseudo class defines the style for a specific state while the pseudo element targets a specific part of an element./p>
CSS Pseudo-Element Syntax
CSS pseudo-element styles specific parts of an element.
p:before {
content: "NOTE:";
font-weight: bold;
}CSS Pseudo-Class Syntax
CSS pseudo-class in CSS is used to select and style elements based on their state.
a:hover {
color: red;
}CSS Inclusion Syntax
CSS can be used in any HTML document using three different methods which are: inline CSS , internal CSS , and external CSS .
Inline CSS Syntax
Inline CSS are used directly within HTML tags.
<div style="color: #04af2f;">Welcome to CodesCompiler.Internal CSS Syntax
Internal CSS is used within the head section of an HTML document using a style tag .
<style>
body {
background-color: #04af2f;
}
</style>External CSS Syntax
External CSS is written in a separate file having a .css extension and linked to the HTML document using link tag .
<link rel="stylesheet" type="text/css" href="style.css">CSS Media Queries Syntax
CSS media queries apply different CSS styles based on the screen size, resolution, and other characteristics and are often used for creating responsive designs.
@media (max-width: 700px) {
body {
background-color: #04af2f;
}
}CSS Variables Syntax
CSS Variables allows to store and reuse values throughout the CSS program.
:root {
--main-color: #04af2f;
}CSS Comments Syntax
CSS comments add an explanatory note about the code.
/* This is a single line CSS comment */
/* This is
a multi-line
CSS comment
*/