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 "#".

CSS CODE HTML CODE

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 "."

CSS CODE

HTML CODE

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

ColorYou 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;

Possible values are:

• 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 StyleYou 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

Education

style of text

style tag

color of text

fontstyle property

h1 style

style attribute

style sections

inline style