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.

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

No notes for slide

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

  1. 1. Lesson 3: Experimenting with Fonts and Colors<br />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”).<br />
  2. 2. Deprecated Tags and Attributes<br />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<br /><center> - Centers text<br /><u> - Underlines text<br /><s> or <strike> - Defines strikethrough text<br /><font> - Identifies font characteristics<br />Style Sheet Associations<br />External Style Sheet – a separate document or file where all the style sheet information are stored<br />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.<br />In-Line Style Sheet – stores information inside an HTML tag and, just like the internal style sheet, does not require an external file.<br />
  3. 3. Style Sheet Syntax<br />selector { property: value }<br />Where selector – the HTML tag you want to define<br />property and value – attribution or declaration, both are separated by colon (:)<br />Typeface – another name for font<br />Property and Value Usage<br />1. font-family = the font that your text will be in. <br />Allowed value for font-family: Arial, Lucida Console, Monotype Corsiva, Tahoma, Times New Roman<br />Example 1:<br />h1 {<br /> font-family: arial;<br />}<br />Example 2:<br />h1 {<br /> font-family: “Monotype Corsiva”, Tahoma, arial;<br />}<br />
  4. 4. 2. font-size<br />Allowed value for font-size: <br />The Old 7 Size Font System: xx-small; x-small; small; medium; large; x-large; xx-large; (the default size is medium)<br />larger; or smaller;<br />% - percent relative to the default font size of the browser (e.g. 150%)<br />pt – point size, the font-sizing system of Windows (e.g. 22pt)<br />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)<br />3. font-style<br />Allowed value for font-style: italic; normal; and oblique<br />4. font-weight<br />Allowed value for font-weight: <br />normal; lighter; bold; bolder<br />100 to 900 (100 = lightest & 900 = boldest, 400 is the default)<br />
  5. 5. 5. color<br />Allowed value for color: <br />Aqua; black; blue; fuchsia; gray; green; lime; maroon; navy; olive; purple; red; silver; teal; white; yellow; transparent<br />rgb(n,n,n)<br /> Where n = 0 to 255<br /> red = rgb(255,0,0); green = rgb(0,255,0); blue = rgb (0,0,255); <br /> black = rgb(0,0,0); white = rgb (255,255,255) <br />c. rgb-hex = #nnn or #nnnnnn<br /> Where n = #0 to f (in hexadecimal count)<br />red = #f00 or #ff0000; green = #0f0 or #00ff00; blue = #00f or #0000ff;<br />black = #000 or #000000; white #fff or ffffff<br />Hexadecimal – numbering system that is base-16 rather than our commonly used decimal numbering system of base-10<br />6. text-align<br />Allowed value for text-align: left; right; center; justify<br />7. text-decoration<br />Allowed value for text-decoration: capitalize; uppercase; lowercase; none<br />
  6. 6. 8. letter-spacing – refer to space between letters<br />Allowed value for letter-spacing: normal; and _em<br />9. word-spacing – refer to space between words<br />Allowed value for word-spacing: normal; and _em<br />10. line-height – refer to space between lines<br />Allowed value for word-spacing: normal; _%; and _em<br />
  7. 7. Escape Sequences – other characters with special meanings in HTML that cannot be used as they are in text<br />< (Less Than) = &lt;<br />> (Greater Than) = &gt;<br />© (Copyright) = &copy;<br />& (Ampersand) = &amp;<br />“ (Quote) = &quot;<br />ñ (Lowercase n with tilde) = &ntilde;<br />è (Lowercase with = &egrave<br /> grave accent)<br />ç (Lowercase c with cedilla) = &ccedil;<br />â (Lowercase a with = &acirc;<br /> circumflex accent)<br />ü (Lowercase u with umlaut) = &uuml;<br />Comment Tags<br />Comments – written remarks in your HTML or CSS document which will not be displayed in the browser<br />For HTML format: <!– type your comments here --><br />For CSS format: /* type your comments here */<br />