How to make web pages Part 2 - CSS
60Hope you did read the first part
This article is the second part of this article: How to make a web page (for people who are touching a computer for the first time) where I talked about the basic structure of a web page, from the essencial tags to headers and paragraphs, some text formatting tags and images.
Now I intent to tell you about CSS.
This will still be a simple guide, like the previous one.
What is CSS and what is it used for ?
CSS stands for Cascading Style Sheets and it's mainly used for design and formatting items in your web page. CSS code is very simple to use and learn.
Where does your CSS code go ?
You can use your CSS code inside the <style type="text/css"></style> tags that go inside the <head></head> tags of your web page, just like the folowing:
<html>
<head>
<title>The title of your web page</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Or you could put your CSS in a separate file, a plain text file normaly with the .css extension, and then you call that file inside your .html document, just like this:
<html>
<head>
<title>The title of your web page</title>
<link rel="stylesheet" type="text/css" href="location/to/your/style.css" />
</head>
<body>
</body>
</html>
The syntax of CSS Code
The syntax of CSS code is very simple.
Nothing marks the beginning or the end of the document, and you'll find mainly what you want to format, that is named a selector, and then properties of this selector, and values of the properties. Look at the example:
<style type="text/css">
h1 {font-size: 22px;
color: blue;
}
</style>
In the above example you see the <style></style> tags that mean that everything between them is CSS code, the h1 element is the selector that you are going to format, and the properties that belong to the h1 selector wrapped around the { }, with their values (the value of the property "font-size" is "22px", and the property of "color" is "blue"). Using the above, you will have every one of your h1 headers with 22px of font size and blue (you can also use an hexadecimal color code)
All the CSS Properties
This is the basic you had to learn, now I'll give you a list of all available CSS properties, and an example on how to use some of them.
List of CSS Properties
I don't want to make a HUGE hub that would make you don't want to read it, and also not have a bunch of links pointing to another page, so I'm just going to recomend you this list of CSS properties.
An example
<html>
<head>
<title>The title of your web page</title>
<style type="text/css">
body
{background-color:#000; /* Set the background in the whole page to black */
color:white; /* Set the color of the text to white */
font-family: "sans serif"; /* Set the font used in the web page*/
margin:0; /* Make sure the page will stick to the browser's size */
padding:4em; /* Have a 4em space between every margin and the content of the web page */
}
h1
{font-size:3em; /* Set the size of the first level header, H1 */
color:#F90; /* Set the color to #F90 */
padding:1em; /* Make the H1 have a 1em space from the rest of the content from each side */
}
h2
{font-size:2em;
color:#9F0;
padding:0.6em;
}
h3
{font-size:1.4em;
color:#FFF;
padding:0.6em;
}
a
{text-decoration:none; /* Prevent the underline in links */
color:blue; /* Make the link color blue */
}
a:hover /* Aply this properties when the user moves the mouse above the links */
{color:red;
border-bottom:1px dotted red; /* Have a border with 1px, with dots, and the color red */
}
p
{margin-top:1.5em; /* Have a distance of 1.5em from every content that is on the top of paragraphs */
}
img
{border:0; /* Make sure images don't have borders */
float:left; /* Make the image float between the text, to the left */
}
</style>
</head>
<body>
<h1>Test page</h1>
<p>This would be a sample paragraph. This would be a sample paragraph.
This would be a sample paragraph. This would be a sample paragraph.
This would be a sample paragraph. This would be a sample paragraph.
This would be a sample paragraph. This would be a sample paragraph.
This would be a sample paragraph. This would be a sample paragraph. </p>
<h2>Subtitle in the page</h2>
<img src="sampleimage.png" alt="there is no image here" />
<p>More text here, more text here, more text here, more text here,
more text here, more text here, more text here, more text here,
more text here, more text here, more text here, more text here,
more text here, more text here, more text here, more text here,
more text here, more text here, more text here, more text here,
<a href="http://any-place.domain">a link</a>, more text here, more text here.</p>
</body>
</html>
The text you see wrapped around /* and */ are comments within the CSS code and every thing inside /* and */ will not be interpreted in the browser
What to do now
I hope I could help a bit and still keep things simple.
All you have to do now is try, test and practice using CSS on your web pages. It's really worth it.
Make your pages and then open them in your browser to see what they look like. You can also check pages that you know and see what code they use, just right click the page with the mouse and then choose to see the page's source code. If you would like to see the code tidy and easy, install an extension like Firebug for Firefox (not sure if there's an Internet Explorer version available).
