Page 121 - CodePilot V5.0 C6
P. 121
Create a web page to display information about the sun.
In CSS, shorthand properties are special properties that let you set multiple related CSS
properties in a single line, instead of writing each one separately.
FONT PROPERTIES
TEXT PROPERTIES
Font properties control text appearance, including family, size, style and weight. The table lists
In CSS, text properties are used to style and control the appearance of text on a web page. The common properties, values and descriptions:
table below lists some text properties, their corresponding values and descriptions: Property Name Value Description
Property Name Value Description FONT-FAMILY Name of the font. This property sets the font of the text.
COLOR Any valid colour value This property sets the text colour. FONT-SIZE Size of the font as a number This property controls the size of the text.
(name, HEX, RGB and more) with units like px, pt, em, etc.
TEXT-ALIGN LEFT, RIGHT, CENTER This property aligns the text horizontally. FONT-WEIGHT NORMAL, BOLD, BOLDER or This property sets the weight of the text. It
and JUSTIFY LIGHTER can be numeric values.
TEXT-TRANSFORM CAPITALIZE, UPPERCASE, This property transforms text to uppercase, FONT-STYLE NORMAL, ITALIC or OBLIQUE This property defines the style of the font.
LOWERCASE and NONE lowercase or capitalises the first letter of
each word. Code Write the HTML code to present the given web page using CSS font properties.
TEXT-DECORATION UNDERLINE, OVERLINE, This property adds a line below, above or 6
LINE-THROUGH and NONE through text.
<!DOCTYPE HTML>
TEXT-SHADOW color, x-offset, y-offset, This property adds a shadow effect to the
<HTML>
blur-radius text.
<HEAD>
Code Write the HTML code to present the given web page using CSS text properties. <TITLE>Using Font Properties
5
</TITLE>
<!DOCTYPE HTML>
</HEAD>
<HTML>
<BODY STYLE="BACKGROUND-COLOR: #F0F8FF; FONT-FAMILY: 'VERDANA', SANS-
<HEAD>
SERIF;
<TITLE> Using Text Properties </TITLE>
</HEAD> COLOR: DARKSLATEGRAY;">
<BODY STYLE="BACKGROUND-COLOR: LIGHTYELLOW;"> <H1 STYLE="COLOR: DARKRED; FONT-SIZE: 36PX; FONT-FAMILY: 'GEORGIA', SERIF;
<H1 STYLE="COLOR: DARKBLUE; TEXT-ALIGN:CENTER; TEXT-DECORATION: FONT-WEIGHT: BOLD; TEXT-TRANSFORM: UPPERCASE;">
UNDERLINE;">The Importance of Reading</H1> Understanding Fractions
<P STYLE="TEXT-ALIGN: JUSTIFY; COLOR: DARKGREEN;"> Reading is one of
</H1>
the most important skills we can develop. It opens up new worlds, sparks
<H2 STYLE="COLOR: MEDIUMBLUE; FONT-SIZE: 28PX;">
creativity and helps us learn about different perspectives.
</P> What is a Fraction?
</BODY> </H2>
</HTML>
119
CSS3–Styling Basics
