1. Introduction to CSS
CSS, or Cascading Style Sheets, is the language used to style and visually enhance HTML content on web pages.
While HTML defines the structure of a page, CSS controls its appearance, including colors, fonts, spacing, layout, and responsive behavior.
By separating content (HTML) from presentation (CSS), developers can create visually appealing and maintainable websites.
CSS uses selectors to target HTML elements and apply styles, allowing precise control over the look and feel of a webpage.
Learning CSS is essential for making your websites attractive, user-friendly, and responsive across devices.
2. Inline CSS
Inline CSS allows you to apply styles directly to an HTML element using the style attribute.
This method is useful for quick, single-element styling but is not recommended for large projects because it mixes content with presentation and makes maintenance harder.
<p style="color:blue; font-size:18px;">This is a blue paragraph.</p>
3. Internal CSS
Internal CSS is used to define styles within the same HTML document, inside the <style> tag, usually placed in the <head> section.
This method is useful when you want to style a single page without affecting other pages.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; font-size:20px; }
</style>
</head>
<body>
<p>This is a red paragraph.</p>
</body>
</html>
4. External CSS
External CSS is used to style multiple HTML pages using a single CSS file.
The styles are written in a separate .css file and linked to the HTML using the <link> tag inside the <head>.
This method is ideal for maintaining consistent styles across an entire website.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Styled paragraph using external CSS.</p>
</body>
</html>
5. CSS Selectors
CSS selectors are used to target HTML elements so you can apply styles to them.
There are several types of selectors that beginners should know:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
/* Element selector */
p {
color: blue;
}
/* ID selector */
#special {
font-weight: bold;
color: red;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* Grouping selector */
h1, h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a normal paragraph.</p>
<p id="special">This paragraph uses an ID selector.</p>
<p class="highlight">This paragraph uses a class selector.</p>
</body>
</html>
6. Colors & Background
CSS allows you to style the text color and the background of elements.
You can use color names, HEX codes, RGB, RGBA, or HSL values.
Backgrounds can be solid colors, gradients, or images.
<!DOCTYPE html>
<html>
<head>
<title>CSS Colors Example</title>
<style>
/* Text color using color name */
p {
color: blue;
}
/* Text color using HEX */
#hexColor {
color: #ff5733;
}
/* Text color using RGB */
#rgbColor {
color: rgb(0, 128, 0);
}
/* Background color */
.bgColor {
background-color: lightblue;
padding: 10px;
border-radius: 5px;
}
/* Background image */
.bgImage {
background-image: url('https://picsum.photos/300/100');
background-size: cover;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<p>This text is blue.</p>
<p id="hexColor">This text uses HEX color.</p>
<p id="rgbColor">This text uses RGB color.</p>
<div class="bgColor">This div has a background color.</div>
<div class="bgImage">This div has a background image.</div>
</body>
</html>
7. Fonts & Text
CSS allows you to style text in various ways including font family, size, weight, style, alignment, and spacing.
Using these properties, you can make text more readable and visually appealing.
<!DOCTYPE html>
<html>
<head>
<title>CSS Fonts & Text Example</title>
<style>
/* Font family */
.fontFamily {
font-family: Arial, sans-serif;
}
/* Font size */
.fontSize {
font-size: 24px;
}
/* Font weight */
.boldText {
font-weight: bold;
}
/* Font style */
.italicText {
font-style: italic;
}
/* Text alignment */
.centerText {
text-align: center;
}
/* Text decoration */
.underlineText {
text-decoration: underline;
}
/* Text transform */
.uppercaseText {
text-transform: uppercase;
}
/* Letter spacing */
.letterSpacing {
letter-spacing: 3px;
}
/* Line height */
.lineHeight {
line-height: 2;
}
</style>
</head>
<body>
<p class="fontFamily">This text uses Arial font.</p>
<p class="fontSize">This text is 24px in size.</p>
<p class="boldText">This text is bold.</p>
<p class="italicText">This text is italic.</p>
<p class="centerText">This text is centered.</p>
<p class="underlineText">This text is underlined.</p>
<p class="uppercaseText">This text is uppercase.</p>
<p class="letterSpacing">This text has letter spacing.</p>
<p class="lineHeight">This text has increased line height. It makes text easier to read.</p>
</body>
</html>
8. CSS Box Model
Every HTML element is a rectangular box. The CSS Box Model describes how the size of this box is calculated, including its content, padding, border, and margin.
Understanding the box model is essential for controlling spacing and layout on web pages.
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model Example</title>
<style>
.box {
width: 200px; /* Content width */
height: 100px; /* Content height */
padding: 20px; /* Space inside the box */
border: 5px solid blue; /* Border around the box */
margin: 30px; /* Space outside the box */
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box">This is a box.</div>
</body>
</html>
9. CSS Borders & Padding
Borders and padding are essential parts of the CSS Box Model. They help you control the space around content and the appearance of the box.
Padding creates space inside the box between content and border, while borders create a visible line around the element.
<!DOCTYPE html>
<html>
<head>
<title>Borders & Padding Example</title>
<style>
.box {
width: 200px;
padding: 20px; /* Space inside the box */
border: 5px solid red; /* Border thickness, style, and color */
margin: 20px; /* Space outside the box */
background-color: lightyellow;
}
.rounded-box {
padding: 15px;
border: 3px dashed green; /* Dashed border */
border-radius: 10px; /* Rounded corners */
background-color: lightblue;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">This box has padding and a solid border.</div>
<div class="rounded-box">This box has padding, dashed border, and rounded corners.</div>
</body>
</html>
10. CSS Flexbox
Flexbox is a powerful layout module in CSS that makes it easier to design flexible and responsive layouts.
It allows you to arrange items horizontally or vertically, align them, and distribute space dynamically.
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Example</title>
<style>
.container {
display: flex; /* Enables flex layout */
justify-content: space-around; /* Distribute space horizontally */
align-items: center; /* Align items vertically */
height: 200px;
background-color: #f0f0f0;
border: 2px solid #ccc;
}
.item {
background-color: #60a5fa;
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
width: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
11. CSS Animation
CSS animations allow you to create smooth transitions and motion effects for elements on a webpage.
Animations can change properties like position, color, size, and opacity over time.
<!DOCTYPE html>
<html>
<head>
<title>CSS Animation Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3b82f6;
border-radius: 10px;
animation: moveRotate 4s infinite alternate;
}
@keyframes moveRotate {
0% {
transform: translateX(0) rotate(0deg);
background-color: #3b82f6;
}
50% {
transform: translateX(150px) rotate(180deg);
background-color: #60a5fa;
}
100% {
transform: translateX(0) rotate(360deg);
background-color: #3b82f6;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>