adding style to your html
Download
Skip this Video
Download Presentation
Adding Style to your HTML

Loading in 2 Seconds...

play fullscreen
1 / 10

Adding Style to your HTML - PowerPoint PPT Presentation


  • 150 Views
  • Uploaded on

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)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Adding Style to your HTML' - syshe


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
internal style
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 style1
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

internal style2
Internal Style
  • Color Properties
internal style3
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)

internal style4
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”>

internal style5
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>
internal style6
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>
internal style7
Internal style
  • Adding a picture background:
  • <body background=“image.gif”>
  • <body background=“image.jpg”>
  • <body background=“image.png”>
  • Watch for pixilation!!
internal style8
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
ad