Brtest Tutorial
CSS – Styling the Web
CSS (Cascading Style Sheets) is used to control the look and layout of your HTML pages. It allows you to set colors, fonts, spacing, alignment, and much more.
Note: CSS works together with HTML. HTML builds the structure, CSS makes it look beautiful.
What is CSS?
CSS is a stylesheet language that describes how HTML elements should be displayed on screen, paper, or in other media.
Example
Change text color and background:
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 32px;
}
Try it Yourself »
Tip: You can add CSS directly in the HTML file or link an external .css file.
Ways to Add CSS
There are three ways to insert CSS:
- Inline CSS - using the
styleattribute inside an HTML element - Internal CSS - inside a
<style>element in the<head> - External CSS - in a separate
.cssfile linked from the HTML
Example: Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgrey;}
h1 {color: blue;}
p {font-size: 18px;}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This page uses internal CSS.</p>
</body>
</html>
Try it Yourself »
Example: External CSS
HTML file:
<link rel="stylesheet" href="styles.css">
styles.css:
body {background-color: white;}
h1 {color: darkgreen;}
Try it Yourself »
CSS Selectors
CSS selectors define which HTML elements the style rules apply to.
Example
Styling by element, class, and ID:
/* Element selector */
p { color: darkslategray; }
/* Class selector */
.intro { font-size: 20px; color: blue; }
/* ID selector */
#main { background: #f0f0f0; padding: 10px; }
Try it Yourself »
Tip: IDs are unique per page, while classes can be reused on multiple elements.
Colors and Fonts
CSS can set colors, background, and fonts to make your page visually appealing.
Example
body { background-color: #f8f8f8; }
h1 { color: #1a73e8; font-family: Verdana, sans-serif; }
p { color: #333; font-size: 18px; }
Try it Yourself »
Tip: Use web-safe fonts or import fonts with @import or Google Fonts.
The CSS Box Model
Every HTML element is considered a box, with margins, borders, padding, and content. Understanding the box model helps you design layouts precisely.
Example
div {
width: 300px;
padding: 20px;
border: 5px solid gray;
margin: 10px;
}
Try it Yourself »
Note: Total element width = width + padding + border + margin.
Flexbox and Grid Layout
CSS Flexbox and Grid make it easy to create flexible and responsive layouts without using floats or tables.
Example: Flexbox
.container {
display: flex;
gap: 10px;
}
.box {
background: lightblue;
padding: 20px;
flex: 1;
}
Try it Yourself »
Example: CSS Grid
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background: peachpuff;
padding: 20px;
text-align: center;
}
Try it Yourself »
Responsive Design
Use media queries to make your web page adapt to different screen sizes.
Example
@media (max-width: 600px) {
body { background-color: lightyellow; }
h1 { font-size: 24px; }
}
Try it Yourself »
Tip: Test your site in both desktop and mobile views using the browser’s developer tools.
Summary
- CSS styles how your HTML looks
- Use selectors to target elements
- Learn the box model to control spacing
- Use Flexbox or Grid for layouts
- Apply media queries for responsiveness
Next, you will learn how to make your web pages interactive using JavaScript.
