CSS Introduction
CSS stands for Cascading Style Sheets. It is the language used to describe how an HTML document looks: colors, fonts, spacing, layout, animation.
HTML + CSS
HTML defines the structure; CSS defines the presentation. Together they produce a styled web page.
What CSS can do
- Set colors, fonts, and text size on any element.
- Position elements with flexbox, grid, or absolute layout.
- Build responsive layouts that adapt to phones, tablets, and desktops.
- Animate transitions, hover effects, and full keyframe animations.
- Theme an entire site by changing a handful of CSS custom properties.
Note: CSS is cascading — when several rules apply to the same element, the browser picks a winner based on specificity, source order, and importance.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Introduction</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Link an external stylesheet named "style.css" from the document head.
<link rel="stylesheet"
="style.css">
The same attribute the <a> tag uses to point at a URL.
Discussion
Loading…