| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Basic Syntax
A CSS rule consists of a selector and a declaration block.
Selector: This specifies the HTML element you want to style.
Declaration Block: This contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
selector {
property: value;
property: value;
}
Example
Let’s start with a simple example to change the color and font size of all ‘<p>‘ elements:
p {
color: blue;
font-size: 16px;
}
This rule will make all paragraph text blue and 16 pixels in size.
Selectors
Selectors can be quite powerful and allow you to target elements in various ways.
1. Element Selector
Targets HTML elements by their name.
h1 {
color: green;
}
2. Class Selector
Targets elements with a specific class attribute. Classes are prefixed with a dot (‘.‘).
HTML:
<p class="intro">This is an introduction paragraph.</p>
CSS:
.intro {
font-style: italic;
}
3. ID Selector
Targets elements with a specific id attribute. IDs are prefixed with a hash (‘#‘).
HTML:
<p id="unique">This paragraph has a unique style.</p>
CSS:
#unique {
font-weight: bold;
}
4. Attribute Selector
Targets elements based on an attribute or attribute value.
a[href] {
text-decoration: none;
}
5. Descendant Selector
Targets elements that are descendants of another element.
div p {
color: red;
}
Declaration Block
The declaration block contains CSS properties and their corresponding values.
Common CSS Properties
1. Color: Sets the text color.
color: red;
2. Font-size: Sets the size of the font.
font-size: 14px;
3. Background-color: Sets the background color of an element.
background-color: yellow;
4. Margin: Sets the space outside the element.
margin: 20px;
5. Padding: Sets the space inside the element.
padding: 10px;
6. Border: Sets the border around an element.
border: 1px solid black;
Example
Here’s a more complex example combining various selectors and properties:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 id="main-title">Welcome to My Website</h1>
<div class="container">
<p class="intro">This is the first paragraph inside the container.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
CSS (styles.css):
/* ID Selector */
#main-title {
font-size: 24px;
color: navy;
}
/* Class Selector */
.container {
border: 1px solid #ccc;
padding: 10px;
}
/* Class Selector and Element Selector */
.container .intro {
font-style: italic;
color: gray;
}
/* Descendant Selector */
.container p {
font-size: 14px;
line-height: 1.5;
}
Cascading and Specificity
Specificity Hierarchy
<p style="color: blue;">This is a blue paragraph.</p>
#main-title { color: red; }
.title { color: blue; }
<h1 id="main-title" class="title">Title</h1> <!-- This will be red -->
.intro { color: green; }
p { color: yellow; }
intro‘, it will be green:
<p class="intro">Intro paragraph</p> <!-- This will be green -->
