Lecture 5

Download Report

Transcript Lecture 5

Lecture 5

CSS

•

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the • • • • highest priority: Browser default External Style Sheet Internal Style Sheet (inside the tag) Inline Style (inside HTML element) 2

Inline Style

• • An individual element style is declared using the style attribute.

E.g.

Hello

• The style attribute allows you to specify a style for an element. 3

Inline Style

• An inline style should be used when a unique style is to be applied to a single occurrence of an element.

• To use inline styles you use the style attribute in the relevant tag. 4

Inline Styles

E.G

Hello

• • • In this case the style specifies two properties font size and font colour.

The attributes are separated by a semi colon.

Note that inline styles override any other styles applied in the document.

5

Note

• Without style sheets the browser completely controls the look and feel of the web pages.

• If the designer implements a particular style to the page, they take control of how it should look in the browser.

6

Inline Style

This is a paragraph

Example 7

Inline Style

This is a paragraph

This is a paragraph

This is a paragraph

Another Example 8

Internal - Example

9

External Style Sheets

• An external style sheet is ideal when the style is applied to many pages. • With an external style sheet, you can change the look of an entire Web site by changing one file. • Each page must link to the style sheet using the tag. The tag goes inside the head section.

10

Linking External Style Sheets

• Style sheets are a useful way to give a document a uniform theme.

• With external linking, you can give your website the same look using the same style sheet.

• You only have to modify a single file in order to make changes to the style.

11

External CSS

• • The link element specifies the relationship between the current document and another document using the rel attribute.

• Type identifies the document type and href provides the location of the stylesheet.

12

13

External Styles

Training

  • MS Access
  • Java Programming
    • Web Programming
    • Systems Infrastructure
  • Check out otherTraining sites
    • Search Google... 14

    a

    External Style – Style1.css

    {text-decoration: none} a:hover li em ul {text-decoration: underline; color: red; background-color: white} {color: red; font-weight: bold} {margin-left: 2cm} 15

    •

    CSS Colour and Background

    CSS colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). • The lowest value that can be given to one light source is 0 (hex #00). • The highest value is 255 (hex #FF).

    • Black is #000000 • White is #FFFFFF • http://www.w3schools.com/css/css_colors.asp

    16

    Continued

     The hexadecimal numbers for black is #000000.

     The first two numbers (00) represent the amount of red the color contains  The second two numbers (00) represent the amount of green and the last two numbers (00) represent the amount of blue the color contains.

     When a color, such as black, contains 00 amount of red, green or blue, this means it contains no amount of that color or 0%. 17

    Peter Griffin
    Lois Griffin

    Cleveland Brown
    Glenn Quagmire
    18

    19

    20