CSS Styles Text Formatting Review Step 1- Creating a new XHTML Website (2points) 1. Download Styles.html and plan_website.do c from the calendar 2. Open Styles.html in your browser. 3. Open Styles.html in Notepad 4. Open plan_website.do c and copy text to web page. 5. Add a title to the page 1. Go to my calendar. Right mouse click on styles.html, choose save target as and save it to your folder. Do the same thing for plan_website.doc. 2. Go to your folder. Double click on Styles.html to open the webpage in a browser. 3. Go to your folder and right mouse-click on styles.html, choose open with, and choose Notepad. 4. Open plan_website.doc document. Copy and paste the content of the MS Word document into your web page between <body> and </body> tags. 5. Add a new title for your new document between <head> and </head> tags. For example: <title>planning a Web Site</title>
Step 2 - Adding Embedded (internal) CSS styles (2 Points) 1. Add background color to the page body 2. Change the font for the entire page Embedded styles must be added to a <head> section of your HTML document using <style></style> tag. Add CSS rule to format the page - <body> tag. <body> tag holds the text, images and content of your Web page. Using embedded CSS styles, set a background-color and fontfamily properties to the body of the document, using embedded styles. Within the <head> portion of the document, right after the closing </title> tag and add the following: <style type="text/css"> body { background-color:#dddddd; font-family:verdana, Arial, sans-serif; </style>
Step 3 - Add and Format Heading level one - <h1> (2 points) 1. Add <h1> tag 2. Change the text alignment to center 3. Change font color to medium blue Within the <body> portion of your document, locate the page heading: Planning and Organizing a Web Site. Surround this text with <h1> and </h1> tags as shown below: <h1>planning and Organizing a Web Site</h1> Go to the <style> block in the <head> section of your document. Add new CSS rule for <h1> (shown in bold) as follows: <style type="text/css"> body { background-color:#dddddd; font-family:verdana, Arial, sans-serif; h1{ text-align:center; color:#336699; </style>
Step 3 - Add Heading level two - <h2> to all the sub-titles on the web page (2 points) 1. Add <h2> tags to all the subtitles Locate all the subtitles, such as Determine your target audience, Consider the purpose of the site, and so forth. Surround the text with <h2> </h2> tags. Example: <h2>sketch a web-site folder layout</h2> <h2>consider the purpose of the site.</h2> <h2>sketch a web-site folder layout</h2> <h2>choose File names</h2> <h2>design a site map</h2>
Step 4 - Adding paragraphs - <p> tags (2 points ) 1. Add paragraph to create blocks of text for better readability. Use <p> tag to create blocks of text for better readability. Your text should be organized in paragraphs to resemble the original Word document structure Example: <p>here are some of the steps you need to follow to create a Web site, such as organizing the content, outlining the site, creating a couple of pages, and adding graphics and links.</p>
Step 5 - Adding inline CSS styles (2 points) 1. Add <p> tag to a word 2. Change the color to red 3. Change the font style Using inline styles. Use style attribute to format the text. Inline CSS styles can be used with any HTML tags. Span tag is used to apply style to a group of words, one word, or even to a character: Locate the text: Note: Keep it simple. Include the word Note: between <p> and </p> tag. Add the following inline style: <p style="font-style:italic; color:red">note:</p>
Step 6 Create a Class to format the 1 st paragraph ( 2 points) 1. Add the class= introduction element to the 1 st paragraph 2. Create a new rule to format the 1 st paragraph to have a left and right margins 15px, font size of 16px, and color red. Add the class= introduction within the paragraph tag at the beginning of the 1 st paragraph. The result is that the first paragraph now begins to the class named introduction and must follow its formatting rules. <p class="introduction">here are some of the steps you need to follow to create a Web site, such as organizing the content, outlining the site, creating a couple of pages, and adding graphics and links.</p> Go to the <style> block in the <head> section of your document. Create a new rule for the class named introduction in the style sheet (shown in bold) as follows: <style type="text/css"> body { background-color:#dddddd; font-family:verdana, Arial, sans-serif; h1{ text-align:center; color:#336699; p.introduction { font-size: 16px; margin-left: 15px; margin-right: 15px; color: red; </style>