Adding style to your html
This presentation is the property of its rightful owner.
Sponsored Links
1 / 10

Adding Style to your HTML PowerPoint PPT Presentation


  • 116 Views
  • Uploaded on
  • Presentation posted in: General

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)

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.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


Adding style to your html

Adding Style to your HTML

Chapter 3


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


  • Login