Download presentation
Presentation is loading. Please wait.
1
Lecture 5
2
CSS 2 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)
3
Inline Style 3 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.
4
Inline Style 4 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.
5
Inline Styles 5 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.
6
Note 6 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.
7
Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Inline Style This is a paragraph 7
8
Another Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> Inline Style This is a paragraph This is a paragraph This is a paragraph 8
9
Internal - Example 9 img { width: 200px }
10
External Style Sheets 10 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.
11
Linking External Style Sheets 11 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.
12
External CSS 12 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.
13
13
14
14 External Styles Training MS Access Java Programming Web Programming Systems Infrastructure Check out other Training sites Search Google...
15
External Style – Style1.css 15 a{text-decoration: none} a:hover{text-decoration: underline; color: red; background-color: white} li em{color: red; font-weight: bold} ul{margin-left: 2cm}
16
CSS Colour and Background 16 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
17
Continued 17 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%.
18
18 table.one { border-collapse: separate; border-spacing: 10px } table.two { border-collapse: separate; border-spacing: 10px 50px } Peter Griffin Lois Griffin Cleveland Brown Glenn Quagmire
19
19
20
20
Similar presentations
