Scribd Logo
Upload

Welcome to Scribd!

  • HTML Font Face Attribute

    Uploaded by

    Menkent Santisteban Barcelon
    12 views4 pages
    The document discusses various ways to style text and elements in HTML and CSS, including: 1) Using the <font> tag and "face" attribute in HTML to set the font family, though this is deprecated and CSS should be used instead. 2) Using internal and external CSS to set font properties like color, family, and size for different elements. 3) The CSS box model which treats each element as a box, and properties that can be used to add borders, padding, and margins. 4) The activity asks the reader to practice these skills by changing fonts, backgrounds, and using spacing properties to improve the look of a webpage.

    Original Description:

    helloworld

    Original Title

    Activity 4

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various ways to style text and elements in HTML and CSS, including: 1) Using the <font> tag and "face" attribute in HTML to set the font family, though this is deprecated and CSS should be used instead. 2) Using internal and external CSS to set font properties like color, family, and size for different elements. 3) The CSS box model which treats each element as a box, and properties that can be used to add borders, padding, and margins. 4) The activity asks the reader to practice these skills by changing fonts, backgrounds, and using spacing properties to improve the look of a webpage.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views4 pages

    HTML Font Face Attribute

    Uploaded by

    Menkent Santisteban Barcelon
    The document discusses various ways to style text and elements in HTML and CSS, including: 1) Using the <font> tag and "face" attribute in HTML to set the font family, though this is deprecated and CSS should be used instead. 2) Using internal and external CSS to set font properties like color, family, and size for different elements. 3) The CSS box model which treats each element as a box, and properties that can be used to add borders, padding, and margins. 4) The activity asks the reader to practice these skills by changing fonts, backgrounds, and using spacing properties to improve the look of a webpage.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Activity No.

    HTML Font Face Attribute


    Syntax :
    <font face="font_family">
    Example
    <!DOCTYPE html>
    <html>
    <body>
    <p><font face="verdana">This is some text!</font></p>
    <p>The face attribute is not supported HTML5. Use CSS instead.</p>
    </body>
    </html>
    Internal Styling (Internal CSS)
    Internal styling is used to define a style for one HTML page.
    Internal styling is defined in the <head> section of an HTML page, within a <style>
    element:
    Sample Code :
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {background-color: lightgrey;}
    h1 {color: blue;}
    p {color: green;}
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>

    External Styling (External CSS)

    An external style sheet is used to define the style for many pages.
    With an external style sheet, you can change the look of an entire web site by
    changing one file!
    To use an external style sheet, add a link to it in the <head> section of the HTML
    page:
    Sample Code
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    CSS Fonts
    The CSS color property defines the text color to be used for the HTML element.
    The CSS font-family property defines the font to be used for the HTML element.
    The CSS font-size property defines the text size to be used for the HTML element.
    Sample Code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
    }
    p {
    color: red;
    font-family: courier;
    font-size: 160%;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>

    The CSS Box Model


    Every HTML element has a box around it, even if you cannot see it.

    The CSS border property defines a visible border around an HTML element:
    Sample Code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{
    border: 1px solid grey;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    </body>
    </html>
    The CSS padding property defines a padding (space) inside the border:
    Sample Code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{
    border: 1px solid grey;
    padding: 10px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    </body>
    </html>

    The CSS margin property defines a margin (space) outside the


    border:
    <!DOCTYPE html>

    <html>
    <head>
    <style>
    p{
    border: 1px solid grey;
    padding: 10px;
    margin: 30px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    </body>
    </html>
    Activity 4 :
    What to do?
    Change the fonts or make your fonts more suitable to your webpage and make
    further improve your box using spaces internally or externally and your background
    as well.

    You might also like