Great job!
Welcome to second quarter! Time for CSS!
Today’s featured website:
HTML vs CSS
HTML simply describes the elements on a page (paragraph, links, titles, images, etc.) while CSS controls how they look and where they go. Today we will begin practicing with CSS.
We will also use Notepad++ to work on a basic webpage using HTML and CSS.
Today you will learn:
– How to add a background image
– How to style links
– How to change the color and font of your text
To begin, copy and paste the following code into Notepad++. Please save it as csspractice1.html.
Click here for fonts (for when you will be changing the font)
Click here for colors (for when you will be changing the colors)
<html>
<head>
<title>Page title</title>
<style type=”text/css”>
body
{
background-color: #d0e4fe;
background-image: url(“dogs.gif”);
background-repeat: repeat;
background-position: center;
font-family: Times New Roman;
font-size: 1em;
}
h1
{
color: orange;
text-align: center;
font-family: Times New Roman;
font-size: 3em;
}
h2
{
color: orange;
text-align: center;
font-family: Times New Roman;
font-size: 2em;
}
p
{
font-family: Times New Roman;
font-size: 1em;
}
a:link
{
text-decoration: none;
color: purple;
}
a:visited
{
text-decoration: none;
color: blue;
}
a:hover
{
text-decoration: underline;
color: red;
}
a:active
{
text-decoration: underline;
color: green;
}
</style>
</head>
<body>
<!– We need to use some HTML in here so we can see our cool styles!
Try adding a paragraph, a headline, and a link.
If you don’t remember how to do that, check out your old files in Notepad++.
You can quickly look by clicking on the name of the page in Notepad (top left). –>
</body>
</html>