Download presentation
Presentation is loading. Please wait.
1
Web Programming– UFCFB3-30-1 Lecture 11
Instructor : Mazhar H Malik Global College of Engineering and Technology
2
Lecture 11 Introduction to CSS LO 2,5,6 12/31/2018 Lecture 11
3
In this lecture… Cascading Style Sheets CSS
Advantages & Disadvantages of CSS CSS Rules Where to add CSS Cascading Order 12/31/2018 Lecture 11
4
HTML example I am very happy
I am <b>very</b> happy I am <b><i>very</i></b> happy Not: I am <b><i>very</b></i> happy Why not? Hint - nesting Note that HTML tags that control formatting (like this example) should not be used directly on a web page Cascading style sheets (CSS) should be used to control presentation Bold Then bold and italic 12/31/2018 Lecture 11
5
Cascading Style Sheets
HTML was designed for page structure; not for appearance CSS are the W3C standard for controlling all presentation Cascading means that style information is passed down from higher-level style sheets until it is overridden by a style command with more weight 12/31/2018 Lecture 11
6
Why CSS is important CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically. 12/31/2018 Lecture 11
7
Advantages of CSS Greater typography and page layout control
Style is separated from structure Potentially smaller documents Easier site maintenance It is easy to learn! 12/31/2018 Lecture 11
8
Disadvantages of CSS Uneven browser support
This is improving all the time Assume that 95%+ of your users have CSS functionality on their browsers 12/31/2018 Lecture 11
9
CSS Style Rules Style rules are composed of two parts: a selector and a declaration The selector determines the element (tag) to which the rule is applied The declaration describe the display characteristics, the declaration contains property and value. 12/31/2018 Lecture 11
10
Declaration The declaration contains a property and a value
The precise specification of the property is contained in the value Insert ; at the end of declaration 12/31/2018 Lecture 11
11
Three places for style sheets
External - the style is to be applied to many pages A separate sheet that all pages in the web site link to Each page refers to the style sheet to find out how to display itself To change the look of the whole site you only need to change one file Internal - a single document has a unique style At the top of the web page itself Inline Mixed in with the content of a page. Try to avoid. 12/31/2018 Lecture 11
12
Inline style Inline style define inside HTML element.
Inline affect only one element. Example <html> <body> <h1 style = "{color: red}">Personal Web Page </h1> </body> </html> 12/31/2018 Lecture 11
13
Internal style sheet The <style> element is always contained in the <head> section of the document. Internal Style affect all elements within the page. Example <html> <head> <style type ="text/css"> h1 {color: blue;} </style> </head> <body> <h1>Personal Web Page</h1> </body></html> 12/31/2018 Lecture 11
14
External style sheet Style Sheet An external style sheet is ideal when the style is applied to many pages. External style sheet affect all linked files. With an external style sheet, you can change the look of an entire Web site by changing one file. An external style sheet can be written in any text editor. HTML files 12/31/2018 Lecture 11
15
External style sheet The file should not contain any html tags. Your style sheet should be saved with a .css extension. Example (ex1.css file) body {background-color: yellow} h1 {color: green} p {margin-left: 50px} 12/31/2018 Lecture 11
16
Link External style sheet
Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel=”stylesheet” type=”text/css” href=”ex1.css”/> </head> The browser will read the style definitions from the file mystyle.css, and format the document according to it. 12/31/2018 Lecture 11
17
External style sheet Example
<html> <head> <link rel="stylesheet" type="text/css" href="ex1.css"/> </head> <body> <h1>this header is green </h1> <p>This paragraph has left margin of 50pixels</p> </body> </html> 12/31/2018 Lecture 11
18
Cascading Order What style will be used when there is more than one style specified for an HTML element? Multiple style definitions will cascade into one 12/31/2018 Lecture 11
19
Cascading Order Browser default External style sheet
Least powerful Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an HTML element) Most powerful 12/31/2018 Lecture 11
20
Using the CSS Font Properties
font-family font-size font-style font-variant font-weight 12/31/2018 Lecture 11
21
Specifying Font Family
Allows specification of generic font family names (e.g., sans-serif) or a specific name (e.g., arial) p {font-family: sans-serif;} p {font-family: arial;} 12/31/2018 Lecture 11
22
Example <html> <head> <style>
p {font-family: arial;} h1 {font-family: sans-serif;} </style> <body> <h1>Understanding CSS Measurement Units</h1> <p>Relative measurement values such as em and px are designed to let you build scalable Web pages that adapt to different display types and sizes.</p> </body> </html> 12/31/2018 Lecture 11
23
Specifying Font Size p {font-family: arial; font-size: 1.5em;}
The following rule sets the <p> element to 1.5em Arial: p {font-family: arial; font-size: 1.5em;} 12/31/2018 Lecture 11
24
Absolute Font Size Keywords
xx-small x-small small medium large x-large xx-large Ex: P {font-size: large;} 12/31/2018 Lecture 11
25
Specifying the Background Image URL
Allows addition of a background image to an entire Web page or to a single element Lecture 11
26
12/31/2018 Lecture 11
27
Specifying Background Repeat
Controls tiling of background images body {background-image: url(grayivy.jpg); background-repeat: repeat-y; } 12/31/2018 Lecture 11
28
Creating a Vertical Repeat
Allows creation of a vertically repeating background graphic body {background-image: url(grayivy.jpg); background-repeat: repeat-y;} 12/31/2018 Lecture 11
29
12/31/2018 Lecture 11
30
Creating a Horizontal Repeat
Allows creation of a horizontally repeating background graphic body {background-image: url(grayivy.jpg); background-repeat: repeat-x;} 12/31/2018 Lecture 11
31
12/31/2018 Lecture 11
32
Creating a Nonrepeating Background Image
Allows creation of a single instance of an image in the background The following style rule shows the use of the no-repeat value: body {background-image: url(grayivy.jpg); background-repeat: no-repeat; } 12/31/2018 Lecture 11
33
12/31/2018 Lecture 11
34
Specifying Background Position
The background-position property lets you use three types of values: percentage, length, or keywords. Table 8-7 lists the values and their meanings. Figure 8-34 shows the keyword positions in the element box and their equivalent percentage values. body {background-image: url(grayivy.jpg); background-repeat: repeat-y; background-position: center;} 12/31/2018 Lecture 11
35
12/31/2018 Lecture 11
36
Summary HTML should be used to structure the web site
CSS should be used for appearance CSS allows developers to control the style and layout of multiple Web pages all at once. It is possible to add Multiple style definitions These styles definitions will cascade into one according to cascading order. 12/31/2018 Lecture 11
Similar presentations
