1 / 10

Adding Style to your HTML

Adding Style to your HTML. Chapter 3. Internal Style. Must be nested in the head of your HTML file Use <style> </style> Set the style for each element using { } Use colons : to separate. Internal Style. Font style properties: Font-style—style of font (bold, italics)

syshe
Download Presentation

Adding Style to your HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding Style to your HTML Chapter 3

  2. Internal Style • Must be nested in the head of your HTML file • Use <style> </style> • Set the style for each element using { } • Use colons : to separate

  3. Internal Style • Font style properties: Font-style—style of font (bold, italics) Font-weight—thickness of font Font-size—size of font (in pt) Font-family—family of font (“helvetica”) Font-variant—normal or small caps

  4. Internal Style • Color Properties

  5. Internal Style • Text Alignment Properties Text-align—positions text Margin-top—sets the top margin of text Margin-right—sets right margin of text Margin-bottom—sets the bottom margin of text Margin-left—sets the left margin of text Margin—sets top, right, bottom, and left margins of text in a single property (clockwise)

  6. Internal Style • Background color properties • Can set for a single element <p style=“background-color:aqua”> • Can set for the head only <head style=“background-color:purple”> • Can set for the body only <body style=“background-color:silver”>

  7. Internal style • Sample: • <!doctype html> • <head style="background-color:aqua"> • <title>Starbuzz Coffee</title> • <style> • h1 { text-align:center; font-weight:bold; font-size:18pt; font-family:Helvetica; color:purple} • h2 { text-align:center; font-weight:bold; font-size:14pt; font-family:Courier; color:brown} • p { text-align:center; font-weight:bold; font-size:12pt; font-style:italics; font- family:Courier; color:navy} • </style> • </head>

  8. Internal style • <body style="background-color:aqua"> • <h1>Starbuzz Coffee Beverages</h1> • <h2>House Blend, $1.49</h2> • <p>A smooth, mild blend of coffee from Mexico, Bolivia and Guatemala</p> • <h2>Mocha Cafe Latte, $2.35</h2> • <p>Espresso, steamed milk and chocolate syrup</p> • <h2>Cappucino, $1.89</h2> • <p>A mixture of espresso, steamed milk and foam</p> • <h2>Chai Tea, $1.85</h2> • <p>A spicy drink made with black tea, spices, milk and honey</p> • <h2>Starbuzz Coffee's Mission</h2> • <a href="mission/mission statement.html">mission statement</a> • </body> • </html>

  9. Internal style • Adding a picture background: • <body background=“image.gif”> • <body background=“image.jpg”> • <body background=“image.png”> • Watch for pixilation!!

  10. Internal style • Resizing a picture • <imgsrc=“images.gif” width=“200” height=“200” • You can set the width and height to any size • Make sure size is in quotation marks

More Related