What is CSS?
CSS stands for Cascading Style Sheets, because a CSS file defines visual styles for elements within an HTML page. A style defined for a an element is inherited by any elements that are nested within that element (hence, cascading).
Using CSS
Did you do your homework from the HTML Basics Lesson? If so, your code should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
My First HTML Page!</title>
</head>
<body>
<p>
This is my first HTML page. I know how to make words <em>italic</em> and <strong>bold</strong>...
</p>
<p>
and create seperate paragraphs.
</p>
</body>
</html>
Let’s build on this page with some CSS. Create a new file called styles.css in the same folder that your HTML document is. In this file, paste the following code:
body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
p {
background-color: #424242;
padding: 10px;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
}
Now, go back to your HTML document and add this line right before the closing head tag:
<link rel="stylesheet" type="text/css" href="styles.css" />
The Breakdown
There are a couple of things to note here before we look at the result. First, let’s talk about the CSS code. We began by typing body {, which is how we tell the browser that we are now going to define some styles for the body element and everything within it. We set the background color, the fonts to use, and the color of the text. If you’re confused by the way our colors look, that’s because they are hex values. Hex values are a way of defining precise colors for the web. #000000 means black, and #FFFFFF means white. Don’t worry, you don’t have to memorize all of the possible hex values, we will go over some tools for getting them in a later lesson. Also, you can see that we defined a few different fonts. The browser will start at the beginning of the list and if the viewer of the HTML page has that font, it will be used. If they don’t have that font, it will move on to the next one. The last one is “sans-serif” which tells the browser that if it gets to that, just use whatever the default sans-serif font is on the viewer’s machine.
Next, we closed the body styles with a right curly brace ( } ), and began some styles for the p element. We also set a background color here, as well as some other styles. Padding puts space between the contents of the element and the edges of it, for example:
no padding
with 10px padding
We also defined a few styles for the border. It will be one pixel wide, white, and solid (as opposed to dash, dotted, double, groove, inset, or hidden).
Another thing that you may have noticed is that we did not include a closing tag to the link element, where we linked to your stylesheet in the HTML page. This is because the link element is a self-closing element, which is written slightly differently. Instead of including a closing tag, we simply added a slash before the greater than symbol: <link ... />
Here is what your page should look like now:
There are many more styles in CSS. Here is a link to a complete reference of them: CSS Reference
Homework
Experiment with some different styles, and for now you can also use this website to get the hex values of many different colors: Hex Value Color Chooser
Happy coding, and see you next lesson!
Спасибо!
Nice post u have here
Added to my RSS reader
This is a wonderful site. Excellently put together and easy to learn.