Scribd
Upload
53 views

CSS Training

The document provides an introduction to using CSS (Cascading Style Sheets) to style HTML documents. It explains some key benefits of CSS over HTML tags for controlling formatting and presentation, such as separation of content and design. It also demonstrates the basic syntax of CSS rules and different methods of attaching CSS to HTML pages, including internal and external stylesheets. Key CSS properties for controlling fonts, text, and color are defined and examples are shown.

Uploaded by

Kalathees
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
53 views

CSS Training

The document provides an introduction to using CSS (Cascading Style Sheets) to style HTML documents. It explains some key benefits of CSS over HTML tags for controlling formatting and presentation, such as separation of content and design. It also demonstrates the basic syntax of CSS rules and different methods of attaching CSS to HTML pages, including internal and external stylesheets. Key CSS properties for controlling fonts, text, and color are defined and examples are shown.

Uploaded by

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

CSS for Styling

The good, the bad and the… ugly!


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
 Why is this bad?
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 separate .css file

CS380
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="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
Embedding style sheets: <style>
6

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

<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 (why?)
Our New HTML
8

<h1>Fancy Lads</h1>
<p>Welcome to The Fancy lad Site!</p>
<p>This web-page is the semi-official home of Fancy lads on the
World Wide Web.</p>
<p align="center">
<font face="Papyrus"><img border="0" src=“fancy-header.png”
width="207" height="279"></font>
</p>
<p align="center">
<font face="Papyrus“> Welcome to The Fancy lad Site!</font>
</p>
<p align="center">
<font face="Papyrus">This web-page is the semi-official home
of Fancylads on the World Wide Web.</font>
</p>

CSS
Associated Style Sheet
9

h1{
background:url(fancy-header.png) no-repeat;
width:207px;
height:279px;
text-indent:-9999px;
}
p {
text-align:center;
font-family:papyrus;
}

CSS
CSS properties for colors
10

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
11

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
12

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

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

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 (http://www.w3schools.com/css/css_reference.asp#font)

CS380
font-family
15

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
16

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
17

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
18

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
19

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
20

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
21

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
22

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
23

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.
CS380
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
Body styles
24

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
25

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

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
27

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
W3C CSS Validator
28

<p>
<a href="http://jigsaw.w3.org/css-
validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS

output

 jigsaw.w3.org/css-validator/
 checks your CSS to make sure it meets the official CSS
specifications
CS380
CSS properties for backgrounds
29

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-image
30

body {
background-image: url("images/draft.jpg");
}
CSS

 background image/color fills the element's content area

CS380
background-repeat
31

body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

 can be repeat (default), repeat-x, repeat-y, or no-repeat

CS380
background-position
32

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
Aside: Favorites icon ("favicon")
33

<link href="filename" type="MIME type" rel="shortcut icon"


/> HTML

<link href="yahoo.gif" 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
CS380

You might also like