Classes
Invent your own label and style exactly the tags that wear it.
index.html
1<!doctype html>
2<html>
3 <head>
4 <title>Classes</title>
5 <link rel="stylesheet" href="style.css">
6 </head>
7 <body>
8 <p>An ordinary paragraph.</p>
9 <p class="highlight">A very important paragraph!</p>
10 </body>
11</html>
style.css
1.highlight {
2 background-color: yellow;
3 padding: 10px;
4 border-radius: 8px;
5}
Every line, explained
<!doctype html>- <!doctype html> is the very first line of every real web page. It simply tells the browser "this is a modern HTML page"; it is a declaration, not a tag, so it never gets closed.
<html>- <html> is the root: every other tag on the page lives inside it. Intro to HTML skipped this wrapper; now you are writing pages the way the pros do.
<head>- <head> holds information ABOUT the page: its title, and links to other files. Nothing inside <head> is drawn on the page itself.
<title>Classes</title>- <title> names the browser tab. Look at the tab bar of a real browser: every name you see there is one of these.
<link rel="stylesheet" href="style.css">- This line connects the stylesheet: rel="stylesheet" says what the file IS, href="style.css" says where it lives. From now on, everything in style.css shapes how this page looks. One page, two files, working together.
</head>- </head> closes the head. The visible part of the page comes next.
<body>- <body> holds everything you can actually see: all the tags you learned in Intro to HTML go in here.
<p>An ordinary paragraph.</p>- No label on this one.
<p class="highlight">A very important paragraph!</p>- class is an attribute (like href in Intro to HTML) that puts YOUR OWN label on a tag. Any tag can wear a class, and many tags can share one.
</body>- </body> closes the body.
</html>- </html> closes the root tag. Nothing comes after it.
.highlight {- A selector starting with a dot targets a CLASS instead of a tag: "every tag labelled highlight". Tag selectors style categories; class selectors style exactly the things you choose.
background-color: yellow;- A classic highlighter yellow.
padding: 10px;- padding is breathing room INSIDE the box, between the text and its edge. Without it, the colour hugs the letters.
border-radius: 8px;- border-radius rounds the corners. A few pixels of rounding makes a box look friendly instead of sharp.
}- The } closes the rule. Only the labelled paragraph changes; the plain one is untouched.