This text in a p tag with a unique id. It's possible to have an id tag without an associated CSS selector, though this one changes the background color of the text.
Here is more text, this time with an inline tag that doesn't change the way the text around it is positioned, but it does change the way the text is rendered and appears on screen.
<html>
<head>
<title> Introduction to CSS </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navigation">
<a href="home.html"> home </a> | <a href="music.html"> music </a> | <a href="food.html"> food </a> | <a href="culture.html"> culture </a>
</div>
<h1> This whole page is in a san serif font! </h1>
<p id="info"> This text in a p tag with a unique id. It's possible to have an id tag without an associated CSS selector, though this one changes the background color of the text.</p>
<p> Here is more text, this time with an <span class="highlight">inline tag</span> that doesn't change the way the text around it is positioned, but it does change the way the text is rendered and appears on screen. </p>
</body>
</html>
the CSS code for this page is in a separate file called style.css
/* This is a CSS comment. It begins with a slash, followed by an *, then the content you want to comment out. It ends with an * follwed by a slash */
/* Element Selector : applies the style to all instances of the named element */
body {
font-family : "Verdana", sans-serif ;
background-color : deepskyblue ;
}
a {
text-decoration : none ;
color : black ;
}
/* Pseudo class : defines special state of the described element*/
a:hover {
text-decoration : underline ;
}
/* Class Selector : a named class you can apply to elements */
.navigation {
text-align : center ;
}
.highlight {
border : 1px solid black ;
background-color : greenyellow ;
}
/* ID Selector : a special ID you can give to one element in your page */
#info {
margin : 0 auto ;
text-align : left ;
background-color : rgba(100, 100, 100, 0.5);
border-style : dashed ;
border-color : floralwhite;
}