What is CSS?
CSS is an essential part of web design. By using CSS, you can change the look and feel of your web pages, including the layout, colors, fonts, and more. Understanding the basics of CSS, including selectors and properties, is a crucial first step in web design.
In the previous blog we have seen how to add CSS to HTML if you havent read it.
CSS Syntax:
CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document.
A style rule set consists of a selector and declaration block.
Selector -- h1
Declaration -- {color:blue;font size:12px;}
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon. In the above example, color is the property and blue is the value.
CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
For example:
p{
color:blue;
text-align: center;
}
CSS Selectors:
CSS selectors are used to select and style HTML elements. They allow you to target specific elements based on their attributes, classes, IDs, and positions in the document tree. Here are some common CSS selectors:
Element Selector
Element selectors target all instances of a particular HTML element. For example, the following CSS rule targets all p elements:
p {
color: red;
}
Class Selector
CSS selectors are used to select and style HTML elements. They allow you to target specific elements based on their attributes, classes, IDs, and positions in the document tree. Here are some common CSS selectors:
Class selectors target all instances of an HTML class. Classes are specified using the class attribute in the HTML element. For example, the following CSS rule targets all elements with the class my-class:
.my-class {
background-color: yellow;
}
ID Selector
ID selectors target a single HTML element with a specific ID. IDs are specified using the id attribute in the HTML element. For example, the following CSS rule targets the element with the ID my-id:
#my-id {
font-size: 24px;
}
Attribute Selector
Attribute selectors target HTML elements based on their attributes. For example, the following CSS rule targets all input elements with the type attribute set to text:
input[type="text"] {
border: 1px solid black;
}
Descendant Selector
Descendant selectors target elements that are descendants of other elements. For example, the following CSS rule targets all p elements that are descendants of div elements:
div p {
font-weight: bold;
}
Child Selector
Child selectors target elements that are direct children of other elements. For example, the following CSS rule targets all p elements that are direct children of div elements:
div > p {
font-style: italic;
}
Pseudo-Classes
Pseudo-classes are used to style elements based on their state or position in the document tree. For example, the following CSS rule targets all elements that are being hovered over by the mouse:
a:hover {
text-decoration: underline;
}
Pseudo-Elements
Pseudo-elements are used to style specific parts of an element, such as its first letter or first line. For example, the following CSS rule targets the first letter of all p elements:
p::first-letter {
font-size: 24px;
}
CSS Properties:
CSS properties are used to change the style of HTML elements. Some common properties include:
Background-color: Sets the background color of an element.
Color: Sets the color of text.
Font-size: Sets the size of text.
Font-family: Sets the font family of text.
Margin: Sets the margin of an element.
Padding: Sets the padding of an element.
Border: Sets the border of an element.
Width: Sets the width of an element.
Height: Sets the height of an element.
Note: In CSS we comment the code in the below way
/* content */
Conclusion:
CSS is an essential part of web design. By using CSS, you can change the look and feel of your web pages, including the layout, colors, fonts, and more. Understanding the basics of CSS, including selectors and properties, is a crucial first step in web design.
In the next blog we will discuss more about colors, fonts.