WEB DEVELOPMENT BASICS: HTML AND CSS FONT, COLOR, AND TEXT STYLING

WEB DEVELOPMENT BASICS
BY
KALLURI VINAY REDDY
12MSE1013
VIT CHENNAI

TOPICS
Lecture 4
Font size
Font colour
Font family
Background colour
Aligning the text strong words
Emphasize words

FONT SIZE
• We can give tags more instructions by including attributes in the opening tag.
• An attribute is simply a characteristic or some description for the content in the
element.
• You saw this with src in <img> and href in <a>
• Let’s change the size of the text. How?
• We use style attribute . We make it equal to font-size, followd by a colon,the
size you want, and end it with px(shorts for “pixels”).
• For example:<p style=“font-size:12 px”>

FONT SIZE SAMPLE
CODE
<!DOCTYPE html>
<html>
<head>
<title>First font size change</title>
</head>
<body>
<p style="font-size: 10px"> Some text for you to make tiny! </p>
<p style="font-size: 20px"> Some text for you to make normal
size!</p>
<p style="font-size: 40px"> Some text for you to make super
big!</p>
</body> </html>

FONT COLOUR
What is awesome about the style attribute is that we use it a lot! And we can use
it with many different tags, not just <p>.
Let’s now change the colours of our text in a heading .
To change the colour of text, simply add the style attribute in the opening tag,
then make the style equal to “color:blue”(or whatever colour you like)
For example: <h2 style =“color:red”>
What if you want to change the colour and the size of the text? Simple! Just add
a semi-colon between each bit.
For example: <h2 style=“color:green;font-size:12px”>

SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Changing the colors!</title>
</head>
<body>
<h1 style="color:green;font-size:16px">Big Heading</h1>
<p style="color:violet">A giant bear and a little duck were
friends.</p>
<p style="color:red;font-size:10px" >But the bear got hungry and ate
the duck.</p>
</body> </html>

FONT FAMILY
• We've covered font colours and font sizes. But we want more
power! We want to decide what font type to use. We can do this
using font family like
• <h1 style=“font-family: Arial”>Title</h1>
• http://www.w3.org/TR/CSS21/fonts.html#generic-font-families
• In this link more details about font has been given just check it out.

SAMPLE CODE
• <!DOCTYPE html>
• <html>
• <head>
• <title>Loving the font changes</title>
• </head>
• <body>
• <h1>Big title</h1>
• <ol>
• <li style="font-family:Garamond;font-size:16px">This item is big Garamond.</li>
• <li style="font-family:Verdana;font-size:12px">This item is medium
Verdana.</li>
• <li style="font-family:Impact;font-size:10px">This item is small Impact.</li>
• </ol> </body>
• </html>

RECAP
<!DOCTYPE html>
<html>
<head>
<title>Putting it all together</title>
</head>
<body>
<p style="font-size:20px;color:blue;font-family:Garamond">A truly
spectacular paragraph!</p>
</body>
</html>

BACKGROUND COLOUR
• The previous section covered a number of nice tricks to control how the text
looks. Now we want to learn about how to change the color of the webpage's
background.
• We can use the style attribute again, and set it equal to “background-color:red”
(or whatever colour you want).
• For example:
• <p style=“background-color:red;”>Hello World</p>

SAMPLE
CODE
<!DOCTYPE html>
<html>
<head>
<title> background color!</title>
</head>
<body style="background-color:brown">
<h3>Favorite Football Teams</h3>
<ol style="background-color: yellow">
<li>The Hawthorn Football Club</li>
<li>San Francisco 49ers</li>
<li>Barcelona FC</li>
</ol> </body>
</html>

ALIGNING THE TEXT
• Often it is nice to be able to move the text around. To do
so, we again use the style attribute. And then we use "text-
align: left" (or right, or centre) to determine the location of
the text.

SAMPLE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body>
<h3 style="text-align:center">Favourite Football Teams</h3>
<ol>
<li style="text-align: left">The Hawthorn Football Club</li>
<li style="text-align:center">San Francisco 49ers</li>
<li style="text-align: right">Barcelona FC</li>
</ol>
</body>
</html>

STRONG WORDS
• We can change the appearance of words. What if we want to make them bold?
We don’t have to use the style attribute.
Steps
1. Identify the word or words you want to bold.
2. Surround those words with opening tag <strong> and closing tag </strong>
3. Celebrate how awesome you are at HTML!

SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Viva La Revolution!</title>
</head>
<body>
<p>Do you hear the people <strong>sing</strong>?</p>
<p>No I don't. I'm <strong>too</strong> busy eating cake.</p>
</body>
</html>

EMPHASIZE WORDS
• Aside from bolding words , we often want to italicize words for emphasis
• Like bolding, we do not need to use the style attribute. Instead:
• 1. identify the word or words you want to italicize.
• 2. surround the word or words with the opening tag <em> and closing tag
</em>
• Be humble and grateful for your newfound powers

SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Some nice practice</title>
</head>
<body>
<p>Hey, don't say <em>that</em>!</p>
<p>I am <em>so</em> tired.</p>
</body>
</html>

SUMMARY
This has been an incredibly busy lesson, and you've covered a lot.
Congratulations! We have learned how to:
Make ordered and unordered lists
Change the color, size and type of font
Add comments to our HTML file
Change the page's background color
Align text
Bold and italicize text

SAMPLE CODE
• <!DOCTYPE html>
• <html>
• <head>
• <title>MS</title>
• </head>
• <body style="background-color:yellow">
• <ol>
• <li style="color:red;font-size:40px;font-family:Impact;text-align:center">list one</li>
• <li style="color:blue;font-size:30px;font-family:impact;text-align:right">list two</li>
• </ol>
• <ul>
• <li>what next</li>
• <li>t
• he thing<em>on </em> the <strong>world </strong>alone </li>
• </ul>
• 
• </body> </html>

REFERENCES
• www.codecademy.com
Head first web design .
Learning web design-Jennifer Niederst Robbins
www.w3schools.com

Thank you
Any doubts
Email: kalluri.vinayreddy@gmail.com

WEB DEVELOPMENT BASICS: HTML AND CSS FONT, COLOR, AND TEXT STYLING

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à WEB DEVELOPMENT BASICS: HTML AND CSS FONT, COLOR, AND TEXT STYLING

Similaire à WEB DEVELOPMENT BASICS: HTML AND CSS FONT, COLOR, AND TEXT STYLING (20)

Plus de Kalluri Vinay Reddy

Plus de Kalluri Vinay Reddy (12)

Dernier

Dernier (20)

WEB DEVELOPMENT BASICS: HTML AND CSS FONT, COLOR, AND TEXT STYLING