Grade 8 Computer

Uniform Design Using Cascading Style Sheets
Style Attribute and HTML Text Effects Tags

HTML text effects tags
<b> - bold text
<strong> - important
<i> - italic
<em> - emphasized
<mark> - marked
<small> - smaller
<del> - delete
<ins> - inserted
<sub> - subscript
<sup> - superscript
CSS
- Generally in charge of styling all websites
- Language that defines the style of the website, including its layout, visual effects, and
background
Types of CSS
1. Inline
- Contains CSS commands embedded or placed inside HTML tags using STYLE
attribute
Ex: <start tag style attribute=”property:value;property:value;property:value;”>
Content <end tag>
2. Internal
- Presents a summary of CSS commands located in the head section using
<style> tag
Ex: <head>
<style>
selector { property:value;property:value }
</style>
</head>
3. External
- It contains all the CSS commands for all HTML elements in a separate file, which
is saved using the file extension .css and then linked to the HTML file
Ex: <head>
<style>
<link rel=”stylesheet” href=”locationofExtCSS”>
</style>
</head>
- Rel is short for relation
It specifies the relation between the tag and href. Href contains the source of the
CSS file used
Internal and External CSS Structure
1. Internal
<head> <head>
<style> <style>
p { color:blue;font-family: selector {
Times New Roman } property:value;property:value }
</style> </style>
</head> </head>
2. External
- Same with internal, but no need to include the structural tags, and has to be
saved using .css file format
Benefits of CSS
1. It separates the contents of the HTML document from its style.
2. Saves time since the setting of properties of an element can be applied to one or
multiple HTML pages.
3. Easy to maintain since changes in CSS elements on one page will automatically update
the same elements on all other webpages.
Class and ID selectors
1. CSS Selector
- Are used to “find” (or select) the HTML elements you want to style
- Allows user to set a particular style for HTML elements with the same class
<html>
<head>
<style>
p.one { color:blue; }
</style>
</head>
<body>
<h1> This is a paragraph </h1>
<p class=”one”> This is a
paragraph </p>
<p class=”two”> This is a paragraph
also </p>
<p> Also this </p>
</body>
</html>
Two ways of writing class selector syntax:

1. html tag + period + class name
e.g: p.one { color:blue; }
2. period + class name
e.g: .one { color:red; }
html tag + period + class name period + class name
<html> <html>
<head> <head>
<style> <style>
p.one { color:blue; } .one { color:blue; }
</style> </style>
</head> </head>
<body> <body>
<h1> This is a paragraph </h1> <h1> This is a paragraph </h1>
<p class=”one”> This is a <p class=”one”> This is a
paragraph </p> paragraph </p>
<p class=”two”> This is a paragraph <p class=”two”> This is a paragraph
also </p> also </p>
<p> Also this </p> <p> Also this </p>
</body> </body>
</html> </html>
2. ID Selector
- Used to select one HTML element within the page using ID attribute
<html>
<head>
<style>
#top { background-color:#ccc; padding:
20px }
</style>
</head>
<body>
<div id=”top”> <h1> Chocolate curry </h1>
<p> This is my recipe for making curry
purely with chocolate </p>
<p> Mmm mm mmmmm</p>
</div>
</body>
</html>
How to apply ID selector?
Number sign + id name
e.g: #blueFont { color:blue; }
Difference between CLASS and ID
- The difference between an ID and a class is that an ID can be used to identify one
element, whereas a class can be used to identify more than one.
- A class selector is a name preceded by a full stop (“.”) and an ID selector is a name
preceded by a hash character (“#”).
Span Tag
- Used to add/apply styles to emphasize words or sentences within a paragraph
You can apply the same properties to a group of selectors without having to repeat them.
You can specify properties to selectors within other selectors.
Grouping selectors
- You can simply separate selectors using commas and apply the same properties to
them.
DO NOT DO THIS: DO THIS INSTEAD:
h2 { color:red; } h2, p { color:red: }

p { color:red; } p { background-color:blue; }
p { background-color:powderblue; }
Universal Selector
- Selector that selects ALL HTML elements on the same page
Ex: * { text-align:center;color:blue }
Using Font Text in Web Design

Typography
- Art of arranging letters and text in a way that makes it legible, clear, and visually
appealing to the reader.
- Involves font style, appearance, and structure, which aims to elicit certain
emotions and convey specific messages
Font Properties
- Used to transform the style, size, and effects of the texts
Text Properties
- Used for alignment, decoration, case and spacing of the texts
Font
- Set of characters of a particular size and style
FONT TYPEFACE
- Variation of weights of a typeface - Family of fonts

Ex: Ex:
- Arial Regular - Arial
- Arial Italic - Times New Roman
- Arial Bold - Verdana
1. Font-family
- To change the typeface
Ex:
h3 { font-family: Monotype Corsiva, Tahoma, Arial; }
- Note: You may input more than one font type as long as you separate
them with commas. This is just if the browser cannot recognize the first
one you specified, it will display the next one.
2. Font-size
- To change the size of the texts
Ex:
p { font-size:22pt; }
a. Pixels (px)
- These are fixed size units that are used in a computer
screen or other screen media
e.g: p { font-size:20 px; }
b. Points (pt)
- These are similar to pixels but are fixed in size and are
best used in print media.
e.g: p { font-size:12 pt; }
c. Percent (%)
- This is a scalable unit that can be used for mobile devices
and accessibility. By default, a 100% font size is equivalent
to 12pt.
e.g: p {font-size: 100%;}
d. Ems(em)
- This is also a scalable unit that is used in web document
media.
- Generally, 1em=12pt=16px=100%
e.g: p { font-size:2.5em; }
3. Font-style
- To change the style of the text
- values: Italic, Normal, Oblique
Ex: h1 { font-style: Italic; }
Oblique looks almost the same as the italic.
4. Font-weight
- Specify how thick each letter will become
- values: normal, lighter, bold, bolder
Ex: p { font-weight: normal; }
100 lightest and 400 is default and 900 boldest (depends on the
font-family)
Text
1. Text-align
- Specify the alignment of the text
- Values: left, right, center, justify
Ex: p { text-align: center; }
2. Text-decoration
- Specify if you want to put a line in, on, underarm, or within the text
3. Text-transform
- Specify whether you want the text to be in all caps or not
4. Letter-spacing
- Space between letters
5. Word-spacing
- Space between words
6. Line-height
- Space between lines
: You may use the 4 units (pt, px, %, em) for these properties
Color Property
- Used to specify the color of the text
- Values: Color name | RGB | Hex Value
1. RGB
- 0-255 integer 0%-100% percentage
2. HEX
- #RRGGBB
- 00 and FF
Comments
- Written remarks in your code which serves as reminders to keep track of what you are
doing in your code.
HTML CSS
<!-- this is where you enter your comments -- > /* this is where you enter your comments */
Color Property
- Used to specify the color of the text
Values: Color Name | RGB | HEX Value
RGB Color Value
- specified with: RGB ( red, green, blue )
- the intensity of that color and can be an integer between 0 and 255 or a percentage
value ( 0% to 100% )
Ex: rgb (0, 255, 0) value is rendered as green
HEX Color Value
- this color value is specified with #RRGGBB, where RR(red), GG(green), BB(blue).
- All values must be between 00 and FF
Ex: #0000ff value is rendered as blue
RGBA
- specified with rgba(red, green, blue, alpha).
- The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque)
- You may also use “opacity” property and the values are the same with the alpha
parameter.
Importance of Colors in Web Design:

- It can make a web user feel welcome, comfortable, and relaxed.
- It can produce an impact on the user.
- It would attract more viewers.
Background
- It holds the theme of the website.
- It is the design of the main stage of the web page.
- It can be a color and/or image.
<BODY>
- tag we should put the style declaration for adding an
image as a background
Background-color
- property used to set a background color
Values: Color name | RGB | HEX Value
Background-image
- property used to apply an image as the webpage’s
background
Values: link | file path | file name
Background-position
- property used to set the position of the background
Values: Top | Bottom | Center | Left | Right (or a
combination of these)
Background-size
- property used to specify the size of the background
Value: Auto | Contain | Cover (or number in
percentage)
Background-repeat
- property that allows you to tile the background.
Values: repeat | no-repeat | repeat-x | repeat-y
Background
- property used in applying more than one value to style the
background

Grade 8 Computer

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Grade 8 Computer

Uploaded by

Copyright:

Available Formats

Uniform Design Using Cascading Style Sheets

Style Attribute and HTML Text Effects Tags

Two ways of writing class selector syntax:

html tag + period + class name period + class name

DO NOT DO THIS: DO THIS INSTEAD:

h2 { color:red; } h2, p { color:red: }

Using Font Text in Web Design

- Variation of weights of a typeface - Family of fonts

Importance of Colors in Web Design:

You might also like