YouTube Manual Beginner Tutorial: Stylized HTML with Embedded CSS By:Dustin Graham dustinrgraham@yahoo.com Introduction: This video is meant for people who already have a grasp on regular HTML/XHTML. The video is used to showcase how to add style to a normal HTML/XHTML web page by embedding CSS. We will be able to create a simple centered content layout in less than 10 minutes by creating a style sheet. We will also be doing this using a simple text editor such as Notepad or TextEdit. Any simple text editing software will work as long as it allows you to save as an .html file. Using these simple editors will allow you to get accustomed to the principles of CSS and HTML/XHTML. More advanced tools can get over whelming for a new developer. Additionally, word processing software such as Microsoft Word or Apple Pages cannot typically create files that a browser can read. For this tutorial feel free to play around with the code that I have supplied. A very good tool that I recommend is called Firebug. It is a supplemental editing tool that allows you to make changes on the fly. You can download Firebug at www.firebug.com. Please note that Firebug requires the use of the Firefox browser. So be sure that you have Firefox installed before downloading Firebug. Materials: HTML/XHTML template Simple text editor A web browser ie. FireFox, Internet Explorer Additional Resources: www.w3schools.com – Complete Web Tutorials www.w3.org – World Wide Web Consortium Outline: 1. For this video I will show how we can create a stylized web page like this using embedded CSS. 2. First, we need to start off with a simple HTML template. If you do not have a template already made simply copy this format. You can get a DocType by using Google and searching the word DocType. For this demonstration I have used HTML 4.01 Transitional. We are not going to worry about making the web page standards compliant just yet. 3. Here you can see that I have added a style tag to the head section of the HTML template. The style tag defines the style in a document and the type=“text/css” defines the content. This lets the browser know that we are using a CSS style sheet. 4. The format for adding CSS is based off of a selector, its property, and its value. A selector is an HTML element or tag that you wish to define. For this demonstration, we will be defining the body, a header, content, and footer section. The properties are attributes that you wish to change. For this instance we will use some simple properties that will be easy to understand. We will be using margin, background, color, and few additional properties that are easily notified. Each property can take a value. It is the value that will dictate the specific style change. The format for selector, property, and values are as follows; Selector {property: value} For easier scan-ability it is always easier to describe one property on each line. 5. You can see here that we have started to add styles to the body of the web page. We simply add the body selector to the format described in step 4. We set the default margin to zero to make sure that it is viewed the same across all browsers. Some browsers have different margin defaults and this will circumvent that. I have set the background to a dark grey by add the #111. This is HTML color code short hand. You can find different color codes by using Google and searching “HTML Color Wheel”, there are many different applications available to provide HTML color codes. We have set the color property to #000 which is black. This will make all text displayed on the page black. Additionally, all of the text will be aligned in the center using the text-align property and center. 6. Here you can see we have begun to stylize the header. We use the same format as before but we have added a # sign before the word header. This signifies the header as an ID. An ID is a unique identifier to an element and is can only be used once within a document. We are setting the header, footer, and content as ID’s because there are generally only one of these in any given web page. A discussion on ID v. Class will be breached in a more in depth tutorial of CSS. 7. I have used the width property to set how long the header will be. In this case it will stretch with the length of the window because I have set it at 100%. I have set the height to 50px for aesthetic reasons. It simply makes the header 50px high. Again you see the use of the background and margin as explained in step 5. For the header I have also added a border property. The border will be displayed at 2px in width and it will be a solid black. You can follow the values to see how this takes place.