If I have an HTML page with some embedded CSS styling:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<style>
#mytext {
color: white;
padding: 5px;
background-color: darkgray;
font-size: 30px;
font-weight: bold;
font-family: Arial;
}
</style>
<div id="mytext">Hi, here is some text.</div>
</body>
</html>
I can remove the <style> section and put the contents in a style.css file:
#mytext {
color: white;
padding: 5px;
background-color: darkgray;
font-size: 30px;
font-weight: bold;
font-family: Arial;
}
and add a <link> tag in the <head> of the HTML document, that references style.css:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<title>My Page</title>
</head>
<body>
<div id="mytext">Hi, here is some text.</div>
</body>
</html>
Now we have a stylesheet (CSS) file that can be shared by multiple HTML pages.
Next: CSS Selectors
Leave a comment