CSS - FTSM - Universiti Kebangsaan Malaysia

advertisement

TP 2543 WEB PROGRAMMING

CASCADING STYLE SHEET (CSS)

2

Our objectives are…

Introducing Cascading Style Sheets

Working with Selectors

Using Inline Styles, Embedded Styles and

External Style Sheet

Understanding Cascading Order

Working with the Box Model

Using Pseudo-Classes and Pseudo-Elements

Positioning Objects with CSS

3

Introduction

CSS is a instruction tag which are used to format text, object and layout

Advantages of CSS

Time effective

Easy to edit

Loading time

4

Element in CSS

Comment

Start with /* and end with */

HTML Comment Delimiters

Are use to make sure the browser know the style element.

Start with the selector and then by the properties (attributes and values)

5

H1 {background-color:gray; color:green; }

H1 is a selector, followed by attribute and values.

In between of attribute and values are separate with colon (:). And each attributes and values are separate with semicolon (;).

6

Types of Selector

 simple selector

ID selector

 class selector

Grouped selector

 contextual selector

Simple Selector

7

Any HTML elements

For example…

<style type="text/css"> p {font-size:12pt; color:#6666ff}

</style>

8

ID Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

<style type="text/css">

#para1{ text-align:center; color:red }

</style>

</head>

<body>

<p id="para1“>DESIGN USING CSS</p>

<p>This paragraph is not affected by the style.</p>

</body></html>

Example

9

Class Selector

The selector can be owned by many classes.

Its allowed the element to have many style.

The class selector uses the HTML class attribute, and is defined with a "."

<style type=“text/css”>

H1.blue {color : blue}

H1.red {color : red; font_weight : bold}

</style>

</head>

<body>

<H1 class=blue> A blue Header</H1>

<H1 class=red> A Red Header</H1>

</body>

Example

10

Class Selector

The class also can be create without combine with HTML tag.

This style will help the designer to use the class at different elements.

<style type=“text/css”>

.bluetext {color:blue; font-weight:bold}

</style>

</head>

<body>

<p class=bluetext> paragraph with bold and blue text. </p>

<H2 class=bluetext> Header with bold and blue text </H2>

Example

11

Applying a style to a class

12

Applying a style to a class and element

13

Grouped Selector

The selector can be group if the properties and values are same. body {font-size: 12px; } body {font-family: arial, helvetica, sans-serif;} th {font-size: 12px; font-family: arial, helvetica, sans-serif;} td {font-size: 12px; font-family: arial, helvetica, sans-serif;} body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;} body, th, td{font:12px arial,helvetica,sans-serif;}

14

Contextual Selector

Two or more simple selector are combine to perform a style

So… all the selector can use the same style.

<style type=“text/css”>

P EM {font-weight:bold}

</style>

OR

H1 B, H2 B, H1 EM, H2 EM { color: red }

H1 B { color: red }

H2 B { color: red }

H1 EM { color: red }

H2 EM { color: red } equivalent to

Types of CSS

15

There are 3 types of CSS

Inline CSS – in the same HTML page as a properties of tag HTML. In <BODY>…</BODY>

Embedded CSS in the same page but are located in

<HEAD>…</HEAD>

External CSS in the new page (.css)

16

Inline CSS

Inline styles are easy to use and interpret because they are applied directly to the elements they affect.

Can be use in many types of elements.

Located in between of HTML tag in <BODY>…</BODY>

<p style=“font-size : 12pt; color :#0000ff”>Teks</p>

17

Example: Inline CSS

<html>

<head>

<title>Inline Styles</title>

</head>

<body>

<p>This text does not have any style applied to it.</p>

<p style = "font-size: 20pt"> This text has the

<em>font-size</em> style applied to it, making it 20pt.

</p>

<p style = "font-size: 20pt; color: #0000ff">

This text has the <em>font-size</em> and

<em>color</em> styles applied to it, making it

20pt. and blue.</p>

</body>

</html>

18

Using Embedded Styles

You can embed style definitions in a document head using the following form:

<style> style declarations

</style>

Where style declarations are the declarations of the different styles to be applied to the document

19

Embedded CSS

Suitable to the text with multiple format.

Create in <HEAD>…</HEAD>

<html>

<head>

<title>Style Sheets</title>

<style type = "text/css"> em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt }

.special { color: blue }

</style>

</head>

20

<style type = "text/css">

Embedded CSS

{ background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt }

.special { color: blue }

</style>

<body>< h1 class = "special“ > Deitel & Associates, Inc .</h1>

<p> Deitel & Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages,

Internet/World Wide Web technology and object technology education. Deitel

& Associates, Inc. is a member of the World Wide Web Consortium. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology .</p>

< h1>Clients</h1 >

<p class = "special"> The company's clients include many <em> Fortune

1000 companies </em> , government agencies, branches of the military and business organizations. Through its publishing partnership with Prentice Hall,

Deitel & Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses .</p>

</body></html>

Example

21

Using an External Style Sheet

Because an embedded style sheet only applies to the content of the start.html file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site

An external style sheet is a text file that contains style declarations

It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

Using an External Style Sheet

22

You can add style comments as you develop an external style sheet

Use the link element to link a Web page to an external style sheet

You can import the content of one style sheet into another

You can link a single style sheet to multiple documents in your Web site by using the link element or the @import element

You can also link a single document to several style sheets

23

External CSS

Advantages

Easy to edit

Time consuming

Type of this files is (.css)

To link to the .css file need to define in <HEAD>

24

Example of external CSS

<html >

<head>

<title>Linking External Style Sheets</title>

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

</head>

<body>

<h1>Shopping list for <em>Monday</em>:</h1>

<ul>

<li>Milk</li>

<li>Bread</li>

<li>Rice</li>

<li>Potatoes</li>

<li>Pizza <em>with mushrooms</em></li>

</ul>

<p> <a href = "http://www.food.com">Go to the Grocery store</a> </p>

</body>

</html>

25

/* styles.css */

/* An external stylesheet */ a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left: .5cm }

26

/* styles.css */

Example of external CSS

a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff }

<html > ul ul ul

{ margin-left: 2cm }

{ text-decoration: underline; margin-left: .5cm }

<head>

<title>Linking External Style Sheets</title>

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

</head>

<body>

<h1>Shopping list for <em>Monday</em>:</h1>

<ul>

<li>Milk</li>

<li>Bread</li>

<li>Rice</li>

<li>Potatoes</li>

<li>Pizza <em>with mushrooms</em></li>

</ul>

<p> <a href = "http://www.food.com">Go to the Grocery store</a> </p>

</body>

</html>

Example

27

Applying a single style sheet to multiple documents

28

Applying multiple sheets to a single document

29

Style Precedence

1.

2.

3.

External style sheet

Embedded styles

Inline styles

Less precedence

More precedence

30

Pseudo Class

A pseudo-class is a classification of an element based on its status, position, or current use in the document

Same as other class, but the different is it will represent just for one element. Involved of element A (anchor).

Selector : pseudo-class {property : value} selector.class : pseudo-class {property : value}

31

<style type=“text/css”>

A:link {color:red}

A:active {color:blue; font-size:125%}

A:visited {color:navy; font-size :85%}

</head>

<body>

<p><b>

<a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>

Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

<p><b>

Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body></html>

Example

Pseudo- Element

32

This are use to format a part of document without know the content.

Pseudo-elements are elements based on information about an element’s content, use or position

CSS pseudo-elements are used to add special effects to some selectors.

There are 2 types

First line

First letter

Selector : pseudo-element {property : value} selector.class : pseudo-element {property : value}

33

<html>

<head>

<style type="text/css">

P:first-line {font-weight:bold}

P:first-letter {font-size:300%; float:left; color:red}

</style>

</head>

<body>

<p>You can use the :first-letter pseudo-element to add a special effect to the first letter of a text and :first-line pseudo-element to add a special effect to the first line of a text.</p>

</body>

</html>

Example

Elemen DIV

34

Use to change style in one section

Suitable to be use in inline style

<DIV align=center>Text and or image</DIV>

<DIV style=“color:green”>Sentence or two of text

</DIV>

35

Can be combine with class selector in embedded style

<style type=“text/css”>

.boldblue {color:blue; font-weight:bold}

</style>

<BODY>

<DIV class=boldblue>Text</DIV>

36

Element SPAN

SPAN tag allowed to create style to certain words or to certain character.

<p>You can use the <SPAN class=bluebold>SPAN tag with the CLASS attribute </SPAN> to apply a

Style to a few words or even a few le<SPAN class=bluebold>tter</SPAN>s within a word.

You can use the SPAN tag with the CLASS attribute to apply a Style to a few words or even a few le tter s within a word.

37

Font Style

Property font

Description Values font-style, font-variant, font-weight

Sets all the font properties in one font-size/line-height, font-family declaration caption, icon, menu, message-box small-caption, status-bar, inherit font-family Specifies the font family for text family-name, generic-family, inherit font-size

Specifies the font size of text xx-small, x-small, small, medium large, x-large, xx-large, smaller larger, length, %, inherit font-style

Specifies the font style for text normal, italic, oblique,inherit font-variant

Specifies whether or not a text should be displayed in a smallcaps font normal, small-caps, inherit font-weight

Specifies the weight of a font normal, bold, bolder, lighter

100, 200, 300, 400, 500, …, 900 inherit

CSS

1

1

1

1

1

1

Text Formating Style

38

Property Description Values color direction line-height letter-spacing

Sets the color of a text

Sets the text direction

Sets the distance between lines

Increase or decrease the space between characters color ltr, rtl normal, number, length,% normal, length text-align text-decoration text-indent

Aligns the text in an element

Adds decoration to text left, right,,center, justify none, underline, overline line-through, blink

Indents the first line of text in an element length, % text-shadow none, color, length

1

1

1

1 text-transform unicode-bidi vertical-align white-space word-spacing

Controls the letters in an element

Sets the vertical alignment of an element none, capitalize, uppercase, lowercase 1 normal, embed, bidi-override baseline, sub,super,top,text-top, middle, bottom text-bottom length, %

Sets how white space inside an element is handled

Increase or decrease the space between words normal, pre , nowrap normal, length

2

1

1

1

CSS

1

2

1

Background Style

39

Property background backgroundattachment backgroundcolor backgroundimage backgroundposition backgroundrepeat

Description

Sets all the background properties in one declaration

Values background-color background-image background-repeat backgroundattachment background-position inherit

Sets whether a background image is fixed or scrolls with the rest of the page

Sets the background color of an element

Sets the background image for an element

Scroll, fixed, inherit color-rgb, color-hex, color-name transparent, inherit url(URL),,none, inherit

Sets the starting position of a background image top left, top center, top right,center left, center center, center right, bottom left, bottom center, bottom right, x%

y%, xpos ypos, inherit

Sets if/how a background image will be repeated

Repeat, repeat-x, repeat-y, norepeat, inherit

CSS

1

1

1

1

1

1

Background

40

<html> <head>

<title>Background Images</title>

<style type = "text/css"> body { background-image: url(ukm_logo.jpg); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 18pt;

Example color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; }

.dark { font-weight: bold; color:blue}

</style> </head>

<body>

<p> This example uses the background-image, background-position and background

-attachment styles to place the <span class = "dark"> Universiti Kebangsaan Malaysia

</span> logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window. </p>

</body> </html>

41

List Style

list-style

Property list-style-image list-style-position list-style-type

Description Values

Sets all the properties for a list in one declaration list-style-type, list-styleposition, list-style-image inherit

Specifies an image as the list-item marker

Specifies if the list-item markers should appear inside or outside the content flow

URL, none, inherit

Inside, outside, inherit

Specifies the type of list-item marker

None, disc, circle, square decimal ,decimal-leadingzero, armenian, georgian lower-alpha, upper-alpha lower-greek, lower-latin upper-latin, lower-roman upper-roman, inherit

CSS

1

1

1

1

42

Text Flow and Box Model

Value measurement

Px-pixels

Pt-point

In-inches

Cm-centimetres

43

Text Flow and Box Model

44

Text Flow and Box Model

<html><head>

<style type="text/css"> div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }

</style>

</head><body>

<img src="logo-ukm.jpg" width="250" height="5" /><br /><br />

<div class="ex">The line above is 250px wide.<br />

The total width of this element is also 250px.</div>

<p><b>Important:</b>

This example will not display correctly in IE!<br />

However, we will solve that problem in the next example.</p>

</body></html>

Example

Text Flow and Box Model

45

For more example :

 http://www.dev-archive.net/articles/layerexamples.html

46

Border Styles

47

Border Styles

<body>

<div style = "border-style: solid">Solid border</div></br>

<div style = "border-style: double">Double border</div></br>

<div style = "border-style: groove">Groove border</div></br>

<div style = "border-style: ridge">Ridge border</div></br>

<div style = "border-style: inset">Inset border</div></br>

<div style = "border-style: outset">Outset border</div></br>

</body>

Example

More Border Styles Example

48

Example

<head ><style type = "text/css"> body { background-color: #ccffcc } div { text-align: center; margin-bottom: 1em; padding: .5em }

.thick { border-width: thick }

.medium { border-width: medium }

.thin { border-width: thin }

.groove { border-style: groove }

.inset { border-style: inset }

.outset { border-style: outset }

.red { border-color: red }

.blue { border-color: blue }

</style>

</head>

<body>

<div class = "thick groove">This text has a border</div>

<div class = "medium groove">This text has a border</div>

<div class = "thin groove">This text has a border</div>

<p class = "thin red inset">A thin red line...</p>

<p class = "medium blue outset"> And a thicker blue line</p>

49

Positioning Objects with CSS

The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or

CSS-P

To place an element at a specific position on a page use: position: type; top: value; right:

value; bottom: value; left: value;

50

Stacking Elements

Specify stacking order with:

z-index: value z-index: 1 z-index: 3 z-index: 2

51

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties.

However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Type of positioning

1.

Static Positioning

2.

3.

4.

Fixed Positioning

Relative Positioning

Absolute Positioning

52

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

53

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled: Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head>

<style type="text/css"> p.pos_fixed { position:fixed; top:30px; right:5px; }

</style></head>

<body>

<p class="pos_fixed"> <img src="logo-ukm.jpg" /></p>

<p><b>Note:</b> Internet Explorer 7 (and higher) supports the fixed value if a

!DOCTYPE is specified.</p>

<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

</body></html>

Relative Positioning

54

Places the object in the specified area, using “where it would have been normally” positioning.

The object is placed on the page where is would normally go, then it gets moved to the specified position area.

55

Relative Positioning

<head ><style type = "text/css"> p { font-size: 1.3em; font-family: verdana, arial, sans-serif } span { color: red; font-size: .6em; height: 1em }

.super { position: relative; top: -1ex }

.sub { position: relative; bottom: -1ex }

.shiftleft { position: relative; left: -1ex }

.shiftright { position: relative; right: -1ex }

</style>

</head> <body>

<p>The text at the end of this sentence

<span class = "super">is in superscript</span>.</p>

<p>The text at the end of this sentence

<span class = "sub">is in subscript</span>.</p>

<p>The text at the end of this sentence

<span class = "shiftleft">is shifted left</span>.</p>

<p>The text at the end of this sentence

<span class = "shiftright">is shifted right</span>.</p>

</body>

Example

56

Absolute Positioning

Are use to locate an object in absolute positioning.

<H3 style = “position:absolute; left:200px; top:100px”>

Some text here.

</H3>

It makes H3 is located at 200px from left and

100px from top.

57

Absolute Positioning

<html><head>

<style type="text/css">

.trlogo { position:absolute; left:0px; top:0px; z-index:1; width: 200; height: 100; }

.header {position: absolute; left:0;top:5; z-index:100; font-size: 20pt; font-face:Arial;font-weight:bold;color: blue; }

.link {position: absolute; left:175;top:90; z-index:0; font-size: 10pt; font-face:Arial;font-weight:bold; }

</style>

</head><body>

<p class="header">Thanks for reading.</p>

<img class="trlogo" src="logo-ukm.jpg">

<a href="http://www.ukm.my" class="link">

Web Development Newsletter Archive</a>

</body></html>

Example

58

Absolute, Relative, Fixed Positioning: How Do

They Differ?

59

CSS Float

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

CSS Float

60

<html><head>

<style type="text/css“>

.thumbnail { float:left; width:110px; height:90px; margin:5px; }

</style></head>

<body> <h3>Image Gallery</h3>

<p>Try resizing the window to see what happens when the images does not have enough room.</p>

<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

</body>

</html>

Example

CSS Float

61

More Example and Tutorial on Float CSS

 http://css.maxdesign.com.au/floatutorial/

62

CSS Image Opacity / Transparency

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x) .

Tip: The CSS3 syntax for transparency is opacity:x .

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

In IE (filter:alpha(opacity=x)) x can be a value from 0 -

100. A lower value makes the element more transparent.

Image Transparency - Mouseover Effect

63

W3c School Example

Media Type

64

The @media rule allows different style rules for different media in the same style sheet.

Media Type all aural braille embossed handheld print projection screen tty tv

Description

Used for all media type devices

Used for speech and sound synthesizers

Used for braille tactile feedback devices

Used for paged braille printers

Used for small or handheld devices

Used for printers

Used for projected presentations, like slides

Used for computer screens

Used for media using a fixed-pitch character grid, like teletypes and terminals

Used for television-type devices

Example

Conclusion …

65

Interactive Example

CSS Zen Garden: The Beauty of CSS Design

Three-column layout with drop-down menus formatted solely with CSS.

THE END

Download