0% found this document useful (0 votes)
49 viewsLecture 11 - HTML Colors
This document discusses HTML colors and fonts. It provides details on how to specify colors using tags like <body> and attributes like bgcolor. It describes setting colors by name, hex code and RGB values. The document also covers font attributes like size, color and face that can be used within <font> tags, and alternatives like <basefont>. It includes examples of how to implement different colors and font styling in HTML.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
49 viewsLecture 11 - HTML Colors
This document discusses HTML colors and fonts. It provides details on how to specify colors using tags like <body> and attributes like bgcolor. It describes setting colors by name, hex code and RGB values. The document also covers font attributes like size, color and face that can be used within <font> tags, and alternatives like <basefont>. It includes examples of how to implement different colors and font styling in HTML.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
/ 33
HTML Colors
Dr. Fareed Ahmed Jokhio
HTML Colors
• Colors are very important to give a good look
and feel to your website.
• You can specify colors on page level using
<body> tag or you can set colors for individual
tags using bgcolor attribute.
HTML Colors
• The <body> tag has following attributes which can
be used to set different colors:
• bgcolor - sets a color for the background of the
page.
• text - sets a color for the body text.
• alink - sets a color for active links or selected links.
• link - sets a color for linked text.
• vlink - sets a color for visited links - that is, for
linked text that you have already clicked on.
HTML Color Coding Methods
• There are following three different methods to
set colors in your web page:
• Color names - You can specify color names
directly like green, blue or red.
• Hex codes - A six-digit code representing the
amount of red, green, and blue that makes up
the color.
• Color decimal or percentage values - This value
is specified using the rgb( ) property.
HTML Colors - Color Names
• You can specify direct a color name to set text
or background color.
• W3C has listed 16 basic color names that will
validate with an HTML validator but there are
over 200 different color names supported by
major browsers.
W3C Standard 16 Colors
• Here is the list of W3C Standard 16 Colors
names and it is recommended to use them.
HTML Colors - Color Names
• <html>
• <head>
• <title>HTML Colors by Name</title>
• </head>
• <body text="blue" bgcolor="green">
• <p>Use different color names for body and table and see the result.</p>
• <table bgcolor="black">
• <tr>
• <td>
• <font color="white">This text will appear white on black background.</font>
• </td>
• </tr>
• </table>
• </body>
• </html>
HTML Colors - Hex Codes
• A hexadecimal is a 6 digit representation of a
color.
• The first two digits (RR) represent a red value,
the next two are a green value (GG), and the
last are the blue value (BB).
HTML Colors - Hex Codes
• A hexadecimal value can be taken from any
graphics software like Adobe Photoshop,
Paintshop Pro or MS Paint.
• Each hexadecimal code will be preceded by a
pound or hash sign (#).
• Following is a list of few colors using
hexadecimal notation.
HTML Colors - Hex Codes
HTML Colors - Hex Codes
HTML Colors – RGB
• All the browsers do not support rgb() property
of color so it is recommended not to use it.
• Following is a list to show few colors using
RGB values.
HTML Colors – RGB
• Here are the examples to set background of an
HTML tag by color code using rgb() values:
HTML Colors – RGB
• <html>
• <head>
• <title>HTML Colors by RGB code</title>
• </head>
• <body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)">
• <p>Use different color code for body and table and see the result.</p>
• <table bgcolor="rgb(0,0,0)">
• <tr>
• <td>
• <font color="rgb(255,255,255)">This text will appear white on black background.</font>
• </td>
• </tr>
• </table>
• </body>
• </html>
HTML Fonts
• Fonts play very important role in making a website
more user friendly and increasing content
readability.
• Font face and color depends entirely on the
computer and browser that is being used to view
your page but you can use HTML <font> tag to add
style, size, and color to the text on your website.
• You can use a <basefont> tag to set all of your text
to the same size, face, and color.
HTML Fonts
• The font tag is having three attributes called
size, color, and face to customize your fonts.
• To change any of the font attributes at any time
within your webpage, simply use the <font> tag.
• The text that follows will remain changed until
you close with the </font> tag.
• You can change one or all of the font attributes
within one <font> tag.
HTML Fonts
• The font and basefont tags are deprecated
and it is supposed to be removed in a future
version of HTML.
• So they should not be used rather, it’s
suggested to use CSS styles to manipulate
your fonts.
Set Font Size
• You can set content font size using size
attribute.
• The range of accepted values is from
1(smallest) to 7(largest).
• The default size of a font is 3.
Set Font Size
• <html>
• <head>
• <title>Setting Font Size</title>
• </head>
• <body>
• <font size="1">Font size="1"</font><br />
• <font size="2">Font size="2"</font><br />
• <font size="3">Font size="3"</font><br />
• <font size="4">Font size="4"</font><br />
• <font size="5">Font size="5"</font><br />
• <font size="6">Font size="6"</font><br />
• <font size="7">Font size="7"</font>
• </body>
• </html>
Set Font Size
• This will produce following result:
Relative Font Size
• You can specify how many sizes larger or how
many sizes smaller than the preset font size
should be.
• You can specify it like <font size="+n"> or
<font size="-n">
Relative Font Size
• <html>
• <head>
• <title>Relative Font Size</title>
• </head>
• <body>
• <font size="-1">Font size="-1"</font><br />
• <font size="+1">Font size="+1"</font><br />
• <font size="+2">Font size="+2"</font><br />
• <font size="+3">Font size="+3"</font><br />
• <font size="+4">Font size="+4"</font>
• </body>
• </html>
Relative Font Size
• This will produce following result:
Setting Font Face
• You can set font face using face attribute but
be aware that if the user viewing the page
doesn't have the font installed, they will not
be able to see it.
• Instead user will see the default font face
applicable to the user's computer.
Setting Font Face
• <html>
• <head>
• <title>Font Face</title>
• </head>
• <body>
• <font face="Times New Roman" size="5">Times New Roman</font><br />
• <font face="Verdana" size="5">Verdana</font><br />
• <font face="Comic sans MS" size="5">Comic Sans MS</font><br />
• <font face="WildWest" size="5">WildWest</font><br />
• <font face="Bedrock" size="5">Bedrock</font><br />
• </body>
• </html>
Setting Font Face
• This will produce following result:
Specify alternate font faces
• A visitor will only be able to see your font if
they have that font installed on their computer.
• So, it is possible to specify two or more font
face alternatives by listing the font face names,
separated by a comma.
• <font face="arial,helvetica">
• <font face="Lucida Calligraphy,Comic Sans
MS,Lucida Console">
Specify alternate font faces
• When your page is loaded, their browser will
display the first font face available.
• If none of the given fonts are installed, then it
will display the default font face Times New
Roman.
Setting Font Color
• You can set any font color you like using color
attribute.
• You can specify the color that you want by
either the color name or hexadecimal code for
that color.
Setting Font Color
• <html>
• <head>
• <title>Setting Font Color</title>
• </head>
• <body>
• <font color="#FF00FF">This text is in pink</font><br />
• <font color="red">This text is red</font>
• </body>
• </html>
The <basefont> Element:
• The <basefont> tag specifies a default text-
color, font-size, or font-family for all the text in
a document.
The <basefont> Element:
• <html>
<head>
<title>my page</title>
</head>
<body>
<basefont face="arial, verdana, courier" size="4"
color="green">
Hello! This is my page.<br>
All text looks the same<br>
since I only specified a basefont.<br>
</body>
</html>
