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