1 CSS for Styling
Machbah Uddin
Assistant Professor
Department of Computer Science and
Mathematics
Bangladesh Agricultural University,
Mymensingh
Email: [Link]@[Link]
The good, the bad and
2
the… ugly!
<p>
<font face="Arial">Shashdot.</font>
News for <b>nerds!!</b> You will <i>never</i>, <u>EVER</u>
be
<font size="+4" color="red">BORED</font> here!
</p> HTML
Slashdot. News for nerds!! You will never, EVER be BORED
here!
output
Tags such as b, i, u, and font are
discouraged in strict XHTML
Why is this bad?
Cascading Style Sheets
3
(CSS)
Describes the appearance, layout, and
presentation of information on a web
page
HTML describes the content of the page
Describes how information is to be
displayed, not what is being displayed
Can be embedded in HTML document or
placed into separate .css file
Basic CSS rule syntax
4
selector {
property: value;
property: value;
...
property: value;
}
CSS
p {
font-family: sans-serif;
color: red;
}
CSS
A CSS file consists of one or more rules
Each rule starts with a selector
A selector specifies an HTML element(s) and then
applies style properties to them
a selector of * selects all elements
Attaching a CSS file <link>
5
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML
<link href="[Link]" type="text/css" rel="stylesheet" />
<link href="[Link]
rel="stylesheet" type="text/css" />
HTML
A page can link to multiple style sheet files
In case of a conflict (two sheets define a style for the
same HTML element), the latter sheet's properties will
be used
Embedding style sheets:
6
<style>
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
CSS code can be embedded within the head of an
HTML page
Bad style and should be avoided when possible
(why?)
Inline styles: the style
7
attribute
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML
This is a paragraph
output
Higher precedence than embedded or linked
styles
Used for one-time overrides and styling a
particular element
Bad style and should be avoided when possible
CSS properties for colors
8
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above
output
property description
color color of the element's text
color that will appear behind
background-color
the element
Specifying colors
9
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
color names: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal,
white (white), yellow
RGB codes: red, green, and blue values from 0 (none)
Grouping styles
10
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
This h2 uses the above styles.
output
A style can select multiple elements separated by
commas
The individual elements can also have their own
styles
CSS comments /*…*/
11
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
CSS (like HTML) is usually not commented as
rigorously as programming languages such as
Java
The // single-line comment style is NOT supported
in CSS
The <!-- ... --> HTML comment style is also NOT
supported in CSS
CSS properties for fonts
12
property description
font-family which font will be used
how large the letters will be
font-size
drawn
used to enable/disable italic
font-style
style
used to enable/disable bold
font-weight
style
omplete list of font properties ([Link]
font-family
13
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
Enclose multi-word font names in quotes
More about font-family
14
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
We can specify multiple fonts from highest to
lowest priority
Generic font names:
serif, sans-serif, cursive, fantasy, monospace
If the first font is not found on the user's
computer, the next is tried
Placing a generic font name at the end of your
font-family value, ensures that every computer
font-size
15
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
vague font sizes: xx-small , x-small , small , medium , large , x-large,
xx-large, smaller, larger
percentage font sizes, e.g.: 90%, 120%
font-size
16
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
pt specifies number of point, where a point is
1/72 of an inch onscreen
px specifies a number of pixels on the screen
em specifies number of m-widths, where 1 em is
equal to the font's current size
CS380
font-weight, font-style
17
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
Either of the above can be set to normal to turn
them off (e.g. headings)
CS380
CSS properties for text
18
property description
alignment of text within its
text-align
element
decorations such as
text-decoration
underlining
line-height,
gaps between the various
word-spacing,
portions of the text
letter-spacing
indents the first letter of each
text-indent
paragraph
omplete list of text properties ([Link]
text-align
19
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
The Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
text-align can be left, right, center, or
justify
text-decoration
20
p {
text-decoration: underline;
}
CSS
This paragraph uses the style above.
output
can also be overline, line-through, blink,
or none
effects can be combined:
text-decoration: overline underline;
The list-style-type property
21
ol { list-style-type: lower-roman; }
CSS
Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic,
Body styles
22
body {
font-size: 16px;
}
CSS
Applies a style to the entire body of your page
Saves you from manually applying a style to each
element
Cascading Style Sheets
23
Properties of an element cascade
together in this order:
browser's default styles
external style sheet files (in a <link> tag)
internal style sheets (inside a <style> tag
in the page's header)
inline style (the style attribute of the HTML
element)
Inheriting styles
24
body { font-family: sans-serif; background-color:
yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS
This is a heading
A styled paragraph. Previous slides are available on the website.
• A bulleted list
output
when multiple styles apply to an element, they
are inherited
a more tightly matching rule can override a more
general inherited rule
Styles that conflict
25
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above.
This heading uses both styles above.
output
when two styles set conflicting values for the
same property, the latter style takes precedence
W3C CSS Validator
26
<p>
<a
href="[Link]
<img src="[Link]
alt="Valid CSS!" /></a>
</p> CSS
output
[Link]/css-validator/
checks your CSS to make sure it meets the
official CSS specifications
CSS properties for
27
backgrounds
property description
background-color color to fill background
background-image image to place in background
placement of bg image within
background-position
element
whether/how bg image should
background-repeat
be repeated
whether bg image scrolls with
background-attachment
page
shorthand to set all
background
background properties
background-image
28
body {
background-image: url("images/[Link]");
}
CSS
background image/color fills the element's
content area
background-repeat
29
body {
background-image: url("images/[Link]");
background-repeat: repeat-x;
}
CSS
can be repeat (default), repeat-x, repeat-y, or no-
repeat
background-position
30
body {
background-image: url("images/[Link]");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
value consists of two tokens, each of which can
be top, left, right, bottom, center, a percentage,
or a length value in px, pt, etc.
value can be negative to shift left/up by a given
amount
Aside: Favorites icon
31
("favicon")
<link href="filename" type="MIME type" rel="shortcut icon"
/> HTML
<link href="[Link]" type="image/gif" rel="shortcut
icon" />
HTML
The link tag, placed in the HTML page's head
section, can specify an icon
this icon will be placed in the browser title bar and
bookmark/favorite
Practice
32
[Link]
[Link]