Scribd
Upload
15 views

T6 CSS

Here are the key points about the list-style-type property: - It controls the type of bullet/numbering for ordered and unordered lists. - Common values include: disc, circle, square for unordered lists and decimal, lower-alpha, upper-roman for ordered lists. - It allows customization of the bullet/numbering style without affecting other list properties like indentation. - It works together with the list-style shorthand property which also controls image bullets and positioning. So in summary, the list-style-type property specifically controls the type of bullet/numbering symbol/character used for lists.

Uploaded by

paulacorroriera
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

T6 CSS

Here are the key points about the list-style-type property: - It controls the type of bullet/numbering for ordered and unordered lists. - Common values include: disc, circle, square for unordered lists and decimal, lower-alpha, upper-roman for ordered lists. - It allows customization of the bullet/numbering style without affecting other list properties like indentation. - It works together with the list-style shorthand property which also controls image bullets and positioning. So in summary, the list-style-type property specifically controls the type of bullet/numbering symbol/character used for lists.

Uploaded by

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

+

CSS for Styling

1
The good, the bad and the… ugly!
2

<p>
<font face="Arial">Shashdot.</font>
News for <b>everybody!!</b> You will <i>never</i>,
<u>EVER</u> be
<font size="+4" color="red">BORED</font> here!
</p> HTML

Slashdot. News for everybody!! You will never, EVER be BORED


here!
output
Cascading Style Sheets (CSS)
3

n Describes the appearance, layout, and presentation of


information on a web page
n HTML describes the content of the page

n Describes how information is to be displayed, not what is


being displayed

n 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
n A CSS file consists of one or more rules

n Each rule starts with a selector

n A selector specifies an HTML element(s) and then applies style properties to them
n 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

nA page can link to multiple style sheet files


n 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

n CSS
code can be embedded within the head of an
HTML page
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

n Higher precedence than embedded or linked styles


n Usedfor one-time overrides and styling a particular
element
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 the
background-color
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
n color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, yellow

n RGB codes: red, green, and blue values from 0 (none) to 255 (full)

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

nA style can select multiple elements separated by


commas

n 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

n CSS (like HTML) is usually not commented as rigorously as programming


languages such as Java

n The // single-line comment style is NOT supported in CSS

n The <!-- ... --> HTML comment style is also NOT supported in CSS
CSS properties for fonts
12

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)


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

n 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

n We can specify multiple fonts from highest to lowest priority

n Generic font names:


n serif, sans-serif, cursive, FANTASY, monospace

n If the first font is not found on the user's computer, the next is tried

n Placing a generic font name at the end of your font-family value, ensures that every computer
will use a valid font
font-size
15

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output

n units: pixels (px) vs. point (pt) vs. m-size (em) 16px, 16pt, 1.16em

n vague font sizes: xx-small, x-small, small, medium, large, x-


large, xx-large, smaller, larger

n percentage font sizes, e.g.: 90%, 120%


font-size
16

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output

n pt specifies number of point, where a point is 1/72 of an inch onscreen

n px specifies a number of pixels on the screen

n em specifies number of m-widths, where 1 em is equal to the font's current size


font-weight, font-style
17

p {
font-weight: bold;
font-style: italic;
} CSS

This paragraph uses the style above.


output

n Either of the above can be set to normal to turn them


off (e.g. headings)
CSS properties for text
18

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

blockquote { text-align: justify; }


h2 { text-align: center; }
CSS

UIB’s Quote
La Universitat de les Illes Balears, hereva de la Universitat Lul·liana
de Mallorca, fou creada l’any 1978; la primera de l’era democràtica.
Des d’aleshores, aquesta institució pública d’ensenyament superior
ha recorregut el camí que l’ha conduïda a nivells cada vegada més
n text-align
alts de qualitatcan be left,
acadèmica right, center,
i de responsabilitat social. or
justify
output
text-decoration
20

p {
text-decoration: underline;
} CSS

This paragraph uses the style above.


output

n can also be overline, line-through, blink, or none

n effects can be combined:

text-decoration: overline underline;


The list-style-type property
21

ol { list-style-type: lower-roman; }
CSS
n 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
22

body {
font-size: 16px;
}
CSS

n Applies a style to the entire body of your page

n Saves
you from manually applying a style to each
element
Cascading Style Sheets
23

n Properties of an element cascade together in this order:


n browser's default styles
n external style sheet files (in a <link> tag)
n internal style sheets (inside a <style> tag in the page's header)
n 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

n when multiple styles apply to an element, they are inherited

n 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

n when two styles set conflicting values for the same


property, the latter style takes precedence
CSS properties for backgrounds
27

property description
background-color color to fill background
background-image image to place in background
background-position placement of bg image within 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
background-image
28

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

n background image/color fills the element's content


area
background-repeat
29

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

n 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

n 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.
n value can be negative to shift left/up by a given amount
Aside: Favorites icon ("favicon")
31

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


/> HTML

<link href="yahoo.gif" type="image/gif" rel="shortcut


icon" />
HTML

n Thelink tag, placed in the HTML page's head section,


can specify an icon
n this icon will be placed in the browser title bar and
bookmark/favorite
HTML id attribute
32

<p>Coding Horror! Coding Horror!</p>


<p id="mission">Our mission is to combine programming and
<q>human</q> factors with geekiness!</p>
HTML

Coding Horror! Coding Horror!

Our mission is to combine programming and “human” factors with geekiness!


output

nA unique ID for an element on a page

n Each ID must be unique; can only be used once in the


page
Linking to sections of a web page
33

<p>Visit <a href=


"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="#mission">View our Mission Statement</a></p>
HTML

Visit textpad.com to get the TextPad editor.

View our Mission Statement


output

n Link target can include an ID at the end, preceded by a #

n Browser will load that page and scroll to element with given
ID
CSS ID selectors
34

#mission {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
} CSS

Coding Horror! Coding Horror!

Our mission is to combine programming and “human” factors with geekiness!


output

n Applies style only to the paragraph that has the ID of


mission
HTML class attribute
35

<p class="shout">Coding Horror! Coding Horror!</p>


<p class="special">See our special deal on Droids!</p>

<p class="special">Today only!</p> HTML

Coding Horror! Coding Horror!

See our special deal on Droids!

Today only! output


n A way to group some elements and give a style to only that group

n Unlike an id, a class can be reused as much as you like

on the page
CSS class selectors
36

.special {
background-color: yellow;
font-weight: bold;
}
p.shout {
color: red;
font-family: cursive;
} CSS

Coding Horror! Coding Horror!


See our special deal on Droids!

Today only!
output
CSS class selectors
37

<p class="shout">Coding Horror! Coding Horror!</p>


<p class="special">See our special deal on Droids!</p>

<p class="special shout">Today only!</p> HTML

Coding Horror! Coding Horror!


See our special deal on Droids!

Today only!
output
CSS ID selectors
38

a:link { color: #FF0000; } /* unvisited link */


a:visited { color: #00FF00; } /* visited link */
a:hover { color: #FF00FF; } /* mouse over link */
CSS

Buy Early Buy Often!


output
+
Styling Page Sections
Why do we need page sections?
41

n Style individual elements, groups of elements, sections of text of


the page

n Create complex page layouts


Sections of a page <div>
42

<div class="shout">
<h2>Coding Horror! Coding Horror!</h2>
<p class="special">See our special deal on Droids!</p>
<p>We'll beat any advertised price!</p>
</div> HTML

Coding Horror! Coding Horror!


See our special deal on Droids!

We’ll beat any advertised price!


output

n Tag used to indicate a logical section or area of a page


n Has no appearance by default, but you can apply styles
to it
Inline Sections <span>
43

<h2>Coding Horror! Coding Horror!</h2>


<p>See our <span class="special“>spectacular</span> deal
on Droids!</p>
<p>We'll beat <span class="shout“> any advertised
price</span>!</p>
HTML

Coding Horror! Coding Horror!

See our spectacular deal on Droids!

We’ll beat any advertised price!


output

n has no onscreen appearance, but you can apply a style


or ID to it, which will be applied to the text inside the
span
CSS context selectors
44

selector1 selector2 {
properties
} CSS

n appliesthe given properties to selector2 only if it is


inside a selector1 on the page
selector1 > selector2 {
properties
} CSS

¨ applies the given properties to selector2 only if it is


directly inside a selector1 on the page
Context selector example
45

<p>Eat at <strong>Greasy's Burger</strong>...</p>


<ul>
<li>The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and greasy at the same time!</li>
</ul> HTML

li strong { text-decoration: underline; }


CSS

Eat at Greasy’s Burger…

• The greasiest burgers in town!


• Yummy and greasy at the same time!
output
More complex example
46

<div id="ad">
<p>Eat at <strong>Greasy's Burger</strong>...</p>
<ul>
<li class="important">The <strong>greasiest</strong>
burgers in town!</li>
<li>Yummy and <strong>greasy at the same time
</strong>!</li>
</ul>
</div> HTML
#ad li.important strong { text-decoration: underline; }
CSS
Eat at Greasy’s Burger…

• The greasiest burgers in town!


• Yummy and greasy at the same time!
output
The CSS Box Model
47

n Every element composed


of:
n content
n a border around the element
n padding between the content
and the border
n a margin between the border
and other content
The CSS Box Model (cont.)
48

n width = content width + L/R


padding + L/R border + L/R
margin

n height = content height + T/B


padding + T/B border + T/B
margin
CSS properties for borders
52

h2 { border: 5px solid red; }


CSS

This is a heading.
output

property description
thickness/style/size of border on
border
all 4 sides

¨ Thickness: px, pt, em, or thin, medium, thick


¨ Style: none, hidden, dotted, dashed, double,
groove, inset, outset, ridge, solid
¨ color
CSS properties for dimensions
61

p { width: 350px; background-color: yellow; }


h2 { width: 50%; background-color: aqua; }
CSS

This paragraph uses the first style above

An h2 heading
output

property description
how wide or tall to make this
width, height element
(block elements only)
max-width, max-height, max/min size of this element in
min-width, min-height given dimension
CSS properties for margins
63

property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties
http://www.w3schools.com/css/css_reference.asp#mar
gin
CSS properties for dimensions
66

p { width: 350px; background-color: yellow; }


h2 { width: 50%; background-color: aqua; }
CSS

This paragraph uses the first style above

An h2 heading
output

property description
how wide or tall to make this
width, height element
(block elements only)
max-width, max-height, max/min size of this element in
min-width, min-height given dimension

You might also like