Presentation is loading. Please wait.

Presentation is loading. Please wait.

IS333: MULTI-TIER APPLICATION DEVELOPMENT

Similar presentations


Presentation on theme: "IS333: MULTI-TIER APPLICATION DEVELOPMENT"— Presentation transcript:

1 IS333: MULTI-TIER APPLICATION DEVELOPMENT
Lecture 3: Cascading Style Sheet 19-Sep-18 Information Systems Department

2 Information Systems Department
Objectives To know what is CSS and why we use CSS. Learn the CSS syntax. Learn how to insert CSS. Learn about some CSS properties. 19-Sep-18 Information Systems Department

3 Information Systems Department
What is CSS? CSS stands for Cascading Style Sheets CSS defines how HTML elements are to be displayed When a browser reads a style sheet, it will format the document according to the information in the style sheet. CSS3 is the latest standard for CSS. 19-Sep-18 Information Systems Department

4 Information Systems Department
Why CSS? CSS3 allows you to specify the presentation of elements on a web page (e.g., fonts, spacing, sizes, colors, positioning) separately from the document’s structure and content (section headers, body text, links, etc.). This separation of structure from presentation simplifies maintaining and modifying web pages, especially on large-scale websites. 19-Sep-18 Information Systems Department

5 Information Systems Department
CSS Syntax A CSS rule set consists of a selector and a declaration block: The selector points to the HTML element you want to style. Declaration groups are surrounded by curly braces 19-Sep-18 Information Systems Department

6 Information Systems Department
CSS Syntax (Cont.) The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon. Do not add a space between the property value and the unit (such as font-size: 12 px;). The correct way is: font-size: 12px; 19-Sep-18 Information Systems Department

7 Information Systems Department
CSS Selectors CSS selectors allow you to select and manipulate HTML elements. CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more. 19-Sep-18 Information Systems Department

8 Information Systems Department
The Element Selector The element selector selects elements based on the element name. You can set all <p> elements on a page to be center-aligned, with a red text color: 19-Sep-18 Information Systems Department

9 Information Systems Department
The Id Selector The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element. To select an element with a specific id, write a hash character, followed by the id of the element. 19-Sep-18 Information Systems Department

10 Information Systems Department
The Id Selector (Cont.) The style rule below will be applied to the HTML element with id="para1“ Do NOT start an ID name with a number! 19-Sep-18 Information Systems Department

11 Information Systems Department
The Id Selector (Cont.) 19-Sep-18 Information Systems Department

12 Information Systems Department
The Class Selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period character, followed by the name of the class: In the example below, all HTML elements with class="center" will be center-aligned. Do NOT start a class name with a number! 19-Sep-18 Information Systems Department

13 The Class Selector (Cont.)
19-Sep-18 Information Systems Department

14 The Class Selector (Cont.)
19-Sep-18 Information Systems Department

15 The Class Selector (Cont.)
You can also specify that only specific HTML elements should be affected by a class. In the example below, all <p> elements with class="center" will be center-aligned 19-Sep-18 Information Systems Department

16 The Class Selector (Cont.)
19-Sep-18 Information Systems Department

17 The Class Selector (Cont.)
19-Sep-18 Information Systems Department

18 Information Systems Department
Grouping Selectors If you have elements/selectors with the same style definitions, like this: 19-Sep-18 Information Systems Department

19 Grouping Selectors (Cont.)
You can group the selectors, to minimize the code. To group selectors, separate each selector with a comma. 19-Sep-18 Information Systems Department

20 Information Systems Department
CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines 19-Sep-18 Information Systems Department

21 Information Systems Department
How to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal/embedded style sheet Inline style 19-Sep-18 Information Systems Department

22 Information Systems Department
External Style Sheet An external style sheet is ideal when the style is applied to many pages. Change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section: 19-Sep-18 Information Systems Department

23 External Style Sheet (Cont.)
19-Sep-18 Information Systems Department

24 External Style Sheet (Cont.)
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. 19-Sep-18 Information Systems Department

25 External Style Sheet (Cont.)
19-Sep-18 Information Systems Department

26 External Style Sheet (Cont.)
19-Sep-18 Information Systems Department

27 Internal/embedded Style Sheet
An internal/embedded style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag. 19-Sep-18 Information Systems Department

28 Internal/embedded Style Sheet (Cont.)
19-Sep-18 Information Systems Department

29 Internal/embedded Style Sheet (Cont.)
19-Sep-18 Information Systems Department

30 Internal/embedded Style Sheet (Cont.)
19-Sep-18 Information Systems Department

31 Information Systems Department
Inline Styles An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly! To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. 19-Sep-18 Information Systems Department

32 Information Systems Department
Inline Styles (Cont.) 19-Sep-18 Information Systems Department

33 Information Systems Department
Inline Styles (Cont.) 19-Sep-18 Information Systems Department

34 Information Systems Department
Multiple Style Sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.  For example, assume that an external style sheet has the following properties for the <h1> element: 19-Sep-18 Information Systems Department

35 Multiple Style Sheets (Cont.)
Then, assume that an internal style sheet also has the following property for the <h1> element:   If the page with the internal style sheet also links to the external style sheet the properties for the <h1> element will be: The left margin is inherited from the external style sheet and the color is replaced by the internal style sheet. 19-Sep-18 Information Systems Department

36 Information Systems Department
Cascading Order What style will be used when there is more than one style specified for an HTML element? 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 (in the head section) Inline style (inside an HTML element) 19-Sep-18 Information Systems Department

37 Cascading Order (Cont.)
An inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). 19-Sep-18 Information Systems Department

38 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

39 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

40 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

41 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

42 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

43 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

44 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

45 Cascading Order (Cont.)
If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet! 19-Sep-18 Information Systems Department

46 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

47 Cascading Order (Cont.)
19-Sep-18 Information Systems Department

48 Information Systems Department
CSS Background Property Description Example background Sets all the background properties in one declaration background: #00ff00 url("smiley.gif") no-repeat fixed center; background-color Sets the background color of an element background-color: #b0c4de; background-image Sets the background image for an element background-image: url("paper.gif"); background-position Sets the starting position of a background image background-image: url("img_tree.png"); background-position: right top; background-repeat Sets how a background image will be repeated background-image: url("gradient_bg.png"); background-repeat: repeat-x; 19-Sep-18 Information Systems Department

49 Information Systems Department
CSS Text Property Description Example color Sets the color of text color: blue; text-align Specifies the horizontal alignment of text (center, left, right, justify) text-align: center; text-decoration Specifies the decoration added to text (overline, line-through, underline) text-decoration: underline; text-transform Controls the capitalization of text (uppercase, lowercase, capitalize) text-transform: uppercase; text-indent Specifies the indentation of the first line in a text-block text-indent: 50px; 19-Sep-18 Information Systems Department

50 Information Systems Department
CSS Font Property Description Example font Sets all the font properties in one declaration font: 15px arial, sans-serif; font-family Specifies the font family for text font-family: "Times New Roman", Times, serif; font-size Specifies the font size of text font-size: 40px; font-style Specifies the font style for text (normal, italic, oblique) font-style: normal; 19-Sep-18 Information Systems Department

51 Information Systems Department
CSS Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Links can be styled differently depending on what state they are in. a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouse over it a:active - a link the moment it is clicked 19-Sep-18 Information Systems Department

52 Information Systems Department
CSS Links (Cont.) 19-Sep-18 Information Systems Department

53 Information Systems Department
CSS Links (Cont.) 19-Sep-18 Information Systems Department

54 Information Systems Department
CSS Links (Cont.) 19-Sep-18 Information Systems Department

55 Information Systems Department
CSS Border The CSS border properties allow you to specify the style, size, and color of an element's border. 19-Sep-18 Information Systems Department

56 Information Systems Department
CSS Border (cont.) The border-style property specifies what kind of border to display. The most commonly used border-style values: none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border border-style: solid; 19-Sep-18 Information Systems Department

57 Information Systems Department
CSS Border (Cont.) The border-color property is used to set the color of the border. The color can be set by: name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)" Hex - specify a hex value, like "#ff0000" Eg: border-style: solid;      border-color: red; 19-Sep-18 Information Systems Department

58 Information Systems Department
CSS Border (Cont.) The border property is a shorthand for the following individual border properties: border-width border-style (required) border-color Eg: border: 5px solid red; 19-Sep-18 Information Systems Department

59 Information Systems Department
CSS Border (Cont.) 19-Sep-18 Information Systems Department

60 Information Systems Department
CSS Border (Cont.) 19-Sep-18 Information Systems Department

61 Information Systems Department
CSS Border (Cont.) 19-Sep-18 Information Systems Department

62 CSS3 Border (New property)
Description Example border-radius A shorthand property for setting all the four border-*-radius properties div {     border: 2px solid;     border-radius: 25px; } box-shadow Attaches one or more drop-shadows to the box div {     box-shadow: 10px 10px 5px #888888; } 19-Sep-18 Information Systems Department

63 CSS Layout - The position Property
The position property specifies the type of positioning method used for an element. There are four different position values: static relative fixed absolute 19-Sep-18 Information Systems Department

64 Information Systems Department
position: static; HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static;  is always positioned according to the normal flow of the page 19-Sep-18 Information Systems Department

65 Information Systems Department
19-Sep-18 Information Systems Department

66 Information Systems Department
position: static; 19-Sep-18 Information Systems Department

67 Information Systems Department
position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. 19-Sep-18 Information Systems Department

68 Information Systems Department
19-Sep-18 Information Systems Department

69 Information Systems Department
position: relative; 19-Sep-18 Information Systems Department

70 Information Systems Department
position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. 19-Sep-18 Information Systems Department

71 Information Systems Department
position: fixed; 19-Sep-18 Information Systems Department

72 Information Systems Department
position: fixed; 19-Sep-18 Information Systems Department

73 Information Systems Department
position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static. 19-Sep-18 Information Systems Department

74 Information Systems Department
position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static. 19-Sep-18 Information Systems Department

75 Information Systems Department
19-Sep-18 Information Systems Department

76 Information Systems Department
19-Sep-18 Information Systems Department

77 Information Systems Department
position: absolute; 19-Sep-18 Information Systems Department

78 Information Systems Department
References Internet and World Wide Web How To Program , Deitel, Deitel & Deitel, 5th Edition (Chapter 4) 19-Sep-18 Information Systems Department


Download ppt "IS333: MULTI-TIER APPLICATION DEVELOPMENT"

Similar presentations


Ads by Google