Scribd
Carica
7 visualizzazioni

L2 CSS

css

Caricato da

rmmc.tasultana
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
7 visualizzazioni

L2 CSS

css

Caricato da

rmmc.tasultana
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 32

1 CSS for Styling

Machbah Uddin
Assistant Professor
Department of Computer Science and
Mathematics
Bangladesh Agricultural University,
Mymensingh
Email: [email protected]
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="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:
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 (http://www.w3schools.com/css/css_reference.asp#
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 (http://www.w3schools.com/css/css_reference.asp#
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="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
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/draft.jpg");
}
CSS

 background image/color fills the element's


content area
background-repeat
29

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

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


repeat
background-position
30

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

 Fixedwidth.css
 Fixedwidth.html

Potrebbero piacerti anche