CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that

CASCADING STYLE SHEETS

CSS

2

What CSS means?

CSS is an extension to basic HTML that allows you to style your web pages.

It separates the part that defines structure from the part that defines form of a web page.

HTML code remains clean and simple, as originally intended and the CSS code controls appearance.

3

Limits of HTML-tags

Formatting with HTML-tags is limited, for example: We cannot create text exactly 80 pixels tall We cannot specify margins easily We cannot control the space between lines of

words We cannot precisely position images on the

screen The style sheets make those things

possible and more.

4

With the Style sheets

You can make smaller and faster pages. You can maintain or update many pages

faster and easier (many pages can have common style sheet).

You can control layout like never before!

5

Adding Styles

There are 4 methods you can use to add styles to your page:

1. Embed a style sheet within the HTML document.

2. Link to an external style sheet from the HTML document.

3. Import an external style sheet into the HTML document.

4. Add styles inline in the HTML document.

6

Link to an external style sheet from the HTML document

You can point multiple HTML documents to one certain style sheets document.

This external file will set the rules for all of your Web pages.

If you change a detail (such as the font face) in the style sheets file, all of your pages will instantly reflect that change.

If you have to maintain a large site, this feature helps you a lot!!

7

External style sheet

Here’s the plain HTML-code:

<HTML><HEAD>

<TITLE>My First Style sheet</TITLE>

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

</HEAD>

<BODY>

<H1>Style sheets for better Web Design</H1>

Amazing, isn’t it??

</BODY></HTML>

Let’s add some style sheets. Create a separate text file called mystyles.css which only contains the following code:

H1 { color: green; font-size: 37px; font-family: impact }

P { text-indent: 1cm; background: yellow; font-family: courier }

8

Text formatting

font-family defines which font will display font-size defines text size using points, pixels etc. font-style can be italic or normal font-weight defines how bold text is font-variant displays normal text in small caps text-transform can be upper- or lowercase or

capitalize text-decoration can be underline, overline,

line-through, blink or none

9

Examples

H2 { font-family: impact, “comic sans ms”, sans-serif }

This means, that browser uses impact-font if it’s installed on this computer, if not, it uses the next font named etc.

BODY { font-family: arial, tahoma }

H2 { color: red; margin: 10px; font-family: verdana, arial }

P { font-size: 14 pt } P { font-size: 20px }

P { font-size: large } (or other keywords: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger)

------------

P { font-size: 15pt }

B { font-size: 300% } (bold text would be 3 times larger)

10

Examples

H3 { font-style: italic }P { font-weight: bold }P { font-weight: 500 } (normal non-bold text has a value of

400. The most bold version is 900)H2 { font-variant: small-caps }B { text-transform: uppercase } (or lowercase, capitalize or

none)B { text-decoration: underline } (or overline, line-through, blink

or none)With the none-value you can remove the line under text links:A:link { text-decoration: none }A:active { text-decoration: none }A:visited { text-decoration: none }

11

Typography and Layout

word-spacing defines the space between words letter-spacing controls the space between individual

characters line-height controls the vertical space between lines of text text-align helps to align paragraphs left, right, center or

justify vertical-align aligns top, bottom etc. text-indent indents paragraphs margin defines margins around text, images etc. padding defines the space between the element and its

border border defines the width, color and style of borders float and clear controls how elements wrap around one

another

12

Examples

You can add additional space between words by using length units like: in (inches), cm, mm, pt (points), pc (picas), em (ems), ex (x-height) or px (pixels).

H3 { word-spacing: 15px } (the value will be added to whatever default value the browser already uses)

H3 { letter-spacing: 10px } You can specify line-height with a number, length unit

or percentage:B { line-height: 10pt }B { font-size: 12pt; line-height: 2 }B { font-size: 12pt; line-height: 140% }H4 { text-align: center }

13

Examples

Possible values for vertical-align:Top, bottom, text-top, text-bottom, baseline, middle, sub and

superH4 { vertical-align: top }P { text-indent: 2cm }H2 { margin-top: 20px; margin-bottom: 5px; margin-left: 80px;

margin-right: 55px }H3 { padding-top: 20px; padding-bottom: 5px; padding-left:

100px; padding-right: 55 px }H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-

width: 1px; border-right-width: 1px }IMG { border-width: 2px }P { border-color: red; border-width: 3px }P { border-style: double; border-width: 3px } (border-style can be:

solid, double, dotted, dashed, groove, ridge, inset, outset)

14

Examples

Float enables you to flow text around an element

H3 { float: left } If you want to wrap one paragraph around a

floating element, but make sure the next paragraph doesn’t wrap, use Clear.

P { clear: left }

15

Colors and Backgrounds

color sets the foreground color of elements background-color background-image background-repeat defines if and how the

background image tiles background-attachment determines whether a

background image scrolls with the page or is fixed background-position enables you to position a

background image relative to the element it’s applied to

background allows you to specify all the background-related properties in one rule.

16

Examples

B { color: #333399 }

B { color: yellow }

B { color: rgb(51,204,0) }

P { background-color: #FFFF66 }

BODY { background-image: url(/images/this.gif) }

P { background-image: url(http://www.ramk.fi/dpt/what.jpg) } If you don’t want your background image to tile, use:

BODY { background-repeat: no-repeat; background-image: url(/images/this.gif }

17

Examples

A background-image that doesn’t scroll, but remains fixed in the window regardless of where you scroll on the page:

BODY { background-attachment: fixed; background-image: url(mypics/back.gif) }

P { background-position: center bottom; background-image: url(mine.gif) } (you can use: top, bottom, left, right and center)

P { background-position: 70px 10 px; background-image: url(myback.gif) }

P { background: url(/images/my.jpg) #CCFFCC no-repeat top right }

18

Positioning and Layering

position defines an exact position of elements in a page

left sets a horizontal position top sets a vertical position width sets a width of an element height sets the height overflow controls how content is treated if it goes

over its boundaries visibility makes something disappear clip controls what parts of an element are visible z-index sets what should be on top when things

overlap

19

Examples

H3 { position: absolute; left: 100px; top: 44px }

H2 { position: relative; left: 40px; top: 10px }

H4 { visibility: hidden }

20

Inheritance

Style sheets’ rules are inherited from “parent” to “child”.

Example:B { color: blue }(means that all bold texts should be blue)All my web pages look very nice

always.(there’s no rule set for tag, but it is inside tags, it inherits the declarations. So the child displays in blue just like its parent.)

Result:All my web pages look very nice always.

21

Contextual Selectors

Let’s say we want bold text to be green, but only when it is inside -tags.

Contextual selectors are selectors that demand that a certain situation be true in order for their declarations to be carried out.P B { color: green }

<CENTER>Tarja Halonen, President</CENTER>She has been the president of Finland since year

2000.Result:

Tarja Halonen, President

She has been the president of Finland since year 2000.

22

Combining Selectors

You can combine elements within one selector like:

H1, H2, H3, H4, H5, H6 { color: #009900; font-family: Arial, Verdana }

23

Comments

You can comment codes in style sheets:

H1 { text-indent: 10px } /*indent all big headings */

IMG { margin-top: 100px } /*give all images a top margin */

24

Classes

Example: You want background to be green for the first paragraph, purple for the second paragraph and gray for the third.

You could create three different classes for P and they would look like this:

P.first { background-color: green }P.second {background-color: purple }P.third {background-color: gray } Your HTML code would look like this:This is the first paragraph...This is the second paragraph…This is the third paragraph…

Example + CSS

25

Exercise

Create an HTML document with: big main title (H1) an image a long text (don’t use formatting tags) unordered list link

Create a CSS with Background color settings Font settings Link should not be blue or underlined Paragraph should have its own background color List should be in red Image is floating

Example + CSS

Documents

CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that