CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of web pages. CSS allows web developers to separate the content of a web page from its presentation, which makes it easier to maintain and update the design of a web page.
CSS was first introduced in 1996, and has since become an essential part of web development. In this article, we will discuss the basics of CSS, including selectors, properties, values, and units.
Selectors:
CSS selectors are used to select HTML elements and apply styles to them. Selectors can be based on element names, classes, IDs, attributes, and pseudo-classes. Here are some examples of CSS selectors:
Element selector:
p {
color: red;
}
Class selector:
.intro {
font-size: 24px;
}
ID Selector:
#header {
background-color: blue;
}
Attribute Selector :
a[target="_blank"] {
color: green;
}
Pseudo-class selector:
a:hover {
text-decoration: underline;
}
Properties:
CSS properties are used to define the appearance of HTML elements. Properties can be applied to selectors using the following syntax:
selector {
property: value;
}
Here are some examples of CSS properties:
Background color:
background-color: yellow;
Text color :
font-size: 16px;
Font size:
color: red;
Padding:
padding: 10px;
Border:
border: 1px solid black;
Values:
CSS values are used to define the values of CSS properties. Values can be assigned to properties using the following syntax:
selector {
property: value;
}
Here are some examples of CSS values:
Color:
color: red;
Length:
width: 100px;
Percentage:
height: 50%;
Keyword:
font-style: italic;
URL:
background-image: url("image.jpg");
Units:
CSS units are used to define the measurement of CSS properties. Units can be absolute, such as pixels or inches, or relative, such as percentages or ems. Here are some examples of CSS units:
Pixels:
width: 100px;
Percentage:
height: 50%;
EMS:
font-size: 1.5em;
Points:
width: 2in;
Inches:
font-size: 12pt;
Emphasis:
CSS provides several ways to emphasize text, including bold, italic, underline, and strikethrough. Here are some examples of CSS emphasis:
font-weight: bold;
Bold:
font-weight: bold;
Italic:
font-style: italic;
Underline:
text-decoration: underline;
Strikethrough:
text-decoration: line-through;
Layout:
CSS is used to define the layout of web pages, including the position, size, and spacing of HTML elements. CSS provides several layout properties, including display, position, float, and clear. Here are some examples of CSS layout:
Display:
display: block;
Position:
position: absolute;
Float:
float: left;
Clear:
clear: both;
CSS is a style sheet language used to describe the presentation of web pages. CSS selectors are used to select HTML elements and apply styles to them. CSS properties are used to define the appearance of HTML elements. CSS values are used to define the specific values or settings for CSS properties, which determine how the selected HTML elements should be styled. For example, CSS properties such as “font-size”, “color”, and “background-image” can be assigned specific CSS values such as “12pt”, “#FF0000”, or “url(‘image.jpg’)” to define the size, color, and background image of an HTML element. By combining selectors, properties, and values, CSS provides a flexible and powerful way to control the layout, typography, and visual design of web pages.
