Web Programming– UFCFB3-30-1 Lecture 11 Instructor : Mazhar H Malik Email : mazhar@gcet.edu.om Global College of Engineering and Technology
Lecture 11 Introduction to CSS LO 2,5,6 12/31/2018 Lecture 11
In this lecture… Cascading Style Sheets CSS Advantages & Disadvantages of CSS CSS Rules Where to add CSS Cascading Order 12/31/2018 Lecture 11
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Using the CSS Font Properties font-family font-size font-style font-variant font-weight 12/31/2018 Lecture 11
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
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
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
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
Specifying the Background Image URL Allows addition of a background image to an entire Web page or to a single element Lecture 11
12/31/2018 Lecture 11
Specifying Background Repeat Controls tiling of background images body {background-image: url(grayivy.jpg); background-repeat: repeat-y; } 12/31/2018 Lecture 11
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
12/31/2018 Lecture 11
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
12/31/2018 Lecture 11
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
12/31/2018 Lecture 11
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
12/31/2018 Lecture 11
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