CSS describes how HTML elements look on screen, paper, or other media. This guide covers the fundamental ways to add CSS to your pages and the core techniques for styling text, backgrounds, borders, layouts, and animations.
style attr.
<style> tag.
.css file.
Fonts & color.
Flex & Grid.
Animations.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of documents written in HTML or XML. It defines how HTML elements should be displayed on the screen, on paper, or in other media.
This page covers the fundamental ways of using CSS to style web pages effectively — from adding your first color to building responsive layouts.
Every CSS rule follows selector { property: value; }. Start with a <style> block in your HTML <head>, target an element like p, and set color: blue; to see instant results.
There are three primary ways to include CSS in your HTML documents:
Add styles directly to an HTML element using the style attribute. Quick for one-off changes, but hard to maintain on large sites.
<p style="color: blue;">This is a blue paragraph.</p>Write CSS inside a <style> tag in the <head> section. Good for single-page demos and learning.
<head>
<style>
p {
color: red;
}
</style>
</head>Link a separate .css file from your HTML. This is the standard approach for real websites — one stylesheet can style many pages.
<head>
<link rel="stylesheet" href="styles.css">
</head>| Method | Where | Best for |
|---|---|---|
| Inline | style attribute | Quick tests, email templates |
| Internal | <style> in <head> | Learning, single-page demos |
| External | Linked .css file | Production websites |
Text styling is one of the most common uses of CSS. Control color, size, font, alignment, and decoration.
p {
color: #333;
font-size: 16px;
font-family: Arial, sans-serif;
text-align: center;
}font-family, font-size, font-weight, line-heightcolor, text-align, text-decoration, letter-spacingCSS provides properties to style element backgrounds with colors, gradients, and images.
body {
background-color: #f0f0f0;
}
.hero {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}background-color, background-image, background-size, background-positionDefine borders around elements with width, color, style, and rounded corners.
.card {
border: 2px solid #000;
border-radius: 5px;
}border-width, border-color, border-style, border-radiusModern CSS layouts use Flexbox and Grid for responsive, flexible page structures.
A one-dimensional layout method for arranging items in rows or columns.
.container {
display: flex;
justify-content: space-around;
}A two-dimensional layout method controlling rows and columns together.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}CSS animations and transitions add interactivity. Start with simple hover effects, then explore keyframe animations.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade {
animation: fadeIn 2s ease-in-out;
}animation-name, animation-duration, animation-timing-functiontransition for smooth property changes on hover or focus| Task | CSS / HTML |
|---|---|
| Inline style | <p style="color: blue;"> |
| Internal stylesheet | <style> p { color: red; } </style> |
| External stylesheet | <link rel="stylesheet" href="styles.css"> |
| Change text color | color: #333; |
| Page background | background-color: #f0f0f0; |
| Border + rounded corners | border: 2px solid #000; border-radius: 5px; |
| Flex row layout | display: flex; justify-content: space-around; |
| 3-column grid | display: grid; grid-template-columns: repeat(3, 1fr); |
| Hover transition | transition: background-color 0.5s; |
See inline vs internal styling and a bordered box:
Blue text from inline CSS
Red-styled paragraph (simulated internal CSS)
Practice the three ways to add CSS, then build a complete styled page with borders and hover effects.
Learn inline and internal methods before moving to external files.
Apply styles directly on an element with the style attribute.
<p style="color: #2563eb;">Blue paragraph</p>The browser reads the style attribute and applies those declarations only to that element. No selector needed.
Write rules in a <style> block so one rule can style many elements.
<style>
p { color: #dc2626; }
</style>The p selector targets every paragraph. Rules in <style> apply to the current HTML document only.
Combine text, background, and border properties.
Use font, color, alignment, and background properties together.
body {
background-color: #f0f4f8;
font-family: Georgia, serif;
}
p {
text-align: center;
background-color: #fff;
padding: 1rem;
}background-color on body sets the page backdrop. The paragraph gets its own white background, creating a card effect.
Combine text, backgrounds, borders, border-radius, and a hover transition.
.box {
width: 100px;
height: 100px;
background-color: #ef4444;
border: 2px solid #991b1b;
border-radius: 10px;
transition: background-color 0.5s;
}
.box:hover {
background-color: #2563eb;
}transition animates the background change over 0.5 seconds when you hover. :hover is a pseudo-class that applies styles on mouse-over.
styles.css.h1, p, nav rather than only divs.!important creates conflicting styles that are hard to debug.px, em, and % carelessly can cause unexpected sizing.property: value; with a trailing semicolon.rem for scalability.prefers-reduced-motion for users who disable animations.Tags like p, div, and h1 define content and semantics.
Selectors match HTML elements; declarations set visual properties.
Multiple rules resolve by specificity, source order, and importance.
Colors, spacing, layout, and motion transform plain HTML into polished UI.
Core CSS properties covered here — colors, fonts, backgrounds, borders, Flexbox, Grid, and transitions — have universal support in modern browsers.
Inline, internal, and external CSS work in every browser. Flexbox, Grid, and animations are production-ready.
Bottom line: Everything in this tutorial works in all current browsers without vendor prefixes.
CSS provides numerous ways to style and enhance web pages. By understanding inline, internal, and external styles, plus core techniques for text, backgrounds, borders, layouts, and animations, you can create visually appealing and responsive websites.
Practice the four examples above, then move to external stylesheets and dedicated layout tutorials. CSS transforms plain HTML into engaging, interactive experiences.
.card, .nav-link)!importantFoundation skills for every web developer.
Inline, internal, external.
Add CSSColor & fonts.
StyleColors & images.
FillFlex & Grid.
StructureTransitions.
AnimateOpen the HTML editor, add a <style> block, and experiment with colors, fonts, and layout.
5 people found this page helpful