Basic CSS

Cascading Style Sheets(CSS)

With CSS we can make the web page look how we want.
Lets apply some styles to the Basic HTML page we made.

CSS is easy to write and the basics are very simple.

Here is a basic CSS block:

body {color: #000000;}

“body” tells the browser to look for everything inside the HTML tags <body>

The “{ }”  start and stop that set of instructions.

“color” is used for the color of the text.

A colon is used to seperate

“#000000” is the hexadecimal code for the actual colors of things on a page.
This particular code means black.
We could also use the word “black” or in this case shorten it to three characters #000.

This next block tells the browser to make the body have red text that is 18 pixels in size.

body {
color: #ff0000;
font-size: 18px;
}

Lets insert this CSS into our first page and change the text inside the body tags to a red color.

Copy or type the following into a plain text editor like notepad or notepad++ and
save it as “firstpage.html” without the quotes.

<html>
<head>
<title>My First Web Page</title>

<style>

body {
color: #ff0000;
font-size: 18px;
}

</style>
</head>
<body>
This is my first page.  Now I’m going to learn some CSS to make things look a little better.
</body>
</html>

 

Your result should be something like the following picture.

firstpage

Leave a Reply