tm 1st quarter - 4th meeting
DESCRIPTION
HTML: Applying Text and Font Design using Classes, ID'S, Divisions, and SpansTRANSCRIPT
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;
Possible values are:
• left• right• center• justify
Text Decoration
You can decorate text with the following:
text-decoration:value;
Possible values are:
• 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;
Possible values are:
• 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;
Possible values are:
• 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++