second year 2nd quarter csbn - css, fonts and color
DESCRIPTION
This is the powerpoint presentation for second year section honesty and humility for Lesson 3.TRANSCRIPT
Lesson 3: Experimenting with Fonts and Colors
The filename “ewan” in Notepad was saved in CSS file. If you are going to save the css file for the first time, type “filename.css” (for example “ewan.css”).
Deprecated Tags and AttributesDeprecated – a deprecated element or attribute is one that has been outdated; it may become obsolete in the in the future but browsers should continue to support it for backward compatibility
<center> - Centers text<u> - Underlines text<s> or <strike> - Defines strikethrough text<font> - Identifies font characteristics
Style Sheet Associations
External Style Sheet – a separate document or file where all the style sheet information are stored
Internal Style Sheet – stores style information in your HTML document’s <head> tag and no external file is required for the style sheet to work.
In-Line Style Sheet – stores information inside an HTML tag and, just like the internal style sheet, does not require an external file.
Style Sheet Syntaxselector { property: value }
Where selector – the HTML tag you want to define property and value – attribution or declaration, both are separated by colon (:)
Typeface – another name for font
1. font-family = the font that your text will be in.
Allowed value for font-family: Arial, Lucida Console, Monotype Corsiva, Tahoma, Times New Roman
Property and Value Usage
Example 1:h1 { font-family: arial;}
Example 2:h1 { font-family: “Monotype Corsiva”, Tahoma, arial;}
2. font-size
Allowed value for font-size: a. The Old 7 Size Font System: xx-small; x-small; small; medium; large; x-large;
xx-large; (the default size is medium)b. larger; or smaller;c. % - percent relative to the default font size of the browser (e.g. 150%)d. pt – point size, the font-sizing system of Windows (e.g. 22pt)e. em – where the size of the font is multiplied by value of the number (e.g.
1em = 100% font size and 1.5em = 150% font size)
3. font-style
Allowed value for font-style: italic; normal; and oblique
4. font-weight
Allowed value for font-weight: a. normal; lighter; bold; bolderb. 100 to 900 (100 = lightest & 900 = boldest, 400 is the default)
5. color
Allowed value for color: a. Aqua; black; blue; fuchsia; gray; green; lime; maroon; navy; olive; purple; red;
silver; teal; white; yellow; transparentb. rgb(n,n,n) Where n = 0 to 255 red = rgb(255,0,0); green = rgb(0,255,0); blue = rgb (0,0,255); black = rgb(0,0,0); white = rgb (255,255,255) c. rgb-hex = #nnn or #nnnnnn
Where n = #0 to f (in hexadecimal count)red = #f00 or #ff0000; green = #0f0 or #00ff00; blue = #00f or #0000ff;black = #000 or #000000; white #fff or ffffff
6. text-align
Allowed value for text-align: left; right; center; justify
7. text-decoration
Allowed value for text-decoration: capitalize; uppercase; lowercase; none
Hexadecimal – numbering system that is base-16 rather than our commonly used decimal numbering system of base-10
8. letter-spacing – refer to space between letters
Allowed value for letter-spacing: normal; and _em
9. word-spacing – refer to space between words
Allowed value for word-spacing: normal; and _em
10. line-height – refer to space between lines
Allowed value for word-spacing: normal; _%; and _em
Escape Sequences – other characters with special meanings in HTML that cannot be used as they are in text
< (Less Than) = <> (Greater Than) = >© (Copyright) = ©& (Ampersand) = &“ (Quote) = "
ñ (Lowercase n with tilde) = ñè (Lowercase with = è grave accent)ç (Lowercase c with cedilla) = çâ (Lowercase a with = â circumflex accent)ü (Lowercase u with umlaut) = ü
Comment TagsComments – written remarks in your HTML or CSS document which will not be displayed in the browser
For HTML format: <!– type your comments here -->
For CSS format: /* type your comments here */