Your SlideShare is downloading. ×
Second year 2nd quarter CSBN - CSS, fonts and color
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Second year 2nd quarter CSBN - CSS, fonts and color


Published on

This is the powerpoint presentation for second year section honesty and humility for Lesson 3.

This is the powerpoint presentation for second year section honesty and humility for Lesson 3.

Published in: Education

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. 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”).
  • 2. Deprecated Tags and Attributes
    Deprecated – 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.
  • 3. Style Sheet Syntax
    selector { 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
    Property and Value Usage
    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
    Example 1:
    h1 {
    font-family: arial;
    Example 2:
    h1 {
    font-family: “Monotype Corsiva”, Tahoma, arial;
  • 4. 2. font-size
    Allowed value for font-size:
    The Old 7 Size Font System: xx-small; x-small; small; medium; large; x-large; xx-large; (the default size is medium)
    larger; or smaller;
    % - percent relative to the default font size of the browser (e.g. 150%)
    pt – point size, the font-sizing system of Windows (e.g. 22pt)
    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:
    normal; lighter; bold; bolder
    100 to 900 (100 = lightest & 900 = boldest, 400 is the default)
  • 5. 5. color
    Allowed value for color:
    Aqua; black; blue; fuchsia; gray; green; lime; maroon; navy; olive; purple; red; silver; teal; white; yellow; transparent
    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
    Hexadecimal – numbering system that is base-16 rather than our commonly used decimal numbering system of base-10
    6. text-align
    Allowed value for text-align: left; right; center; justify
    7. text-decoration
    Allowed value for text-decoration: capitalize; uppercase; lowercase; none
  • 6. 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
  • 7. Escape Sequences – other characters with special meanings in HTML that cannot be used as they are in text
    < (Less Than) = &lt;
    > (Greater Than) = &gt;
    © (Copyright) = &copy;
    & (Ampersand) = &amp;
    “ (Quote) = &quot;
    ñ (Lowercase n with tilde) = &ntilde;
    è (Lowercase with = &egrave
    grave accent)
    ç (Lowercase c with cedilla) = &ccedil;
    â (Lowercase a with = &acirc;
    circumflex accent)
    ü (Lowercase u with umlaut) = &uuml;
    Comment Tags
    Comments – 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 */