CSCE 102

1
CSCE 102
2
Internal Style Sheet

• ltstylegt element used to customize presentation
• Placed within ltheadgt element
• Must use type attribute to define

ltheadgt ltstyle typetext/cssgt lt/stylegt lt/headgt
3
Internal Style Sheet Example

• Custom lth2gt to display red text
• Structure element propertyvalue
• Multiple properties element propertyvalue
  propertyvalue
• 16 predefined colors on pg 59 that can be used as
  a value
• Black, gray, silver, white, red, maroon, magenta,
  purple, blue, navy, cyan, teal, green, olive,
  lime, yellow

ltheadgt ltstyle typetext/cssgt h2
colorred lt/stylegt lt/headgt
4
More Color Examples

• Custom lth3gt to display blue text

ltstyle typetext/cssgt h2 colorred h3
colorblue lt/stylegt
5
Internal Style Sheet more colors

• Thousands of colors can be specified by a color
  number or color code.
• 6 Hexidecimal numbers to represent color. (Ex
  FFFFFF)
• 3 pairs of 2 hexidecimal numbers
• 1st pair is red value, 2nd pair is green value,
  3rd pair is blue value
• 00 indicates none of that color and FF indicates
  all of that color.
• So, what do you think FFFFFF is?

6
Color Code Example

• Lets experiment with some numbers and see what
  colors they create.
• Search internet for a list of colors to be used
  if guessing is not your game.
• Use to indicate hex color code

ltstyle typetext/cssgt h1 color00FFFF lt/styl
egt
7
Internal Style Sheet Alignment

• By using the text-align property, alignment of
  an element can be customized.
• text-align values left, right, center, justify

ltstyle typetext/cssgt h2 colorred
text-aligncenter lt/stylegt
8
Internal Style Sheet Font Size

• Using the font-size property, we may change the
  size of an element.
• font-size values numerical with pt appended to
  indicate point

ltstyle typetext/cssgt h1 text-aligncenter h
2 colorred text-aligncenter
font-size40pt lt/stylegt
9
Bold and Italic

• Both font-style and font-weight properties
  can also be used.
• font-style values normal, italic and oblique.
• font-weight values normal, bold, bolder, lighter
  or 100, 200, 300, 900.

10
Bold and Italic Examples

• font-style
• font-weight

ltstyle typetext/cssgt h2 colorred
font-styleitalic lt/style
ltstyle typetext/cssgt h2 colorred
font-weightbolder lt/style
11
More Text Properties

• text-decoration values none, underline,
  overline, line-through or blink.
• text-transform values capitalize, uppercase,
  lowercase or none.
• font-variant values small-caps or none.
• background-color values transparent or color
  number/name.

12
Paragraph Styles

• Properties that will allow us to customize our
  paragraphs.
• font-size values numerical pt value. Ex 14pt

ltstyle typetext/cssgt p font-size14pt lt/styl
egt
13
Question from Last Weeks Class

• How do you indent the first line of a paragraph?

14
Paragraph Styles continued

• text-indent and line-height properties
• Values can be numerical pt value or . Ex 25pt
  or 125
• text-indent value in respect to page width.
• line-height value in respect to font height.

15
Font Families

• font-family property allows designer to change
  font.
• Generally good to use 2 values in case the
  browser doesnt have the 1st font.

ltstyle typetext/cssgt p font-family
Lucida, Arial lt/stylegt
16
Creating Tags with Multiple Styles

• Ability to create classes of styles.
• Format tag.newclass
• tag.newclass inherits styles defined by parent
  tag
• Use new class (or sub-style) ltp
  classcentergt lt/pgt

ltstyle typetext/cssgt p text-alignjustify
font-size18pt p.center text-aligncenter lt/st
ylegt
17
New Class Example

• Remember classes inherit style definitions from
  parent.
• Can have classes with no parent.

ltstyle typetext/cssgt h2.redcolorred h3.blu
ecolorblue lt/stylegt
18
Generic Class

• Class with no parent
• Any tag can use this class

ltheadgt ltstyle typetext/cssgt .red
colorred lt/stylegt lt/headgt ltbodygt ltp
classredgt Hello lt/pgt lt/bodygt
19
Code Summary

• Review Chapter 3
• Consult pages 78-79 for more properties, values
  and examples.
• Consult Appendix D (page 541) for Basic Style
  Properties and Values.