Dive into the world of Cascading Style Sheets (CSS) and learn how to make your web pages beautiful and responsive. CSS is the language we use to style an HTML document.
CSS stands for Cascading Style Sheets. It's a stylesheet language used to describe the presentation of a document written in HTML (or XML). This includes colors, layout, and fonts, making your web content visually appealing and organized. Without CSS, web pages would look like plain text documents.
HTML provides the structure, CSS provides the style!
There are three main ways to include CSS in your HTML documents:
Applied directly to an HTML element using the `style` attribute. Useful for small, specific style changes, but generally not recommended for larger projects as it mixes content and presentation.
<p style="color: blue; font-size: 18px;">This text is styled inline.</p>This text is styled inline.
Placed within a `<style>` tag in the `<head>` section of your HTML document. Good for single-page styles or when you don't have external CSS files.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1 {
color: purple;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello with Internal CSS!</h1>
</body>
</html>The most common and recommended method. CSS rules are written in a separate `.css` file and linked to the HTML document using the `<link>` tag in the `<head>` section. This keeps your HTML clean and allows styles to be reused across multiple pages.
`styles.css` content:
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.external-text {
color: darkgreen;
font-weight: bold;
}`index.html` content:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="external-text">This text is styled from an external stylesheet.</p>
</body>
</html>This text is styled from an external stylesheet.
Visual Studio Code (VS Code) is a popular, free, and open-source code editor that's excellent for web development. It offers many features and extensions to make coding easier. Here's how you can set it up to run your HTML and CSS code locally:
The Live Server extension provides a local development server with live reload capability. This means your browser will automatically refresh every time you save changes to your HTML or CSS files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First VS Code Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="main-heading">Welcome to VS Code Web Dev!</h1>
<p class="styled-paragraph">This paragraph is styled using an external CSS file.</p>
<button class="my-button">Click Me!</button>
</body>
</html>body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: #333;
}
.main-heading {
color: #2c3e50;
font-size: 2.5em;
margin-bottom: 20px;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
}
.styled-paragraph {
background-color: #ecf0f1;
padding: 15px 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
font-size: 1.1em;
text-align: center;
}
.my-button {
background-color: #3498db;
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease;
}
.my-button:hover {
background-color: #2980b9;
}Now, whenever you save changes to `index.html` or `styles.css` in VS Code, Live Server will automatically refresh your browser, showing your updates instantly!
Selectors are used to "find" (or select) the HTML elements you want to style.
Selects HTML elements based on their tag name.
/* CSS */
p {
color: #333;
}
<!-- HTML -->
<p>This paragraph will be dark gray.</p>This paragraph will be dark gray.
Selects HTML elements with a specific `class` attribute. Classes can be used on multiple elements.
/* CSS */
.highlight {
background-color: yellow;
font-weight: bold;
}
<!-- HTML -->
<p class="highlight">This text is highlighted.</p>
<span class="highlight">So is this.</span>This text is highlighted.
Selects the HTML element with a specific `id` attribute. An ID must be unique within a page.
/* CSS */
#main-title {
color: red;
text-decoration: underline;
}
<!-- HTML -->
<h1 id="main-title">Important Title</h1>Selects all HTML elements on the page.
/* CSS */
* {
margin: 0;
padding: 0;
}
<!-- HTML -->
<p>No margin or padding here.</p>
<div>Neither here.</div>No margin or padding here.
Selects multiple elements to apply the same style.
/* CSS */
h1, h2, p {
font-family: sans-serif;
}
<!-- HTML -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>A paragraph.</p>A paragraph.
Selects an element that is a descendant of another specified element.
/* CSS */
div p {
border: 1px dashed gray;
padding: 5px;
}
<!-- HTML -->
<div>
<p>This paragraph is inside a div.</p>
</div>
<p>This paragraph is NOT inside a div.</p>This paragraph is inside a div.
This paragraph is NOT inside a div.
A CSS rule consists of a selector and a declaration block. The declaration block contains one or more declarations, each consisting of a CSS property name and a value, separated by a colon.
/* Selector */
h2 {
/* Property: Value; */
color: #007bff; /* Sets text color to blue */
font-size: 24px; /* Sets font size to 24 pixels */
margin-bottom: 10px; /* Adds space below the element */
}This heading has custom color, size, and margin.
Every HTML element is treated as a rectangular box. The CSS Box Model describes how these boxes are laid out and how their dimensions are calculated. It consists of:
The `box-sizing` property controls how `width` and `height` are calculated.
`width` and `height` apply to content only. Padding/border are added *outside*.
Total width: 150px (content) + 8px (padding) + 8px (border) = 166px
`width` and `height` include padding/border. Padding/border are taken *from inside*.
Total width: 150px
/* CSS */
.box-content-example {
box-sizing: content-box; /* Default */
width: 150px;
height: 70px;
padding: 4px; /* 4px on all sides */
border: 4px solid blue;
}
.box-border-example {
box-sizing: border-box;
width: 150px;
height: 70px;
padding: 4px;
border: 4px solid green;
}CSS allows you to control the colors of text, backgrounds, and other elements.
/* CSS */
.red-text {
color: red;
}
.hex-color {
color: #FF5733; /* Hexadecimal color code */
}
.rgb-color {
color: rgb(0, 128, 0); /* RGB color code */
}
<!-- HTML -->
<p class="red-text">This text is red.</p>
<p class="hex-color">This text is orange-red.</p>
<p class="rgb-color">This text is green.</p>This text is red.
This text is orange-red.
This text is green.
/* CSS */
.blue-bg {
background-color: lightblue;
padding: 10px;
border-radius: 5px;
}
<!-- HTML -->
<div class="blue-bg">This div has a light blue background.</div>You can set an image as the background of an element.
/* CSS */
.hero-section {
background-image: url('https://placehold.co/600x150/87CEEB/FFFFFF?text=Background+Image');
background-size: cover; /* Covers the entire element */
background-position: center; /* Centers the image */
color: white;
padding: 40px;
text-align: center;
border-radius: 8px;
}
<!-- HTML -->
<div class="hero-section">
<h2>Welcome to Our Site!</h2>
<p>Enjoy the beautiful background.</p>
</div>Enjoy the beautiful background.
CSS offers extensive control over typography.
Specifies the font for an element. Always provide fallback fonts.
/* CSS */
.serif-font {
font-family: "Times New Roman", Times, serif;
}
.sans-serif-font {
font-family: Arial, Helvetica, sans-serif;
}
<!-- HTML -->
<p class="serif-font">This text uses a serif font.</p>
<p class="sans-serif-font">This text uses a sans-serif font.</p>This text uses a serif font.
This text uses a sans-serif font.
Sets the size of the text. Can use pixels (`px`), ems (`em`), rems (`rem`), percentages (`%`), etc.
/* CSS */
.small-text {
font-size: 14px;
}
.large-text {
font-size: 2em; /* 2 times the parent element's font-size */
}
<!-- HTML -->
<p class="small-text">Small text.</p>
<p class="large-text">Large text.</p>Small text.
Large text.
Specifies the thickness of the characters.
/* CSS */
.bold-text {
font-weight: bold;
}
.light-text {
font-weight: 300; /* Numeric values from 100 to 900 */
}
<!-- HTML -->
<p class="bold-text">This text is bold.</p>
<p class="light-text">This text is light.</p>This text is bold.
This text is light.
Aligns the text within an element.
/* CSS */
.center-text {
text-align: center;
}
.right-text {
text-align: right;
}
<!-- HTML -->
<p class="center-text">Centered text.</p>
<p class="right-text">Right-aligned text.</p>Centered text.
Right-aligned text.
Sets the height of each line of text.
/* CSS */
.tight-lines {
line-height: 1.2;
}
.loose-lines {
line-height: 2;
}
<!-- HTML -->
<p class="tight-lines">This paragraph has tight line spacing. It's good for compact text blocks.</p>
<p class="loose-lines">This paragraph has loose line spacing. It's often used for readability in longer texts.</p>This paragraph has tight line spacing. It's good for compact text blocks.
This paragraph has loose line spacing. It's often used for readability in longer texts.
Flexbox (Flexible Box Layout Module) is a one-dimensional layout method for arranging items in a single row or column. It's incredibly powerful for distributing space and aligning content.
To use Flexbox, you set `display: flex` on the parent container. Its direct children become flex items.
/* CSS */
.flex-container {
display: flex;
border: 2px dashed #6366f1; /* Indigo 500 */
padding: 10px;
background-color: #e0e7ff; /* Indigo 100 */
}
.flex-item {
background-color: #818cf8; /* Indigo 400 */
color: white;
padding: 15px;
margin: 5px;
border-radius: 5px;
}
<!-- HTML -->
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>Aligns flex items along the main axis (default is horizontal). Common values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`.
/* CSS */
.justify-center {
display: flex;
justify-content: center;
border: 2px dashed #a855f7; /* Purple 500 */
padding: 10px;
background-color: #f3e8ff; /* Purple 100 */
}
.justify-space-between {
display: flex;
justify-content: space-between;
border: 2px dashed #a855f7;
padding: 10px;
background-color: #f3e8ff;
margin-top: 10px;
}
.flex-item-small {
background-color: #c084fc; /* Purple 400 */
color: white;
padding: 10px;
margin: 5px;
border-radius: 5px;
}
<!-- HTML -->
<div class="justify-center">
<div class="flex-item-small">Center 1</div>
<div class="flex-item-small">Center 2</div>
</div>
<div class="justify-space-between">
<div class="flex-item-small">Between 1</div>
<div class="flex-item-small">Between 2</div>
<div class="flex-item-small">Between 3</div>
</div>Aligns flex items along the cross axis (default is vertical). Common values: `flex-start`, `flex-end`, `center`, `stretch`.
/* CSS */
.align-center {
display: flex;
align-items: center; /* Vertically centers items */
height: 100px; /* Give container a height to see effect */
border: 2px dashed #14b8a6; /* Teal 500 */
padding: 10px;
background-color: #ccfbf1; /* Teal 100 */
}
.flex-item-variable {
background-color: #2dd4bf; /* Teal 400 */
color: white;
padding: 10px;
margin: 5px;
border-radius: 5px;
}
.flex-item-variable:nth-child(2) {
padding: 20px 10px; /* Taller item */
}
<!-- HTML -->
<div class="align-center">
<div class="flex-item-variable">Short</div>
<div class="flex-item-variable">Tall Item</div>
<div class="flex-item-variable">Medium</div>
</div>Responsive web design is about making web pages look good on all devices (desktops, tablets, and phones). Media queries are a CSS technique that allows you to apply different styles based on device characteristics, most commonly screen width.
/* CSS */
.responsive-box {
background-color: lightblue;
padding: 20px;
text-align: center;
font-size: 18px;
border: 2px solid blue;
border-radius: 8px;
transition: background-color 0.3s ease; /* Smooth transition */
}
/* Styles for screens smaller than 768px (e.g., mobile) */
@media (max-width: 767px) {
.responsive-box {
background-color: lightcoral;
font-size: 14px;
border-color: red;
}
}
<!-- HTML -->
<div class="responsive-box">
Resize your browser window to see me change!
<p class="text-xs mt-2">(I'm red on small screens, blue on larger ones)</p>
</div>(I'm red on small screens, blue on larger ones)
To see the media query effect, try resizing your browser window or viewing this on a mobile device. On smaller screens, the box will turn red and the font size will decrease.
You've completed the CSS Fundamentals Course! You now have a solid understanding of how to style your web pages using CSS, from basic properties to layout with Flexbox and adapting to different screen sizes with Media Queries.
Keep practicing and experimenting to master these concepts!