Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.