What is CSS
CSS stands for cascading style sheet. A CSS code is used to style an HTML document. When you create a website a browser reads the HTML file and any CSS code, javascript, etc., written within the HTML. It then displays it according to what those codes tell it to do.
Sometimes the CSS code is written directly into the HTML. This is called an internal style sheet. The code is written between the <head> and </head> tags using the <style> tag.
Other times the CSS code will affect only a specific phrase, word or paragraph. This is called an in line style sheet. It is written on the same line that it is to affect using the <style> tag and the attribute that is to be applied.
When the website has several pages in it an external CSS is used. This is the type of style sheet we will go over today. The external style sheet can be applied to several HTML documents. When the CSS code is altered it will affect all the pages. An entire website can be formatted from one style sheet. This saves a lot of time, otherwise you would have to modify every single page of a website.
By entering the <link> tag the browser reads the file you have entered a link to, and applies it across all the pages of the website.
The <link> tag is a pointer that is placed inside the <head> and </head> tags of the HTML document.
Any text editor can be used to write a CSS style sheet. Today we will use Notepad.
HTML Basics
If an external link is placed after the internal style sheet in the HTML <head> section the external will take precedence over the internal style sheet Anything between the <> and the </> is called an element.
When you write an html document you must indicate to the browser where the beginning of each element is and where the end is. This is done by entering <> at the beginning of an element and this </> is at the end.
The following HTML document has some of the most common elements you will find. You will get to know them very well writing html documents. Using Notepad we will create a webpage and link an external CSS to it.
First we will create the basic HTML document and view it on your browser.
Click start -> All Programs -> Notepad
Enter the following code:
Plain HTML Document
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html><html><head><h1>Creating Your Own Webpage is Inspiring<h1><body>When you open your browser and type in the location of your HTML document, your page pops up just like a webpage because it IS a webpage!</body><p>The various tags you put into your HTML document will affect how your webpage is displayed. It's really up to you how creative you want to be.</p></body></html> |
Tags Defined
After you have written the HTML code save it somewhere like your desktop for easy retrieval. Use the file extension .htm or .html.
The code you just entered tells the browser, line by line, what to display. The first line is important because it tells the browser what type of document it is reading. Entering <!DOCTYPE html> tells the browser it's an HTML document.
The <html> tells the browser, here's the start of the web page. </html> tells it, this is the end of the web page. The <body> tag tells the browser that this is what I want to appear on the screen. The body tag ends with </body> tag.
Entering <h1> tells the browser this is the first heading. Indicating number one will make the heading appear larger than the rest of the text. H2 is smaller than h1, h3 is smaller, h4 is even smaller and so on. Paragraphs start with <p> and end with </p>.
Now open your browser. I will be using Internet Explorer.
At the top of the page, on the left, click -> File -> Browse, and browse to where you saved the HTML document. Click on the document and press OK. The page is now displayed in your browser!
Create a CSS File
Now create a new Notepad document. Click Start ->All Programs -> Notepad. This is going to be the CSS file that we put a link to.
Enter the following code:
body
{body
background-color:yellow
}
{
font-family:"Georgia";
font-size:30px;
}
Click Save and name it something like "mystyle" (minus the quotes). Save it as a .css file type.
Link the Stylesheet
Change the Color of the Text
Now we will add a link to the .css file you just created in the HTML
document that will change the background color, the font type and the
size of the font displayed.
Locate your HTML document and open it.
Add the following <link> to the HTML after the <head>
section. (Insert the name in which you saved your .css file if it is
different than the suggested mystyle.css): <link rel="stylesheet" type="text/css" href="mystyle.css">
This tells the browser you're using a style sheet and it is in the format of text/css and to retrieve it in "mystyle.css"
So now your HTML looks like the code below.
HTML With Link to Stylesheet
1
2
3
4
5
6
7
8
9
| <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><h1>Creating Your Own Webpage is Inspiring<h1><body>When you open your browser and type in the location of your HTML document, your page pops up just like a webpage because it IS a webpage!</body><p>The various tags you put into your HTML document will affect how your webpage is displayed. It's really up to you how creative you want to be.</p></body></html> |
Check Out the Results Save your HTML with the same name as you chose before and click ok if it asks to overwrite the current one. Open up your browser click on File -> Open -> Browse-> and browse to your HTML file and click on it it, click ok and your page should appear. It should look similar to the picture below. Just changing the name of the color in your .css file will change the output and the same goes for the font and size of the font.
EmoticonEmoticon