CSS Tutorial
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout of multiple web pages all at once.
1. CSS Syntax
CSS consists of selectors and declarations. A selector points to the HTML element you want to style. Declarations are enclosed in curly braces and consist of property-value pairs.
selector {
property: value;
}
For example:
p {
color: blue;
font-size: 16px;
}
This paragraph is styled with blue text and a font size of 16 pixels.
2. Including CSS in HTML
There are three main ways to include CSS in your HTML documents:
a. Inline CSS
Styles are applied directly to HTML elements using the style attribute.
<p style="color: red; font-weight: bold;">This is a red, bold paragraph.</p>
This is a red, bold paragraph.
b. Internal CSS
Styles are defined within the <style> tag inside the <head> section.
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is a green heading.</h1>
</body>
This is a green heading.
c. External CSS
Styles are written in a separate CSS file and linked to the HTML document using the <link> tag.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Contents of styles.css:
body {
background-color: #e0e0e0;
}
The background color of this section is light gray.
3. CSS Selectors
Selecting the right HTML elements to style is crucial. Here are some common selectors:
a. Element Selector
Selects all elements of a specific type.
h2 {
border-bottom: 2px solid #333;
}
This heading has a bottom border.
b. Class Selector
Selects elements with a specific class attribute. Classes are reusable.
.green-text {
color: green;
}
<p class="green-text">This text is green.</p>
This text is green.
c. ID Selector
Selects a single element with a specific id attribute. IDs should be unique within a page.
#unique-heading {
text-align: center;
}
<h3 id="unique-heading">This heading is centered.</h3>
This heading is centered.
4. CSS Box Model
The box model describes the rectangular boxes generated for elements in the document tree and consists of margins, borders, padding, and the actual content.
.box {
width: 200px;
padding: 20px;
border: 5px solid #333;
margin: 15px;
background-color: #f9f9f9;
}
<div class="box">This div uses the CSS box model.</div>
5. CSS Positioning
CSS positioning allows you to control the layout of elements on a page. The main positioning schemes are static, relative, absolute, fixed, and sticky.
Absolute Positioning
Positions the element relative to its first positioned ancestor.
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #ddd;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 50px;
background-color: coral;
}
<div class="container">
<div class="absolute-box">Absolutely Positioned</div>
</div>
6. CSS Flexbox
Flexbox is a layout mode designed to accommodate different screen sizes and display devices. It makes it easier to design flexible and responsive layout structures.
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 150px;
background-color: #eef;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #8fa;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
}
<div class="container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
7. CSS Responsive Design
Responsive design ensures that web pages render well on a variety of devices and window or screen sizes. Media queries are a key part of responsive design.
/* Base styles */
.container {
background-color: #fff;
padding: 20px;
}
/* Styles for screens wider than 600px */
@media (min-width: 600px) {
.container {
background-color: #cce;
padding: 40px;
}
}
<div class="container">
Resize the browser window to see the background color and padding change.
</div>
When the viewport width is at least 600 pixels, the container's background color changes to light green and the padding increases.
8. CSS Typography
CSS provides various properties to control the typography of your web pages, including font families, sizes, weights, and styles.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
line-height: 1.6;
}
h1 {
font-size: 36px;
font-weight: bold;
color: #333;
}
p {
font-style: italic;
color: #555;
}
<h1>Stylish Heading</h1>
<p>This paragraph is italicized and has a specific font style.</p>
Stylish Heading
This paragraph is italicized and has a specific font style.
9. CSS Colors
CSS allows you to define colors using different formats such as named colors, hexadecimal, RGB, RGBA, HSL, and HSLA.
/* Named color */
.background {
background-color: lightblue;
}
/* Hexadecimal color */
.text {
color: #ff6347;
}
/* RGB color */
.border {
border: 2px solid rgb(0, 128, 0);
}
/* RGBA color with transparency */
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}
/* HSL color */
.highlight {
background-color: hsl(120, 100%, 50%);
}
/* HSLA color with transparency */
.semi-transparent {
background-color: hsla(240, 100%, 50%, 0.3);
}
<div class="background">Light Blue Background</div>
<p class="text">Tomato Colored Text</p>
<div class="border">Green Border</div>
<div class="overlay">Semi-transparent Black Background</div>
<div class="highlight">Bright Green Highlight</div>
<div class="semi-transparent">Semi-transparent Blue Background</div>
Tomato Colored Text
10. CSS Transitions
CSS transitions allow you to change property values smoothly over a given duration, enabling animations.
.button {
background-color: #008CBA;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
border: none;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: #005f6a;
}
<button class="button">Hover Over Me</button>
When you hover over the button, its background color smoothly transitions from blue to dark blue over half a second.
Conclusion
This introduction covered the basics of CSS, including syntax, selectors, the box model, positioning, flexbox, responsive design, typography, colors, and transitions. With these fundamentals, you can start styling your web pages to create visually appealing and responsive designs.
As you continue learning, explore more advanced topics such as CSS Grid, animations, variables, and preprocessors like SASS or LESS to enhance your styling capabilities.