Introduc on to CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a style sheet language used to describe the presenta on of a document
wri en in HTML. It controls the layout, colors, fonts, spacing, and overall look of a webpage. CSS
separates the content from the visual design, allowing developers to keep HTML focused on structure
and CSS focused on design.
Key Concepts of CSS
Selectors: CSS applies styles to HTML elements based on selectors. Selectors define which HTML
elements will be styled.
Common types of selectors:
Element Selector: Targets all instances of a par cular element.
p{
color: blue;
This applies the blue color to all <p> elements.
Class Selector: Targets elements with a specific class a ribute. Class selectors are defined with a
period (.) before the class name.
.example-class {
color: green;
This applies green color to any element with the class example-class.
ID Selector: Targets a specific element with an id a ribute. ID selectors are defined with a hash (#).
#example-id {
color: red;
This applies red color to the element with the ID example-id.
CSS Syntax: A CSS rule set consists of a selector and a declara on block. The declara on block contains
one or more declara ons inside curly braces {}. Each declara on includes a property and a value
separated by a colon (:), and each declara on ends with a semicolon (;).
Example:
h1 {
color: blue;
font-size: 24px;
}
This styles all <h1> elements to be blue and have a font size of 24 pixels.
Cascading and Inheritance:
Cascading: If mul ple rules apply to the same element, the browser decides which rule to apply
based on the source order, specificity, and importance.
Inheritance: Some proper es (like text color and font) are inherited by child elements, meaning if
you set a property on a parent element, its children will inherit that property unless otherwise
specified.
Types of CSS:
Inline CSS: Styles are applied directly within an HTML element using the style a ribute.
<p style="color: blue;">This is a blue paragraph.</p>
Internal CSS: Styles are placed within a <style> tag inside the <head> sec on of the HTML document.
<head>
<style>
p{
color: green;
</style>
</head>
External CSS: Styles are defined in an external CSS file and linked to the HTML document using a
<link> tag in the <head>.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Example external CSS file (styles.css):
body {
background-color: lightgray;
Common CSS Proper es:
Color and Backgrounds:
color: red; /* Text color */
background-color: yellow; /* Background color */
Font and Text:
font-family: Arial, sans-serif; /* Font family */
font-size: 16px; /* Font size */
text-align: center; /* Align text */
Margins and Padding:
margin: 20px; /* Space outside the element */
padding: 10px; /* Space inside the element */
Borders:
border: 2px solid black; /* Border thickness, style, and color */
Tables:
table, th, td {
border: 1px solid;
}
table {
width: 100%;
}
td {
text-align: center;
}
th, td {
padding: 15px;
text-align: le ;
}
tr:hover {background-color: coral;}
tr:nth-child(even) {background-color: #f2f2f2;}
th {
background-color: #04AA6D;
color: white;
}
Box Model: Every HTML element is treated as a rectangular box in CSS, and the box model consists
of:
Content: The actual content (text, image, etc.).
Padding: Space between the content and the border.
Border: The edge around the padding.
Margin: Space outside the border.
Example:
div {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
Posi oning: CSS allows you to posi on elements on the page using different techniques:
Sta c (default): Normal flow of the document.
Rela ve: Posi oned rela ve to its normal posi on.
Absolute: Posi oned rela ve to the nearest posi oned ancestor.
Fixed: Posi oned rela ve to the viewport.
Flexbox and Grid: Modern layout models for building complex designs.
Example of absolute posi oning:
.absolute-box {
posi on: absolute;
top: 50px;
le : 100px;
Responsive Design: CSS enables the crea on of responsive web designs that adjust based on the
screen size. Media queries are o en used for this purpose.
@media (max-width: 600px) {
body {
background-color: lightblue;
Pseudoclasses and Pseudoelements:
Pseudoclasses: Apply styles to elements in specific states, such as when a user hovers over a link.
a:hover {
color: red;
}
Pseudoelements: Style specific parts of an element, like the first le er or line.
p::first-le er {
font-size: 2em;
color: blue;
Example of a Simple CSS File
/* Define basic styles */
body {
background-color: white;
font-family: Arial, sans-serif;
/* Style the main heading */
h1 {
color: darkblue;
text-align: center;
/* Style paragraphs */
p{
color: gray;
font-size: 16px;
line-height: 1.5;
/* Add hover effect to links */
a:hover {
color: green;
/* Responsive design for small screens */
@media (max-width: 600px) {
h1 {
font-size: 18px;
p{
font-size: 14px;
Conclusion:
CSS is essen al for crea ng visually appealing and responsive websites. It offers a wide range of styling
op ons, from typography to layout, making websites flexible and easy to manage.
