A style sheet language called CSS (Cascading Style Sheets) is used to specify how an HTML or XML document is presented. This is a thorough rundown of the syntax found in CSS:
Basic Structure
A CSS rule set consists of a selector and a declaration block:
selector {
property: value;
property: value;
/* more properties */
}
Selector: This is where you aim to style the HTML element or elements.
Declaration Block: One or more declarations, divided by semicolons, are contained in this block.
Property: The particular style property (such color or font size) that you wish to use.
Value: The desired value to be applied to the property (red, 16px, for example).
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
margin-left: 20px;
}
Selectors
Selectors define which HTML document components are subject to CSS rules. Here are a few typical selector types:
Type Selector
The Type Selector selects all components of a specific type.
p {
color: green;
}
Class Selector
Elements with a particular class attribute are chosen by a class selector. followed by a dot (.).
.intro {
font-size: 20px;
}
ID Selector
This tool chooses the element that has a particular ID property. with a hash (#) before it.
#header {
background-color: yellow;
}
Universal Selector
Selects every element using the Universal Selector. It is denoted as ‘*’ .
* {
margin: 0;
padding: 0;
}
Attribute Selector
Elements with a certain attribute can be chosen using the attribute selector.
a[target="_blank"] {
color: orange;
}
Descendant Selector
Elements that are descended from another element can be chosen using a descendant selector.
div p {
color: purple;
}
Child Selector
Elements that are a direct child of another element are selected using the child selector.
ul > li {
list-style-type: none;
}
Adjacent Sibling Selector
The Adjacent Sibling Selector allows you to choose elements that are next to a given element.
h1 + p {
margin-top: 0;
}
General Sibiling Selector
The General Sibling Selector allows you to choose every sibling of a given element.
h1 ~ p {
color: gray;
}
Properties and Values
The styling of elements is controlled via CSS properties, which might have different values based on the property. The following are some typical qualities:
Color
color: blue;
background-color: #f0f0f0;
Text
font-size: 16px;
text-align: center;
Box-Model
margin: 10px;
padding: 20px;
border: 1px solid black;
width: 300px;
Positioning
position: relative;
top: 10px;
left: 20px;
Pseudo-classes and Pseudo-elements
Pseudo Classes
Choose elements according to their condition.
a:hover {
color: red;
}
Pseudo-elements
Parts of elements with a particular style.
p::first-line {
font-weight: bold;
}
Combining Selectors
More specialized rules can be made by combining selectors.
Grouping Selector
Give several elements the same styles.
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
Combinator Selectors:
For more focused targeting, combine selectors.
div > p.intro {
color: blue;
}
Comments
In CSS, comments are delimited by /* and */.
/* This is a comment */
p {
color: red; /* Inline comment */
}
Example
This sample stylesheet illustrates several facets of CSS syntax:
/* Basic styles */
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
/* Header */
#header {
background: #333;
color: white;
padding: 10px 0;
text-align: center;
}
/* Navigation */
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
/* Links */
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Main content */
.main {
padding: 20px;
}
.main h1 {
color: #333;
}
.main p {
line-height: 1.6;
}
I have already created the website using HTML and CSS. I have used the above properties in website. You will see the Website here.
The fundamentals of CSS syntax are covered in this tutorial, but there is much more to learn about media queries for responsive design, sophisticated selectors, and CSS preprocessors like Sass and LESS.