TM 1st quarter - 4th meeting

Applying Text and Font Design
using Classes, ID'S,
Divisions, and Spans
Engr. Esmeraldo T. Guimbarda Jr.

THE ID SELECTOR
The id selector is used to specify a style for a single,
unique element. It uses the id attribute of the HTML
element, and is defined with a "#".

THE CLASS SELECTOR
The class selector is used to specify a style for a group
of elements. Unlike the id selector, the class selector
is most often used on several elements. This allows
you to set a particular style for many HTML elements
with the same class. The class selector uses the HTML
class attribute, and is defined with a "."

You can also specify that only specific HTML elements
should be affected by a class. In the example below,
all p elements with class="center" will be center-
aligned:

DIVISION
Division (or Div) is a block level HTML element used to
define sections of an HTML file. A division can contain
all the parts that make up your website including
additional divisions, spans, images, text and so on.
You define a division within an HTML file by placing the
following between the <body></body> tags.

example:
A division creates a line break by default. You can use
both classes and IDs with a division tag to style
sections of your website.

SPAN
Span is similar to division except it’s an inline
element. No line break is created when a span is
declared

CSS TEXT PROPERTIES
Color
You can set the color of text with the following:
color:value;
Possible values are:
• color name – example: (red, black…)
• hexadecimal number – example: (#ff0000),
(#000000…)
• RGB color code – example: (rgb(255, 0, 0))
(rgb(0, 0, 0))

Text Transform
You can control the size of letters in an HTML element
with the following:
text-transform:value;
• none
• capitalize
• lowercase
• uppercase

Text Align
You can align text with the following:
text-align:value;
• left
• right
• center
• justify

Text Decoration
You can decorate text with the following:
text-decoration:value;
• none
• underline
• overline
• line through
• blink

CSS FONT PROPERTIES
Font Style
You can set the style of text in a element with the
font-style property. Syntax:
font-style:value;
• normal
• italic
• oblique

Font Family
You can set what font will be displayed in an element
with the font-family property. The font-family property
can hold several font names as a “fallback” system. If
the browser does not support the first font, it tries the
next font. There are two choices for the values:
• family name - The name of a font-family, like
"times", "courier", "arial", etc.
• generic family - The name of a generic-family, like
"serif", "sans-serif", "cursive", "fantasy", "monospace"

example:
Note: Separate each value with a comma. If a font
name contains white-space, it must be quoted.
Single quotes must be used when using the "style"
attribute in HTML.

Font Size
You can set the size of the text used in an element by
using the font-size property. Syntax:
font-size:value;
• xx-large
• x-large
• larger
• large
• medium
• small
• smaller
• x-small
• xx-small
• length
• % (percent)

Activity:
1. Open Notepad++. Click on Start > All Programs >
Notepad++ folder > Notepad++.

2. Create a new HTML file by clicking File > New, or
pressing Ctrl+N on your keyboard.

3. Save the file as “color_trio.
html”.
To save the file, go to File >
Save As. Type “color_trio.
html” in the File name box.
Select Hypertext Markup
Language file in the Save as
type selection menu. Save the
file in your desktop.

4. Type the basic skeleton code of an HTML document
in color_trio.html. Define the title and the main
heading as “Nutritious Color Trio” using the < title >
tag and < h1 > tag respectively.

4. Add three headings in the body section using the
<h3> tag and define each of them as:
“< Color Group > Fruits and Vegetables”.
Under each heading, add one paragraph tag to be
used for the list of fruits and vegetables.

5. Place the contents of the body by adding the list of
fruits and vegetables according to their color in the
paragraph tags. Give at least ten(10) for each color

6. Add the style tag at the head section.

7. Style the lists of fruits and vegetables and their
corresponding headings using ID’s and divisions.
Under the style tag, create three ID selectors and
name them “ID1”, “ID2”, and “ID3”.

8. In the ID selector, type the codes to modify the text and
font properties of the lists of fruits and vegetables and their
corresponding headings. Sample code:
#id{
color:red;
text-transform: capitalize;
text-align: center;
text-decoration: underline;
font-style: italic;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
font-size: larger;
}

9. Before each heading (except for the main heading),
add a < div > tag.
After each < /p > tag of the list of fruits and
vegetables, add a < /div > tag. In the < div > tag,
specify which ID you are going to use by typing:
< div id = “< ID selector >” >

10. Align the main heading to the center by using an
inline style. Sample code:
< h1 style=”text-align: center” > Nutritious Color Trio
< /h1 >

11. Style the main heading using classes and spans.
Under the style tag, create class selectors and name
them “main_heading”.
type the codes to modify the words “Color Trio” in the main heading.
Sample code:
.main_heading
{
color:blue;
text-align: center;
font-style: oblique;
font-family: "Rockwell Extra Bold", "Rockwell Bold", monospace;
font-size: larger;
}

12. Enclose the words “Color Trio” in
< span >< /span > tags. Specify that you are going to
use the “main_heading” class by typing:
< span class=”main_heading” >

13. Save the file by clicking File > Save or pressing Ctrl
+ S on your keyboard. Open the file in a web browser.

14. Open the HTML file to your browser by clicking Run > Lunch in
Chrome or Lunch in Firefox on your Notepad++

TM 1st quarter - 4th meeting

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to TM 1st quarter - 4th meeting

Similar to TM 1st quarter - 4th meeting (20)

More from Esmeraldo Jr Guimbarda

More from Esmeraldo Jr Guimbarda (8)

Recently uploaded

Recently uploaded (20)

TM 1st quarter - 4th meeting