IS234T: MULTI-TIER

APPLICATION
DEVELOPMENT

Lecture 3: Cascading Style Sheet

Information Systems
3/28/21 1
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.

3/28/21 Information Systems Department 2

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.

3/28/21 Information Systems Department 3

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.

3/28/21 Information Systems Department 4

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

3/28/21 Information Systems Department 5

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;
3/28/21 Information Systems Department 6
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.

3/28/21 Information Systems Department 7

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:

3/28/21 Information Systems Department 8

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.

3/28/21 Information Systems Department 9

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!

3/28/21 Information Systems Department 10

The Id Selector (Cont.)

3/28/21 Information Systems Department 11

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!

3/28/21 Information Systems Department 12

The Class Selector (Cont.)

3/28/21 Information Systems Department 13

The Class Selector (Cont.)

3/28/21 Information Systems Department 14

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

3/28/21 Information Systems Department 15

The Class Selector (Cont.)

3/28/21 Information Systems Department 16

The Class Selector (Cont.)

3/28/21 Information Systems Department 17

Grouping Selectors
 If you have elements/selectors with the same style
definitions, like this:

3/28/21 Information Systems Department 18

Grouping Selectors (Cont.)
 You can group the selectors, to minimize the code.
 To group selectors, separate each selector with a
comma.

3/28/21 Information Systems Department 19

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

3/28/21 Information Systems Department 20

How to Insert CSS
 There are three ways of inserting a style sheet:
 External style sheet
 Internal/embedded style sheet
 Inline style

3/28/21 Information Systems Department 21

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:

3/28/21 Information Systems Department 22

External Style Sheet (Cont.)

3/28/21 Information Systems Department 23

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.

3/28/21 Information Systems Department 24

External Style Sheet (Cont.)

3/28/21 Information Systems Department 25

External Style Sheet (Cont.)

3/28/21 Information Systems Department 26

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.

3/28/21 Information Systems Department 27

Internal/embedded Style Sheet (Cont.)

3/28/21 Information Systems Department 28

Internal/embedded Style Sheet (Cont.)

3/28/21 Information Systems Department 29

Internal/embedded Style Sheet (Cont.)

3/28/21 Information Systems Department 30

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.

3/28/21 Information Systems Department 31

Inline Styles (Cont.)

3/28/21 Information Systems Department 32

Inline Styles (Cont.)

3/28/21 Information Systems Department 33

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:

3/28/21 Information Systems Department 34

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.
3/28/21 Information Systems Department 35
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:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

3/28/21 Information Systems Department 36

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).

3/28/21 Information Systems Department 37

Cascading Order (Cont.)

3/28/21 Information Systems Department 38

Cascading Order (Cont.)

3/28/21 Information Systems Department 39

Cascading Order (Cont.)

3/28/21 Information Systems Department 40

Cascading Order (Cont.)

3/28/21 Information Systems Department 41

Cascading Order (Cont.)

3/28/21 Information Systems Department 42

Cascading Order (Cont.)

3/28/21 Information Systems Department 43

Cascading Order (Cont.)

3/28/21 Information Systems Department 44

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!

3/28/21 Information Systems Department 45

Cascading Order (Cont.)

3/28/21 Information Systems Department 46

Cascading Order (Cont.)

3/28/21 Information Systems Department 47

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

3/28/21 Information Systems Department 48

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

3/28/21 Information Systems Department 49

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

3/28/21 Information Systems Department 50

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

3/28/21 Information Systems Department 51

CSS Links (Cont.)

3/28/21 Information Systems Department 52

CSS Links (Cont.)

3/28/21 Information Systems Department 53

CSS Links (Cont.)

3/28/21 Information Systems Department 54

CSS Border
 The CSS border properties allow you to specify the
style, size, and color of an element's border.

3/28/21 Information Systems Department 55

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;

3/28/21 Information Systems Department 56

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;

3/28/21 Information Systems Department 57

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;

3/28/21 Information Systems Department 58

CSS Border (Cont.)

3/28/21 Information Systems Department 59

CSS Border (Cont.)

3/28/21 Information Systems Department 60

CSS Border (Cont.)

3/28/21 Information Systems Department 61

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

3/28/21 Information Systems Department 62

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

3/28/21 Information Systems Department 63

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

3/28/21 Information Systems Department 64

3/28/21 Information Systems Department 65
position: static;

3/28/21 Information Systems Department 66

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.

3/28/21 Information Systems Department 67

3/28/21 Information Systems Department 68
position: relative;

3/28/21 Information Systems Department 69

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.

3/28/21 Information Systems Department 70

position: fixed;

3/28/21 Information Systems Department 71

position: fixed;

3/28/21 Information Systems Department 72

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.

3/28/21 Information Systems Department 73

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.

3/28/21 Information Systems Department 74

3/28/21 Information Systems Department 75
3/28/21 Information Systems Department 76
position: absolute;

3/28/21 Information Systems Department 77

References
 Internet and World Wide Web How To Program ,
Deitel, Deitel & Deitel, 5th Edition (Chapter 4)
 http://www.w3schools.com/css/default.asp

3/28/21 Information Systems Department 78