1 CSS for Styling

HTML
2
<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

CS380
 Cascading Style Sheets (CSS)
3

 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 a separate .css file

CS380
 With style sheets we can
4

 Add style markup to individual HTML elements

(called inline style).
 Create sequences of style instructions in the head
of an HTML document (called an internal style
sheet).
 Refer to a separate stand-alone style sheet via a
link or other reference (called an external style
sheet) inside your HTML document.
 Style an HTML document differently depending on
whether it's being viewed on a desktop computer
or a mobile phone.
 Inline styles: the style attribute
5

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

CS380
 Advantages of CSS
6

 CSS saves time - You can write CSS once and then
reuse same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it
to as many web pages as you want.
 Pages load faster - If you are using CSS, you do
not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So, less code means faster
download times.
 Advantages of CSS
7
 Easy maintenance - To make a global change,
simply change the style(s) in CSS file, and all
elements in all the web pages will be updated
automatically.
 Superior styles to HTML - CSS has a much wider
array of attributes than HTML so you can give far
better look to your HTML page in comparison of
HTML attributes. Multiple device compatibility -
Style sheets allow content to be optimized for more
than one type of device.
 Create dynamic pages: With CSS, anyone can
easily animate HTML elements with just a couple
 Disadvantages of CSS
8

 Browser Compatibility: CSS works differently on

different browsers. Internet Explorer and Opera
supports CSS as different logic.

 Lack of Variables: CSS contain no variables. This

makes it necessary to do a "replace-all" when one
desires to change a fundamental constant, such as
color schemes or various heights and widths.
 Disadvantages of CSS
9

 Different Syntax to HTML: CSS was developed

independently of HTML and uses a different
syntax, so a web developer has to learn two sets of
formatting syntax instead of one. CSS syntax is
also rather clumsy and user-unfriendly.
 Lack of Security: CSS is an open text-based
system. There is no security built-in, and anyone
with read/write access to a website can disrupt the
formatting by changing the CSS files.
 4.2.3 CSS Syntax / CSS Rule
10

 A CSS comprises of style rules (CSS Rules) that are

interpreted by the browser and then applied to the
corresponding elements in your document.
 A CSS rule has two main parts:
 Selector: A selector is an HTML tag at which style will be
applied. This could be any tag like <h1> or <table> etc.
 Declaration: Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each
property has a value. A CSS declaration always ends with a
semicolon, and declaration groups are surrounded by curly brackets.
 Basic CSS rule syntax
11

selector {
property: value;
property: value;
...
property: value;
} CSS

p {
font-family: sans-serif;
color: red;
} CSS
 Syntax of CSS style rule is as follows:
12

 Example: Selectors{property: value}

 h1
{
color : blue;
font-size : 12px;
}
 Syntax of CSS style
13

 You can also apply a style to many selectors by

adding a comma.
 Ex
H1,H2,H3
{
color : blue;
font-size : 12px;
text-transform : lowercase;
}
 Attaching a CSS file <link>
14

<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML

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

<link href="http://www.google.com/uds/css/gsearch.css"
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

CS380
 Ex:
<HTML>
<HEAD>
<STYLE>
P, H2, H3
{
TEXT-ALIGN : CENTER;
COLOR: BULE;
FONT-WEIGHT: BOLD;
}
</STYLE>
</HEAD>
<BODY>
<H2> HEADING-2 IS AFFECTED BY STYLE </H2>
<H3> HEADING-3 IS AFFECTED BY STYLE </H3>
<P> THIS PARAGRAPH IS AFFECTED BY STYLE </P>
</BODY>
15
</HEAD>
16 CS380
 CSS properties for colors
17

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 the
background-color
element

CS380
 Specifying colors
18

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) to 255 (full)
 hex codes: RGB values in base-16 from 00 (0, none) to FF (255,
 Grouping styles
19

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

CS380
 CSS comments /*…*/
20

/* 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

CS380
 CSS properties for fonts
21

property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style

Complete list of font properties CSS Fonts (w3schools.com)

CS380
 font-family
22

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

CS380
 More about font-family
23

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 will use a valid font
CS380
 font-size
24

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%
CS380
 font-size
25

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
26

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
27

property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
gaps between the various portions of
word-spacing,
the text
letter-spacing
indents the first letter of each
text-indent
paragraph

Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)

CS380
 text-align
28

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

CS380
 text-decoration
29

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;

CS380
 The list-style-type property
30

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, hiragana…
 Body styles
31

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

CS380
 Cascading Style Sheets
32

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

CS380
 Inheriting styles
33

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
CS380
 Styles that conflict
34

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

CS380
 CSS properties for backgrounds
35

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 be
background-repeat
repeated
background-attachment whether bg image scrolls with page
shorthand to set all background
background
properties

CS380
 background-position
36

body {
background-image: url("images/draft.jpg");
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
CS380
37
38
 All CSS Simple Selectors
39

Selector Example Example description

#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
,..
Selector Example Example description

.class .intro Selects all elements with class="intro"

.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set
within its class attribute

.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant
of an element with name1

#id #firstname Selects the element with id="firstname"

[attribute$= a[href$=".pdf"] Selects every <a> element whose href attribute value
value] ends with ".pdf"

40
 Id and Class Selectors
41

 In addition to setting a style for a HTML element,

CSS allows you to specify your own selectors
called "id" and "class".
(a) Id Selector: You can define the style rules based
on the Id attribute of the HTML elements. All the
elements having that Id will be formatted according
to the defined rule.
The id selector uses the Id attribute of the HTML
element, and is defined with a "#" symbol.
  <HTML>
 <HEAD>
 <STYLE>
 #P1
 {
 TEXT-ALIGN: CENTER;
 COLOR: RED;
 </STYLE>
 </HEAD>
 <BODY>
 <P>ID="P1">GOOD MORNING</P>
 <P>THIS PARAGRAPH IS NOT AFFECTED BY THE STYLE.
 </P>H2 ID="P1">HAVE A NICE DAY</H2>
 <H2> THIS HEADING IS NOT AFFECTED BY THE STYLE </H2>
 </BODY>
 </HTML>

42
43 CS380
 Class Selector
44

 You can also define style rules based on the class

attribute of the <HTML> elements. All the
elements having that class will be formatted
according to the defined rule. This allows you to
set a particular style for many HTML elements
with the same class. The class selector uses the
HTML class attribute, and is defined with a ”.”

CS380
 <HTML>
<HEAD>
<STYLE>
.CLS
{
TEXT-ALIGN: CENTER;
}
</STYLE>
</HEAD>
<BODY>
<H2 CLASS="CLS">
CENTER-ALIGNED HEADING
</H2>
<P CLASS="CLS">CENTER-ALIGNED PARAGRAPH.
</P>
</BODY>
</HTML>
45
46 CS380