Scribd
Upload
45 views4 pages

HTML Font Face Attribute

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.

Uploaded by

Menkent Santisteban Barcelon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views4 pages

HTML Font Face Attribute

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.

Uploaded by

Menkent Santisteban Barcelon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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