Scribd
Upload
104 views

WebSystemsAndTechnologies - 03. Cascading Style Sheets (CSS)

This document provides an overview of Cascading Style Sheets (CSS). It discusses how CSS allows separation of document structure (HTML) from presentation (styles), how CSS rules are structured, and the different ways to link CSS to HTML documents. The document also covers CSS syntax, selectors used to target specific elements, and common text styling properties like font, color, size.

Uploaded by

thanh thien
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
104 views

WebSystemsAndTechnologies - 03. Cascading Style Sheets (CSS)

This document provides an overview of Cascading Style Sheets (CSS). It discusses how CSS allows separation of document structure (HTML) from presentation (styles), how CSS rules are structured, and the different ways to link CSS to HTML documents. The document also covers CSS syntax, selectors used to target specific elements, and common text styling properties like font, color, size.

Uploaded by

thanh thien
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 70

Web Systems and

Technologies
Chapter 03.
Cascading Style Sheets (CSS)
Content
 What is CSS?
 Styling with Cascading Stylesheets (CSS)
 Selectors and style definitions
 Linking HTML and CSS
 Fonts, Backgrounds, Borders
 The Box Model
 Alignment, Z-Index, Margin, Padding
 Positioning and Floating Elements
 Visibility, Display, Overflow

2
Benefits of Cascading Style Sheets
 Separate document presentation from document content
 More features for formatting the appearance
 Can define font, size, background color, background image, margins, etc.
 Share style sheets across multiple documents or entire Web site
 Reduce development and maintenance time
 Can specify a class definition for a style, effectively defining new HTML
elements
 Flexible – rules are applied in a hierarchical manner (precedence rules)

3
How do Style Sheets work?
 Browser may ignore some or all of the rules specified in the style sheets.

4
Cascading Style Sheets
 A simple text file with “.css suffix”
 CSS, Level 1 (1996)
 Concerned with applying simple styles to HTML elements
 CSS, Level 2 (1998)
 Incorporates and extends CSS-1
 Supports media-specific style sheets (visual browsers, aural devices, printers,
etc)
 CSS, Level 3 (Under development)
 Incorporates and extends CSS-2
 Focused on modularization of the CSS specification
 New selectors, fancy borders and backgrounds, vertical text, user interaction,
speech and much more.
 Note:
 A browser may not support all features in CSS level 1 and 2 5
What kinds of style does CSS support?
 CSS 1
 Font properties such as typeface and emphasis
 Color of text, backgrounds, and other elements
 Text attributes such as spacing between words, lines
 Alignment of text, images, tables, etc.
 Margin, border, padding, and positioning of most elements
 Dimension
 CSS 2
 Relative and fixed positioning of most elements
 Bidirectional texts
 New font properties

6
Select an element in the HTML file
 What are statements, selectors, declarations and properties?
 How to specify them?

7
CSS Syntax

A single statement
Property names and values (3 properties here)
selector
body
{
declaration font-family: Verdana, Helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}
/* CSS Comments */
8
CSS Syntax (cont.)
 Statement must have one or more selectors and a declaration.
 Selector specifies which HTML elements to be affected.
 Declaration is one or more properties separated by semicolons “;”.
 Property has name and value separated by a colon “:”.
 Some values have unit
 White space is ignored but can improve readability

9
Three Ways of Using CSS
 External Style Sheet
 Store CSS code in an external file (usually with .css extension)
 Apply to any document that explicitly includes the .css file

 Internal or Embedded Style Sheet


 Defined in HTML document
 Affect only the page where the style is defined

 Inline Styles
 Specified as an attribute in HTML tag
 Apply to only one element

10
Specifying External Style Sheet
 Use <link> tag in <head> section to associate an external style sheet to the
HTML file.
<head>
…
<link rel="stylesheet" type="text/css"
href="style1.css" >
…
</head>

style1.css
h1 { text-align: center; font-family: Arial; }
h2 { color: #440000;
text-align: center;
font-family: Arial Black, Arial, Helvetica;
}
11
Specifying Internal Style Sheet
 Use <style> tag in <head> section
 Add <!-- and --> between statements to hide the statements from being
displayed by browsers that do not understand <style> elements.

<head>
…
<style type="text/css">
<!--
hr { color: sienna; }
p { margin-left: 20px; }
body { background-image: url("images/back40.gif"); }
-->
</style>
…
</head>
12
Specifying Inline Styles
 Use attribute style in HTML tag to specify properties applied to that element

<p style="color: sienna; margin-left: 20px;">


This is a paragraph
</p>

13
Selectors
 Selectors determine which element the rule applies to:
 All elements of specific type (tag)
 Those that mach a specific attribute (id, class)
 Elements may be matched depending on how they are nested in the
document tree (HTML)
 Examples:
.header a { color: green }

#menu>li { padding-top: 8px }

14
Selectors (2)
 Three primary kinds of selectors:
 By tag (type selector): h1 { font-family: verdana,sans-serif; }

 By element id: #element_id { color: #ff0000; }

 By element class name (only for HTML):


.myClass {border: 1px solid red}

 Selectors can be combined with commas:


h1, .link, #top-link {font-weight: bold}

 This will match <h1> tags, elements with class link, and element with id top-
link
15
Selectors (3)
 Pseudo-classes define state
 :hover, :visited, :active , :lang
 Pseudo-elements define element "parts" or are used to generate content
 :first-line , :before, :after

a:hover { color: red; }


p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }

16
Selectors (4)
 Match relative to element placement:
p a {text-decoration: underline}
This will match all <a> tags that are inside of <p>
 * – universal selector (avoid or use with care!):

p * {color: black}
This will match all descendants of <p> element
 + selector – used to match “next sibling”:
img + .link {float:right}
This will match all siblings with class name link that appear immediately
after <img> tag

17
Selectors (5)
 > selector – matches direct child nodes:
p > .error {font-size: 8px}
This will match all elements with class error, direct children of <p> tag
 [ ] – matches tag attributes by regular expression:

img[alt~=logo]
This {border:
will match all <img> tagsnone}
with alt attribute containing the word logo
 .class1.class2 (no space) - matches elements with both (all) classes
applied at the same time

18
Values in the CSS Rules
 Colors are set in RGB format (decimal or hex):
 Example: #a0a6aa = rgb(160, 166, 170)
 Predefined color aliases exist: black, blue, etc.
 Numeric values are specified in:
 Pixels, ems, e.g. 12px , 1.4em
 Points, inches, centimeters, millimeters
 E.g. 10pt , 1in, 1cm, 1mm
 Percentages, e.g. 50%
 Percentage of what?...
 Zero can be used with no unit: border: 0;

19
Default Browser Styles
 Browsers have default CSS styles
 Used when there is no CSS information or any other style information in the
document
 Caution: default styles differ in browsers
 E.g. margins, paddings and font sizes differ most often and usually
developers reset them

* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding: 0; }

20
CSS Cascade (Precedence)
 There are browser, user and author stylesheets with "normal" and "important"
declarations
 Browser styles (least priority)
 Normal user styles
 Normal author styles (external, in head, inline)
 Important author styles
 Important user styles (max priority)

a { color: red !important ; }

21
Property Categories
 Text style – Fonts properties, …
 Text layout – Text alignments, …
 Foreground & Background
 Border
 Margin
 Padding
 Page layout
 Element type
 User interface

22
Text Style Properties
 What properties does text have?
 Color
 Font-specific
 font-weight
 font-family
 font-size
 font-style
 font-size-adjust
 font-stretch
 Text-specific
 text-decoration
 text-transform
 text-shadow 23
Useful Font Properties
 font-weight
 Relative weight (boldness) of font
 normal | lighter | bold | bolder | 100 | 200 | ... | 900 | inherit
H1 { font-weight : 200 }
H2 { font-weight : bolder }

 font-style
 Font face type within a family
 normal | italic | oblique
P { font-style : normal }
TH { font-style : italic }
24
Useful Font Properties (2)
 font-size
 Either relative or absolute size of font
 Absolute length value: pt, pc, in, cm, mm
 Relative length values: em, ex, px, %
 Absolute size: xx-large | x-large | large | medium | small | x-small |
xx-small
 Relative size: smaller | larger
STRONG { font-size: 150% }
P { font-size: 14pt }
P { font-size: xx-large }

25
Useful Font Properties (3)
 font-family
 Typeface family for the font
H1 { font-family: Arial } /* Arial is a font name */
H2 { font-family: serif }
/* serif is a keyword, which suggests the user agents
to use a font that belong to the "serif" font family
*/
 Generic font families:
 serif: Times New Roman
 sans-serif: Arial
 cursive: Comic Sans MS
 fantasy: Decorative fonts
 monospace: Courier New (Font with fixed width) 26
Text layout properties
 How text is layout on a page?
 Letter-spacing
 Word-spacing
 Line-height
 Vertical-align
 Text-indent
 Text-align
 Direction

27
Useful Text Properties
 text-decoration
 Describes text additions or “decorations” that are added to the text of an
element
 none | underline | overline | line-through | blink
P { text-decoration: underline; }

 vertical-align
 Determines how elements are positioned vertically
 top | bottom | baseline | middle | sub | super | text-top | text-bottom | %

 text-align
 Determines how paragraphs are positioned horizontally
 left | right | center | justify 28
Useful Text Properties (2)
 text-indent
 Specifies the indentation of the first line of the paragraph
 +/– pt, pc, in, cm, mm | +/– em, ex, px, %
P { text-indent: -25px } /* Hanging indent */

 line-height
 Specifies the distance between two consecutive baselines in a paragraph
 normal | number | pt, pc, in, cm, mm | em, ex, px, %
.double { line-height: 200% }
.triple { line-height: 3 }/* 3x the font size */
DIV { line-height: 1.5em }

29
Background Properties
 How can we set the background of an element?
 Background-color
 Background-image
 Background-attachment
 Background-repeat
 Background-position
 background

30
Useful Color and Background Properties
 color
 Color of the text (foreground color)
 color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) | rgb(rrr%, ggg%, bbb%)
P { color : blue; }
H1 { color : #00AABB; }
H3 { color : rgb(255, 0, 0 ); } /* red */

 background-color
 Background color
 transparent | all possible values of property "color"
 background-image
 none | url(filename)
 Specifies an image to use as the background of region
H2 { background-image: url(Bluedrop.gif); } 31
Useful Color and Background Properties (2)
 background-repeat
 Specifies how to tile the image in the region
 repeat | repeat-x | repeat-y | norepeat
BODY {
  background-image: url(Bluedot.gif);
background-repeat: repeat-x;
}

 background
 Lets you combine properties in a single entry
P { background: url(wallpaper.jpg) repeat-x; }

32
Useful Color and Background Properties (3)
 background-attachment
 Specifies whether background image is fixed or scrolled with document
 scroll | fixed
 e.g: Creates an infinite vertical band that remains "glued" to the viewport
when the element is scrolled.
BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
 note: "fixed" fixes image w.r.t. to the viewport (the browser displaying area)
and not w.r.t. to the containing black.
33
Useful Color and Background Properties (4)
 background-position
 Specifies initial position of the background image
 Specified using two values
% %
 <length> <length> /* fixed absolute distance */
 [top | center | bottom] [left | center | right]
BODY { background: url("banner.jpeg") right top } /*
100% 0% */
BODY { background: url("banner.jpeg") top center } /*
50% 0% */
BODY { background: url("banner.jpeg") center } /*
50% 50% */
BODY { background: url("banner.jpeg") bottom } /*
50% 100% */ 34
Box Model
 Every displayable element is contained in a box that has a content area (text,
image, etc.), an optional padding, border and margin areas.

margin
border
padding

This is the Content


padding
border
margin
35
Content, Padding, Border and Margin
 Content area is the smallest rectangle containing the rendered data that make up
the element.

 Padding is the space between the content and the element's borders.
 Padding takes the background of the element

 Border can have styles

 Margin is the space between the element's borders and the "containing box"
(which belongs to the element's parent or ancestor in the document tree)
 Margin is always transparent

36
Padding and Margin
 Padding and margin can be further divided into four sub-areas -- top, right,
bottom, left
 Padding areas take the background of the element.
 Margin areas are always transparent (takes the containing box background).
 Does not apply to table elements (table, td, tr, th)
P { padding-top: 2em; margin-right: 10em; }
 Short hand for setting margin (same for padding)
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em,
right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em,
bottom=3em, left=2em */ 37
Border Properties
 Border has the following properties
 width
 <length> | thin | medium | thick
 color
 <color value> | transparent
 Default value is the "color" property value of the element
 style
 none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset
 When style is "none", the border width is zero
P { border-width: 2em;
border-color: red;
border-style: solid; }
38
Border Properties (1) .tip {
background-color:
lightcyan;
<html>
<head> border-top-color:
#0000FF;
<title>Welcome</title>
border-right-color:
<link href="BorderColor.css" rel="stylesheet"
#FF0000;
type="text/css">
border-bottom-color:
</head> #FF00FF;
<body>
border-left-color:
<h2>CSS style border properties</h2> #FFFF00;
<div class="tip"> border-style: double;
<ol> border-width: 20px;
<li><b>Style </b>sets the style appearance of
}
the border.</li>
<li><b>Width </b>sets the thickness of the
elements border</li>
<li><b>Color </b>sets the color of the
border.</li>
</ol>
</div>
</body>
</html> 39
Images and Floating Elements
 width, height
 Specify a fixed size for an element (usually an image)
 auto | <length>

img.bullet { width: 50px; height: 50px; }


 float
 This property lets elements float into the left or right margins with text
wrapping around
 none | left | right
 clear
 Controlling flow next to float
 none | left | right | both
40
CSS Positioning Schemes
 Static
 Follows normal flow
 Relative
 Places an element with respect to where it would be statically positioned (i.e.
relative to the position assigned by the browser).
 Absolute positioning
 An element will be located with respect to its parent element (containing box)

 Fixed positioning
 The page scroll, the elements also scroll (remain fixed in the page).
 Not supported in IE

41
Useful Positioning Properties
 top, left, bottom, right
 Specifies the top/left/bottom/right sides of the layer relative to the parent
window
 <length> | % | auto
 position
 Describes how the position is defined to the parent window
 absolute | relative | static | fixed
 visibility
 Determines whether a layer is visible or hidden
 visible | hidden
 z-index
 Specifies which elements should appear above/below other elements
 <integer> | auto
 The higher the numbers, the higher the level 42
Float Property
 float: the element “floats” to one side
 left: places the element on the left and following content on the right
 right: places the element on the right and following content on the left
 floated elements should come before the content that will wrap around them
in the code
 margins of floated elements do not collapse
 floated inline elements can apply height
 How floated elements are positioned

43
Clear Property
 clear
 Sets the sides of the element where other floating elements are NOT allowed
 Used to "drop" elements below floated ones or expand a container, which
contains only floated children
 Possible values: left, right, both
 Clearing floats
 additional element (<div>) with a clear style
 :after {content: ""; display: block; clear: both;
height: 0;}
 Triggering hasLayout in IE expands a container of floated elements
 display: inline-block;
 zoom: 1;
44
Opacity Property
 opacity: specifies the opacity of the element
 Floating point number from 0 to 1
 For old Mozilla browsers use –moz-opacity
 For IE use filter:alpha(opacity=value) where value is from 0 to
100; also, "binary and script behaviors" must be enabled and hasLayout
must be triggered, e.g. with zoom:1

45
Visibility Property
 visibility
 Determines whether the element is visible
 hidden: element is not rendered, but still occupies place on the page
(similar to opacity:0)
 visible: element is rendered normally

46
Display Property
 display: controls the display of the element and the way it is rendered
and if breaks should be placed before and after the element
 inline: no breaks are placed before and after (<span> is an inline
element)
 block: breaks are placed before AND after the element (<div> is a
block element)
 display: controls the display of the element and the way it is rendered
and if breaks should be placed before and after the element
 none: element is hidden and its dimensions are not used to calculate the
surrounding elements rendering (differs from visibility: hidden!)
 There are some more possible values, but not all browsers support them
 Specific displays like table-cell and table-row 47
Overflow Property
 overflow: defines the behavior of element when content needs more space
than you have specified by the size properties or for other reasons. Values:
 visible (default) – content spills out of the element
 auto - show scrollbars if needed
 scroll – always show scrollbars
 hidden – any content that cannot fit is clipped

48
Table Properties

49
List Properties
 List properties allow set the type of the list-item marker, apply image to the
marker and position the marker

50
Scrollbar Properties
 Scroll bars allow the browser window to display continuous text.
 CSS allows customize the appearance of the scrollbar by using different
scrollbar properties.
 The scrollbar properties are not part of the CSS 2.0 specification but these are
supported by IE 5.5 or higher versions.

51
Screen Properties
 The cursor property: specifies the type of cursor to be displayed when the
mouse pointer is placed over the content
 Values of the cursor property:

 The zoom property: is used to enlarge the contents displayed on the Web page

52
Menu with CSS

53
CSS3 Borders
 With CSS3, you can create rounded borders, add shadow to boxes, and use an
image as a border - without using a design program, like Photoshop

54
CSS3 Borders (2)

55
CSS3 Borders (3)

56
CSS3 Borders (2)

57
CSS3 Background
 We will be taking a look at the new background properties. These include
background size, using more than one background for an element, and
background origin (which effects the position of a background).
 The new features allow greater control of the background element and will
provide designers with a whole array of new possibilities.
 Multiple Backgrounds
 The new ability to use multiple backgrounds is a great time saver, allowing you
to achieve effects which previously required more than one div. Whether it will
be possible to combine this with background-size will be interesting to see.
 The example below uses one background for the top border, one repeated
vertically for the left and right borders and a third at the bottom.

58
CSS3 Background (cont.)

59
CSS3 Text effects

60
CSS3 Text effects (2)

61
CSS3 shadows

62
CSS3 shadows (2)

63
CSS3 shadows (3)

64
CSS3 Transforms & Transitions
Transforms
 CSS3 transform property lets you translate, rotate, scale, or skew any element
on the page.
 While some of these effects were possible using previously existing CSS
features(like relative and absolute positioning), CSS3 gives you unprecedented
control over many more aspectsof an element’s appearance.

65
CSS3 Transforms & Transitions (2)
Translation
 Translation functions allow you to move elements left, right, up, or down.
 These functions are similar to the behaviour of position: relative; where you declare
top and left.
 When you employ a translation function, you’re moving elements without
impacting the flow of the document.

 Unlike position: relative, which allows you to position an element either against its
current position or against a parent or other ancestor, a translated element can only
be moved relative to its current position.

 The translate(x,y) function moves an element by x from the left, and y from the top.

66
Examples
 Examples. Let’s say we want to move the word “dukes” over to the right when
the user hovers over it,

#ourExample h1:hover span {


color: #484848;
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-ms-transform: translateX(40px);
-o-transform:translateX(40px);
transform: translateX(40px);
}

67
Examples (2)
 Scaling. The scale(x,y) function scales an element by the defined factors
horizontally and vertically, espectively. If only one value is provided, it will be used
for both the x and y scaling.

#ourExample h1:hover span {


color: #484848;
-webkit-transform: translateX(40px) scale(1.5);
-moz-transform: translateX(40px) scale(1.5);
-ms-transform: translateX(40px) scale(1.5);
-o-transform:translateX(40px) scale(1.5);
transform: translateX(40px) scale(1.5);
}

68
Examples (3)
 Rotation. The rotate() function rotates an element around the point of origin (as
with scale,by default this is the element’s center), by a specified angle value.
Generally, angles are declared in degrees, with positive degrees moving clockwise
and negativemoving counter-clockwise.

#ourExample h1:hover span {


color: #484848;
-webkit-transform:rotate(10deg) translateX(40px) scale(1.5);
-moz-transform:rotate(10deg) translateX(40px) scale(1.5);
-ms-transform:rotate(10deg) translateX(40px) scale(1.5);
-o-transform:rotate(10deg) translateX(40px) scale(1.5);
transform:rotate(10deg) translateX(40px) scale(1.5);
} 69
70

You might also like