0% found this document useful (0 votes)
32 views

Is234T: Multi-Tier Application Development: Lecture 3: Cascading Style Sheet

The document discusses Cascading Style Sheets (CSS) and provides information on: - What CSS is and why it is used to separate document structure from presentation - CSS syntax including selectors, declaration blocks, and properties - Different ways to insert CSS like external, internal, and inline styles - CSS properties and how styles cascade based on specificity with inline having the highest priority

Uploaded by

msskjc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
32 views

Is234T: Multi-Tier Application Development: Lecture 3: Cascading Style Sheet

The document discusses Cascading Style Sheets (CSS) and provides information on: - What CSS is and why it is used to separate document structure from presentation - CSS syntax including selectors, declaration blocks, and properties - Different ways to insert CSS like external, internal, and inline styles - CSS properties and how styles cascade based on specificity with inline having the highest priority

Uploaded by

msskjc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 78

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

You might also like