Scribd
Upload
80 views

Web Application Development: Cascading Style Sheet (CSS)

CSS can be used to control the layout and formatting of HTML documents. CSS rules are made up of selectors that indicate which HTML elements the rules apply to, and declarations that specify how those elements should be styled. CSS rules can be defined inline within HTML elements, embedded within the <style> tags in the HTML <head> section, or linked via external CSS files. External stylesheets allow CSS rules to be reused across multiple web pages. Common CSS properties control fonts, colors, text alignment, and other text styling and formatting features.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
80 views

Web Application Development: Cascading Style Sheet (CSS)

CSS can be used to control the layout and formatting of HTML documents. CSS rules are made up of selectors that indicate which HTML elements the rules apply to, and declarations that specify how those elements should be styled. CSS rules can be defined inline within HTML elements, embedded within the <style> tags in the HTML <head> section, or linked via external CSS files. External stylesheets allow CSS rules to be reused across multiple web pages. Common CSS properties control fonts, colors, text alignment, and other text styling and formatting features.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

Web Application Development

Cascading Style Sheet (CSS)


Outline
• Concepts of CSS
• Controlling font
• Text format
• Box model
• Table

2
Introduction
• CSS: Cascading Style Sheet
• CSS is a style language for defining layout of
HTML documents
– Separation of structure from presentation
– CSS covers fonts, colors, margins, lines, height,
width, background images, advanced positions
and many other things

3
Adding CSS Rules to HTML
• 3 CSS Styles: Inline style, Embedded style &
External style
• Inline style: specify for each element
<h1 style="color:blue;margin-left:30px;">
This is a heading.
</h1>

4
Adding CSS Rules to HTML
• Embedded/Internal style: embed an entire
CSS document in an HTML document’s head
section
<head>
<style>
body {background-color: red;}
</style>
</head>

5
Adding CSS Rules to HTML
• External style: style sheet can be stored in a separate
file
• “mystyle.css” looks as follows:
body {
background-color: blue;
}
h1 {
color: red;
margin-left: 20px;
}

<head>
<link rel="stylesheet" type="text/css“
href="mystyle.css">
</head>
6
Advantages of External Style Sheets
• Reuse CSS rules
• Reduce size of Web pages
• Change the appearance of several pages by
altering just the style sheet rather than
modifying each individual page
• Because the source document does not
contain the style rules, different style sheets
can be attached to the same document (i.e.
desktops vs. phones)
7
Cascading
Priority
– inline
– embedded
– external

8
CSS Rules
• CSS works by associating rules with elements
in documents
• Each rule has two parts
– Selector: indicates which elements the declaration
applies to
– Declaration: indicates how elements should be
styled

9
Type of Selectors
• Class selector
• ID selector
• Type selector

10
Class Selector

<p class="highlight">This paragraph has red text.</p>


<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>

/* Define highlight class */


.highlight {
color:#F00;
}
/* Define default class */
.default {
color:#333;
}

11
Class Selector

<p class="highlight">This paragraph has red text.</p>


<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>

• The same class can be used on multiple elements

• Multiple classes can be applied on the same element

12
ID Selector

<p id="highlight">This paragraph has red text.</p>


<p id="default">This paragraph has dark gray text.</p>

/* Define highlighted text */


#highlight {
color:#F00;
}
/* Define default text */
#default {
color:#333;
}
13
ID Selector

<p id="highlight">This paragraph has red text.</p>


<p id="default">This paragraph has dark gray text.</p>

• Each element can have only one ID

• Each page can have only one element with that ID

14
Type Selector

<p>This paragraph has red text.</p>


<p>This paragraph has red text.</p>

/* Define red text */


p{
color:#F00;
}

15
Multiple external style sheets
CSS

HTML CSS

CSS

<link rel="stylesheet“ type="text/css" href="css/one.css" />


<link rel="stylesheet“ type="text/css" href="css/two.css" />
<link rel="stylesheet“ type="text/css" href="css/three.css”/>
three.css has the highest priority

16
Imported Style Sheets
CSS

CSS CSS

CSS

<style>@import url("one.css")</style>
<style> @import url("two.css")</style>
<style> @import url("three.css")</style>

17
Grouping
/* Heading styles */ /* Heading styles */
h1 { h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif; font-family:Helvetica,Arial,sans-
color:#333; serif;
} color:#333;
h2 { }
font-family:Helvetica,Arial,sans-serif;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
color:#333;
}

18
Grouping

/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
color:#333;
}
/* Additionally, render all h1 headings in italics */
h1 {
font-style:italic;
}

19
Colors
Every color on a computer screen is created by mixing
amounts of red, green, and blue.

20
Colors
Color Color HEX Color RGB Color Name

#000000 rgb(0,0,0) Black

#FF0000 rgb(255,0,0) Red

#00FF00 rgb(0,255,0) Green

#0000FF rgb(0,0,255) Blue

#FFFF00 rgb(255,255,0) Yellow

#00FFFF rgb(0,255,255) Cyan

#FF00FF rgb(255,0,255) Fuchsia

#C0C0C0 rgb(192,192,192) Silver

#FFFFFF rgb(255,255,255) White

21
Division
<div> tag divides a page into groups
<div>
<p>This is our content area.</p>
</div>

<div id="container">
<p>This is our content area.</p>
</div>

22
Division

<div id="container">
<p>This is our content area.</p>
</div>

/* Container holds all visible page elements */


#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}

23
Controlling Fonts

24
Controlling Fonts
The font-family Property
<p class=”one”>Here is some text.</p>
<p class=”two”>Here is some text.</p>
<p class=”three”>Here is some text.</p>

.one {font-family:arial, verdana, sans-serif;}


.two {font-family:times, “times new roman”, serif;}
.three {font-family:courier, “courier new”, serif;}

25
Generic Fonts

26
Controlling Fonts

•Weight: p {font-weight: bold}


• Style: p {font-style: italic}
• Stretch: p {font-stretch: condensed}

27
Formatting Text
• color: color of text
<html>
<head>
<style>
h1 { color: green; }
p {color: blue}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph</p>
</body>
</html>

28
Formatting Text
• text-align: Specifies the alignment of the text within
its containing element; values = {left, right, center,
justify}
<html>
<head>
<style>
h1 { text-align: center; }
h2 { text-align: right; }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

29
Formatting Text
• vertical-align: Vertical alignment of text within containing element and in
relation to containing element; values={baseline, sub, super, top, etc.}

<html>
<head>
<style>
img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
</style>
</head>
<body>
<p>An <img src="usth.png" /> image with a default alignment.</p>
<p>An <img class="top" src="usth.png" /> image with a text-top
alignment.</p>
<p>An <img class="bottom" src="usth.png" /> image with a text-bottom
alignment.</p>
</body>
</html>
30
Formatting Text
• text-decoration: Specifies whether the text should be underlined, overlined,
strikethrough, or blinking text; values={overline, underline, line-through,
blink}
<html>
<head>
<style>
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>

31
Pseudo-class
• Pseudo class: a mechanism allows to add some
special effect to some selector
• Indicated by: selector: pseudo class
• Example: a:link, a:visited, a:hover, a:active

32
Pseudo-class
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
background-color: yellow;
}
</style>

33
Box Model
Every element is treated as a box in CSS

34
Box Model

Property Description
border Even if you cannot see it, every box has a border. This
separates the edge of the box from other boxes.
margin The margin is the distance between the edge of a box and
the box next to it.
padding This padding is the space between the content of the box
and its border.

35
Border Properties
• border-color
• border-style: none, solid, dotted, etc.
• border-width
• border-top/bottom/left/right
• Example of a blue solid border

36
Border Properties
• border-style: none, dotted, dashed, solid,
ridge, etc.
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
// rules: top right bottom left
border-style: dashed dotted solid ridge;
}

37
Margin Properties
The margin property is used to declare the margin
between an HTML element and those elements
outside of it
#container {
margin-top: 70px;
margin-right: 50px;
margin-bottom: 70px;
margin-left: 50px;
}

#container {
margin: 70px 50px 70px 50px;
}
38
Padding Properties
Padding is the distance between the edges
(borders) of an HTML element and the content
within it
#container {
padding-top: 50px;
padding-left: 80px;
padding-right: 50px;
padding-bottom: 50px;
}

39
Dimensions

Property Purpose
height Sets the height of a box
width Sets the width of a box
line-height Sets the height of a line of text
max-height Sets a maximum height for a box
min-height Sets the minimum height for a box
max-width Sets the maximum width for a box
min-width Sets the minimum width for a box

40
Height and Width

<style>
div {
height: 100px;
width: 320px;
}
</style>

41
Line-height

<style>
p.small {
line-height: 70%;
}

p.big {
line-height: 200%;
}

</style>

42
Max-height

<style>
p{
max-height: 50px;
background-color: yellow;
overflow: auto;
}
</style>

43
Background

44
Tables
• padding to set the amount of space between the
border of a table cell and its content — this
property is very important to make tables easier
to read.
• border to set the properties of the border of a
table.
• text and font properties to change the
appearance of anything written in the cell.
• text-align to align writing to the left, right, or
center of a cell.

45
Tables
• vertical-align to align writing to the top, middle,
or bottom of a cell.
• width to set the width of a table or cell.
• height to set the height of a cell (often used on a
row as well).
• background-color to change the background
color of a table or cell.
• background-image to add an image to the
background of a table or cell.
• :hover to highlight a table row when a user point
the mouse to it

46
47

You might also like