Learn what CSS is, how to add styles to HTML, and write your first CSS rules to change the appearance of a web page.
CSS stands for Cascading Style Sheets. While HTML defines the structure and meaning of your content, CSS controls how that content looks — colors, fonts, spacing, layout, and more.
Without CSS, every web page would be plain black text on a white background with default browser styles. CSS is what transforms a bare HTML document into a visually appealing, well-designed website.
The word cascading refers to the way styles are applied: when multiple rules target the same element, CSS uses a set of priority rules to determine which style wins. You will learn more about this cascade as you progress.
There are three methods for adding CSS to an HTML document:
Inline styles — Add a style attribute directly to an HTML element. This approach is quick for one-off changes but hard to maintain.
<p style="color: blue;">This text is blue.</p>Internal stylesheet — Place CSS rules inside a <style> tag in the <head> of your document. This keeps styles separate from content but limits them to a single page.
<style>
p { color: blue; }
</style>External stylesheet — Write CSS in a separate .css file and link it with a <link> tag. This is the preferred method for real projects because styles can be shared across multiple pages.
<link rel="stylesheet" href="styles.css">For the lessons in this course, we will primarily use internal stylesheets (the <style> tag) so you can see both HTML and CSS in one place.
<style>
/* selector { property: value; } */
h1 {
color: blue;
font-size: 32px;
}
p {
color: gray;
font-size: 18px;
line-height: 1.6;
}
</style>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>Which method of adding CSS is best for sharing styles across multiple pages?