css 1: introduction · • css-driven sites are more accessible. • a site built using centralized...

Fundamentals of Web Development Randy Connolly and Ricardo Hoar Fundamentals of Web Development Randy Connolly and Ricardo Hoar 1

Fundamentals of Web Development Randy Connolly and Ricardo Hoar

Textbook to be published by Pearson Ed in early 2014

http://www.funwebdev.com


©2015 Pearson

http://www.funwebdev.com

CSS 1: Introduction

Chapter 3

PRINCESS NOURAH BINT ADULRAHMAN UNIVERSITY

College of Computer and Information sciences

1


Objectives

What is CSS? CSS Syntax

Location of Styles Selectors

The Box Model

1 2

3 4

5 6 CSS Text Styling

7 2


WHAT IS CSS? Section 1 of 6

3


What is CSS?

CSS is a W3C standard for describing the presentation (or

appearance) of HTML elements.

CSS is a language in that it has its own syntax rules.

CSS can be added directly to any HTML element, within the

<head> element, or, in a separate text file that contains only CSS.

With CSS, we can assign:

font properties, colors, sizes, borders, background images,

position of elements……

You be styling soon

4


Benefits of CSS

• Degree of formatting control is better than that provided in HTML.

• Web sites are more maintainable because all formatting can be

centralized into one CSS file.

• CSS-driven sites are more accessible.

• A site built using centralized set of CSS files will be quicker to

download because each individual HTML file will contain less markup.

• CSS can be used to adopt a page for different output mediums.

Why using CSS is a better way of describing presentation than HTML

5


CSS Syntax Section 2 of 6

6


CSS Syntax

A CSS document consists of one or more style rules.

A rule: a selector that identifies the HTML element(s) that will be affected,

followed by a series of declaration(s): property and value pairs.

Rules, properties, values, declarations

selector { property: value; property2: value2; }

declaration block

declaration

em { color: red; }

p { margin: 5px 0 10px 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }

property value

selector

rulesyntax

examples

7


Declaration Blocks

Declaration block: series of declaration. They can be

together on a single line, or spread across multiple lines .

• The browser ignores white space • Each declaration is terminated with a semicolon.

8


Selectors

Every CSS rule begins with a selector: identifies which element(s)

in the HTML document will be affected by the declarations in the

rule.

Which elements

9


Properties

Each individual CSS declaration must contain a property.

Property names are predefined by the CSS standard.

Which style properties of the selected elements

10


Values

value for a property:

•The unit of any given value is dependent upon the property.

•Some property values are from a predefined list of keywords.

•Others are values such as length measurements, percentages,

numbers without units, color values, and URLs.

What style value for the properties

11


Units of Measurement

Some of the values are relative units, in that they are based on

the value of something else, such as the size of a parent element.

Others are absolute units, in that they have a real-world size.

There are multiple ways of specifying a unit of measurement in CSS

12


Comments in CSS

It is often helpful to add comments to your style sheets.

Comments take the form:

/* comment goes here */

13


location of styles Section 3 of 6

14


Actually there are three …

Author-created style sheets: what we are learning in this lecture.

User style sheets allow the individual user to tell the browser to

display pages using that individual’s own custom style sheet.

The browser style sheet defines the default styles the browser uses

for each HTML element.

Different types of style sheet

15


Style Locations

CSS style rules can be located in three different locations.

•Inline

•Embedded

•External

You can combine all 3!

Author Created CSS style rules can be located in three different locations

16


Inline Styles Style rules placed within an HTML element via the style attribute

17


Embedded Style Sheet

Style rules placed within the <style> element inside the <head> element

18


External Style Sheet

•The browser is able to cache the external style sheet which can improve

the performance of the site

Style rules placed within a external text file with the .css extension

19


SELECTORS Section 4 of 6

20


Selectors

When defining CSS rules, we need to first use a selector to tell the

browser which elements will be affected. CSS selectors allow you to

select

•individual elements,

•multiple HTML elements,

•elements that belong together in some way, or

•elements that are positioned in specific ways in the document

hierarchy.

There are a number of different selector types.

Things that make your life easier

21


Grouped Selectors

You can select a group of elements by separating the different

element names with commas. This is a sensible way to reduce the

size and complexity of your CSS files, by combining multiple

identical rules into a single rule.

Selecting multiple things

22


Reset Grouped selectors are often used as a way to quickly reset or remove browser defaults.

The goal of doing so is to reduce browser inconsistencies with things such as margins, line heights, and font sizes.

These reset styles can be placed in their own css file (perhaps called reset.css) and linked to the page before any other external styles sheets.

23


Class Selectors Things that make your life easier

24

With the class selector you can define different styles for the same type of HTML element.

p.p1 {font-family: Arial }

p.p2 {font-family: Times}

You have to use the class attribute in your HTML document:

<p class=“p1”> This paragraph will be in Arial. </p>

<p class=“p2”> This paragraph will be in Times. </p>

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

For example – 22p1 is not a valid class name in Firefox.


Id Selectors Target a specific element by its id attribute

25

The id selector is different from the class selector.

• class selector may apply to SEVERAL elements on a page.

• id selector always applies to only ONE element.

An ID attribute must be unique within the document.

The style rule below will match a <p> element that has the id value "para1":

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

p#para2 { color: blue}

The rule above will match this p element:

<p id=“para1”> This is paragraph 1 </p>

<p id=“para2”> This is paragraph 2 </p>


Id versus Class Selectors

Id selectors should only be used when referencing a single HTML

element since an id attribute can only be assigned to a single HTML

element.

Class selectors should be used when (potentially) referencing

several related elements.

How to decide

26


Attribute Selectors

The [attribute] selector is used to select elements with a specified

attribute.

An attribute selector provides a way to select HTML elements by

either the presence of an element attribute or by the value of an

attribute.

Selecting via presence of element attribute or by the value of an attribute

27


Attribute Selectors <head lang="en">

<meta charset="utf-8">

<title>Share Your Travels</title>

<style>

[title] { cursor: help; padding-bottom: 3px; border-bottom: 2px dotted blue; text-decoration: none; } </style>

</head>

<body>

<div>

<img src="images/flags/CA.png" title="Canada Flag" />

<h2><a href="countries.php?id=CA" title="see posts from Canada">Canada</a></h2>

<p>Canada is a North American country consisting of … </p>

<div>

<img src="images/square/6114907897.jpg" title="At top of Sulpher Mountain">

<img src="images/square/6592317633.jpg" title="Grace Presbyterian Church">

<img src="images/square/6592914823.jpg" title="Calgary Downtown">

</div>

</div>

</body>

28


Attribute Selectors

[title] { cursor: help; padding-bottom: 3px; border-bottom: 2px dotted blue; text-decoration: none;}

29


Pseudo Selectors

A pseudo-element selector is a way to select something that does

not exist explicitly as an element in the HTML document tree but

which is still a recognizable selectable object.

Select something that does not exist explicitly as an element

30


Pseudo Selectors

31

<head>

<title>Share Your Travels</title>

<style>

a:link { text-decoration: underline; color: blue; }

a:visited { text-decoration: underline; color: purple; }

a:hover { text-decoration: none; font-weight: bold; }

a:active { background-color: yellow; }

</style>

</head>

<body>

<p>Links are an important part of any web page. To learn more about

links visit the <a href="#">W3C</a> website.</p>

<nav>

<ul>

<li><a href="#">Canada</a></li>

<li><a href="#">Germany</a></li>

<li><a href="#">United States</a></li>

</ul>

</nav>

</body>


Contextual Selectors

A contextual selector (in CSS3 also called combinators) allows

you to select elements based on their ancestors, descendants, or

siblings.

That is, it selects elements based on their context or their relation

to other elements in the document tree.

Select elements based on their ancestors, descendants, or siblings

32


Contextual Selectors Selector Matches Example

Descendant

A specified element that is

contained somewhere within

another specified element

div p

Selects a <p> element that is contained somewhere

within a <div> element. The <p> can be any

descendant, not just a child.

Child

A specified element that is a

direct child of the specified

element

div>h2

Selects an <h2> element that is a child of a <div>

element.

Adjacent

Sibling

A specified element that is the

next sibling (i.e., comes directly

after) of the specified element.

h3+p

Selects the first <p> after any <h3>.

General

Sibling

A specified element that shares

the same parent as the

specified element.

h3~p

Selects all the <p> elements that share the same

parent as the <h3>.

33


Contextual Selectors in Action <body>

<nav>

<ul>

<li><a href="#">Canada</a></li>

<li><a href="#">Germany</a></li>

<li><a href="#">United States</a></li>

</ul>

</nav>

<div id="main">

Comments as of <time>November 15, 2012</time>

<div>

<p>By Ricardo on <time>September 15, 2012</time></p>

<p>Easy on the HDR buddy.</p>

</div>

<hr/>

<div>

<p>By Susan on <time>October 1, 2012</time></p>

<p>I love Central Park.</p>

</div>

<hr/>

</div>

<footer>

<ul>

<li><a href="#">Home</a> | </li>

<li><a href="#">Browse</a> | </li>

</ul>

</footer>

</body>

#main time { color: red; }ul a:link { color: blue; }

#main div p:first-child { color: green; }

#main>time { color: purple; }

34


The BOX MODEL Section 5 of 6

35


The Box Model

In CSS, all HTML elements exist within an element box.

Time to think inside the box

36

Every element is composed of:

content

a border around the

element

padding between the

content and the border

a margin between the

border and other content


Background

The background color or image of an element fills an element out

to its border (if it has one that is).

In contemporary web design, it has become extremely common to

use CSS to display purely presentational images (such as

background gradients and patterns, decorative images, etc) rather

than using the <img> element.

Box Model Property #1

37


Borders

Borders provide a way to visually separate elements.

You can put borders around all four sides of an element, or just

one, two, or three of the sides .

Box Model Property #2

38


Shortcut notation

With border, margin, and padding properties, there are long-form and

shortcut methods to set the 4 sides

TRBL

39

border-top-color: red; /* sets just the top side */ border-right-color: green; /* sets just the right side */ border-bottom-color: yellow; /* sets just the bottom side */ border-left-color: blue; /* sets just the left side */

border-color: red; /* sets all four sides to red */

border-color: red green orange blue; /* sets all four sides differently */

When using this multiple values shortcut, they are applied in clockwise order starting at the top. Thus the order is: top right bottom left.

border-color: red green orange blue;

border-color: top right bottom left; top

right

bottom

left

TRBL (Trouble)


Margins and Padding Box Model Properties #3 and #4

p { border: solid 1pt red; margin: 0; padding: 0;}

p { border: solid 1pt red; margin: 30px; padding: 0;}

p { border: solid 1pt red; margin: 30px; padding: 30px;}

40


Collapsing Margins

41

90px

90px

90px

50px

50px

50px

50px

div { border: dotted 1pt green; padding: 0; margin: 90px 20px;}

p { border: solid 1pt red; padding: 0; margin: 50px 20px;}

<div> <p>Every CSS rule ...</p> <p>Every CSS rule ...</p></div><div> <p>In CSS, the adjoining ... </p> <p>In CSS, the adjoining ... </p></div>

1

2

3

4

550px

50px

If overlapping margins did not collapse, then margin space for would be 180p (90pixels for the bottom margin of the first <div> + 90 pixels for the top margin of the second <div>), while the margins and would be 100px. However, as you can see this is not the case.


Collapsing Margins

When the vertical margins of two elements touch,

•the largest margin value of the elements will be displayed

•the smaller margin value will be collapsed to zero.

Horizontal margins, on the other hand, never collapse.

To complicate matters even further, there are a large number of

special cases in which adjoining vertical margins do not collapse.

How it works

42


Width and Height

The width and height properties specify the size of the element’s

content area.

Only block-level elements and non-text inline elements such as images have a width and height that you can specify.

By default the width of and height of elements is the actual size of the content.

For text, this is determined by the font size and font face;

For images, the width and height of the actual image in pixels determines the element box’s dimensions.

Box Model Properties #5 and #6

43


Width and Height

Since the width and the height refer to the size of the content area, by

default, the total size of an element is equal to not only its content area,

but also to the sum of its padding, borders, and margins.

Potential Problem # 1

44


Every CSS rule begins with a selector. The selector identifies

which element or elements in the HTML document will be

affected by the declarations in the rule. Another way of

thinking of selectors is that they are a pattern which is used

by the browser to select the HTML elements that will receive

200px

100px

div { box-sizing: content-box; width: 200px; height: 100px; padding: 5px; margin: 10px; border: solid 2pt black;}

10px 5 5 10px2 2

True element width = 10 + 2 + 5 + 200 + 5 + 2 + 10 = 234 pxTrue element height = 10 + 2 + 5 + 100 + 5 + 2 + 10 = 134 px

div { ... box-sizing: border-box;}

True element width = 10 + 200 + 10 = 220 pxTrue element height = 10 + 100 + 10 = 120 px






100px

200px 10px10px

Default


Width and Height

46

p { background-color: silver; width: 200px; height: 100px;}

p { background-color: silver;}

100px}


Overflow Property overflow: visible;

overflow: hidden;

overflow: scroll;

overflow: auto;

47


TEXT STYLING Section 6 of 6

48


Text Properties

CSS provides two types of properties that affect text.

•font properties that affect the font and its appearance.

•paragraph properties that affect the text in a similar way no matter

which font is being used.

Two basic types

49


Specifying the Font-Family

p { font-family: Cambria, Georgia, "Times New Roman", serif; }

Use this font as the first choice

But if it is not available, then use this one

If it isn’t available, then use this one

And if it is not available either, then use the default generic serif font

1

2

3

4

50


Generic Font-Family

The font-family property supports five different generic families.

The browser supports a typeface from each family.

51

This

This

This

This

This

serif

sans-serif

monospace

cursive

fantasy

ThTh

serif

Without ("sans") serif

ThisIn a monospace font, each letter has the same width

Decorative and cursive fonts vary from system to system; rarely used as a result.

Generic Font-Family Name

ThisIn a regular, proportionally-spaced font, each letter has a variable width


@font-face

Over the past few years, the most recent browser versions have

begun to support the @font-face selector in CSS.

This selector allows you to use a font on your site even if it is not

installed on the end user’s computer.

The future is now

52

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }


Positioning div#ad { position: fixed; right: 10%; top: 45%; }

53


The CSS float property

h1 { background-color:#cccccc; padding:5px; color: #000000;} p { font-family:Arial,sans-serif;} #yls {float:right; margin: 0 0 5px 5px; border: solid;}

Elements that seem to “float" on

the right or left side of either the

browser window or another

element are often configured using

the float property.

Two values only: right and left.


Alignment vs. float vs. position

if possible, layout an element by aligning its content.

• horizontal alignment: text-align

– set this on a block element; it aligns the content within it (not the block element itself)

• vertical alignment: vertical-align

» set this on an inline element, and it aligns it vertically within its containing element.

if alignment won't work, try floating the element

if floating won't work, try positioning the element

absolute/fixed positioning are a last resort and should not be overused

55


SELF READING

Part included in all exams

56


Properties

Property Type Property Property Type Property

Fonts

font

font-family

font-size

font-style

font-weight

@font-face

Color and

background

background

background-color

background-image

background-position

background-repeat

color

Text

letter-spacing

line-height

text-align

text-decoration

text-indent

Borders

border

border-color

border-width

border-style

border-top

border-top-color

border-top-width

etc

Common CSS properties

57

Sec

tio

n 2

of

6


Properties

Property Type Property Property Type Property

Spacing

padding

padding-bottom, padding-

left, padding-right,

padding-top

margin

margin-bottom, margin-

left, margin-right, margin-

top

Layout

bottom, left, right, top

clear

display

float

overflow

position

visibility

z-index

Sizing

height

max-height

max-width

min-height

min-width

width

Lists

list-style

list-style-image

list-style-type

Common CSS properties continued.

58

Sec

tio

n 2

of

6


Color Values

CSS supports a variety of different ways of describing color

Method Description Example

Name Use one of 17 standard color names. CSS3 has

140 standard names.

color: red;

color: hotpink; /* CSS3

only /*

RGB Uses three different numbers between 0 and

255 to describe the Red, Green, and Blue

values for the color.

color: rgb(255,0,0);

color: rgb(255,105,180);

Hexadec

imal

Uses a six-digit hexadecimal number to

describe the red, green, and blue value of the

color; each of the three RGB values is

between 0 and FF (which is 255 in decimal).

Notice that the hexadecimal number is

preceded by a hash or pound symbol )#.(

color: #FF 0000;

color: #FF69B 4;

59

Sec

tio

n 2

of

6


Color Values

CSS supports a variety of different ways of describing color

Method Description Example

RGBa Allows you to add an alpha, or transparency,

value. This allows a background color or image

to “show through” the color. Transparency is a

value between 0.0 (fully transparent) and 1.0

(fully opaque).

color: rgb( 255,0,0 ,0.5 );

HSL Allows you to specify a color using Hue

Saturation and Light values. This is available

only in CSS3. HSLA is also available as well.

color :

hsl(0,100%,100%);

color :

hsl(330,59 %,100 %);

60

Sec

tio

n 2

of

6


Units of Measurement

Unless you are defining a style sheet for printing, it is

recommended to avoid using absolute units.

Pixels are perhaps the one popular exception (though as we

shall see later there are also good reasons for avoiding the

pixel unit).

There are multiple ways of specifying a unit of measurement in CSS

61

Sec

tio

n 2

of

6


Relative Units Unit Description Type

px Pixel. In CSS2 this is a relative measure, while in

CSS3 it is absolute (1/96 of an inch).

Relative (CSS2)

Absolute (CSS3)

em Equal to the computed value of the font-size

property of the element on which it is used.

When used for font sizes, the em unit is in

relation to the font size of the parent.

Relative

% A measure that is always relative to another

value. The precise meaning of % varies

depending upon which property it is being used.

Relative

ex A rarely used relative measure that expresses size

in relation to the x-height of an element’s font.

Relative

62

Sec

tio

n 2

of

6


Relative Units Unit Description Type

ch Another rarely used relative measure; this one

expresses size in relation to the width of the zero

("0") character of an element’s font.

Relative

(CSS3 only)

rem Stands for root em, which is the font size of the

root element. Unlike em, which may be different

for each element, the rem is constant throughout

the document.

Relative

(CSS3 only)

vw, vh Stands for viewport width and viewport height.

Both are percentage values (between 0 and 100)

of the viewport (browser window). This allows an

item to change size when the viewport is resized.

Relative

(CSS3 only)

63

Sec

tio

n 2

of

6


Absolute Units

Unit Description Type

in Inches Absolute

cm Centimeters Absolute

mm Millimeters Absolute

pt Points (equal to 1/72 of an inch( Absolute

pc Pica (equal to 1/6 of an inch( Absolute

64

Sec

tio

n 2

of

6


Inline Styles

An inline style only affects the element it is defined within and will

override any other style definitions for the properties used in the

inline style.

Using inline styles is generally discouraged since they increase

bandwidth and decrease maintainability.

Inline styles can however be handy for quickly testing out a style

change.

Style rules placed within an HTML element via the style attribute

65

Sec

tio

n 3

of

6


Embedded Style Sheet

While better than inline styles, using embedded styles is also by and

large discouraged.

Since each HTML document has its own <style> element, it is

more difficult to consistently style multiple documents when using

embedded styles.

Style rules placed within the <style> element inside the <head> element

66

Sec

tio

n 3

of

6


External Style Sheet

This is by far the most common place to locate style rules because

it provides the best maintainability.

•When you make a change to an external style sheet, all HTML

documents that reference that style sheet will automatically use the

updated version.

•The browser is able to cache the external style sheet which can

improve the performance of the site

Style rules placed within a external text file with the .css extension

67

Sec

tio

n 3

of

6


Element Selectors

Uses the HTML element name.

You can select all elements by using the universal element

selector, which is the * (asterisk) character.

Selects all instances of a given HTML element

68

selector { property: value; property2: value2; }

declaration block

declaration

em { color: red; }

p { margin: 5px 0 10px 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }

property value

selector

rule

Sec

tio

n 4

of

6


Class Selectors

A class selector allows you to simultaneously target different

HTML elements regardless of their position in the document

tree.

If a series of HTML element have been labeled with the

same class attribute value, then you can target them for

styling by using a class selector, which takes the form: period

(.) followed by the class name.

Simultaneously target different HTML elements

69

Sec

tio

n 4

of

6


Class Selectors

70

<head><title>Share Your Travels </title>

<style>

.first {font-style: italic; color: brown; }

</style>

</head>

<body>

<h1 class="first">Reviews</h1>

<div> <p class="first">By Ricardo on <time>September 15, 2012</time></p>


</div>

<hr/>

<div>

<p class="first">By Susan on <time>October 1, 2012</time></p>


</div>

<hr/>

</body> .first { font-style: italic; color: brown;}

Sec

tio

n 4

of

6


Class Selectors Simultaneously target different HTML elements

71

Sec

tio

n 4

of

6

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class.

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

<h1 class="center"> center-aligned heading </h1>

<p class="center"> center-aligned paragraph </p>

All HTML elements with class="center" will be center-aligned:

.center {text-align: center}


Id Selectors

An id selector allows you to target a specific element by its id

attribute regardless of its type or position.

If an HTML element has been labeled with an id attribute, then

you can target it for styling by using an id selector, which takes

the form: pound/hash (#) followed by the id name.

Note: You should only be using an id once per page

Target a specific element by its id attribute

72

Sec

tio

n 4

of

6


Id Selectors <head lang="en">

<meta charset="utf-8">

<title>Share Your Travels -- New York - Central Park</title>

<style>

#latestComment {font-style: italic;color: brown;}

</style>

</head>

<body>

<h1>Reviews</h1>

<div id="latestComment">

<p>By Ricardo on <time>September 15, 2012</time></p>


</div>

<hr/> <div>

<p>By Susan on <time>October 1, 2012</time></p>


</div>

<hr/>

</body> #latestComment { font-style: italic; color: brown;}

73

Sec

tio

n 4

of

6


Attribute Selectors

This can be a very powerful technique, but because of uneven

support by some of the browsers, not all web authors have used

them.

Attribute selectors can be a very helpful technique in the styling of

hyperlinks and images.

Selecting via presence of element attribute or by the value of an attribute

74

Sec

tio

n 4

of

6


Pseudo Selectors

A pseudo-class selector does apply to an HTML element, but

targets either a particular state or, in CSS3, a variety of family

relationships.

The most common use of this type of selectors is for targeting link

states.

Select something that does not exist explicitly as an element

75

Sec

tio

n 4

of

6


Descendant Selector

While some of these contextual selectors are used relatively infrequently,

almost all web authors find themselves using descendant selectors.

A descendant selector matches all elements that are contained within

another element. The character used to indicate descendant selection is

the space character.

Selects all elements that are contained within another element

76

div p { … }

context selected element

Selects a <p> element somewhere within a <div> element

#main div p:first-child { … }

Selects the first <p> element somewhere within a <div> element that is somewhere within an element with an id="main"

Sec

tio

n 4

of

6


The Box Model











padding

margin

element content area

border

background-color/background-image of element

width

height

background-color/background-image of element’s parent

77

Sec

tio

n 5

of

6


Background Properties Property Description

background

A combined short-hand property that allows you to set the

background values in one property.

While you can omit properties with the short-hand, do

remember that any omitted properties will be set to their default

value.

background-

attachment

Specifies whether the background image scrolls with the

document (default) or remains fixed.

Possible values are: fixed, scroll.

background-color Sets the background color of the element.

background-

image

Specifies the background image (which is generally a jpeg, gif, or

png file) for the element.

Note that the URL is relative to the CSS file and not the HTML.

CSS3 introduced the ability to specify multiple background

images.

Sec

tio

n 5

of

6

78


Background Properties Property Description

background-

position

Specifies where on the element the background image will be

placed.

Some possible values include: bottom, center, left, and right.

You can also supply a pixel or percentage numeric position

value as well.

When supplying a numeric value, you must supply a

horizontal/vertical pair; this value indicates its distance from the

top left corner of the element.

background-repeat

Determines whether the background image will be repeated.

This is a common technique for creating a tiled background (it

is in fact the default behavior). Possible values are: repeat,

repeat-x, repeat-y, and no-repeat.

background-size New to CSS3, this property lets you modify the size of the

background image.

79

Sec

tio

n 5

of

6


Background Repeat

background-image: url(../images/backgrounds/body-background-tile.gif);background-repeat: repeat;

background-repeat: no-repeat; background-repeat: repeat-y; background-repeat: repeat-x;

80

Sec

tio

n 5

of

6


Background Position

body {background: white url(../images/backgrounds/body-background-tile.gif) no-repeat;background-position: 300px 50px;

}

300px

50px

81

Sec

tio

n 5

of

6


Borders Property Description

border

A combined short-hand property that allows you to set the

style, width, and color of a border in one property.

The order is important and must be:

border-style border-width border-color

border-style

Specifies the line type of the border.

Possible values are: solid, dotted, dashed, double, groove, ridge,

inset, and outset.

border-width The width of the border in a unit (but not percents). A variety

of keywords (thin, medium, etc) are also supported.

border-color The color of the border in a color unit.

border-radius The radius of a rounded corner.

border-image The URL of an image to use as a border.

82

Sec

tio

n 5

of

6


Margins

Did you notice that the space

between paragraphs one and two and

between two and three is the same as

the space before paragraph one and

after paragraph three?

This is due to the fact that adjoining

vertical margins collapse.

Why they will cause you trouble.

83

p { border: solid 1pt red; margin: 0; padding: 0;}

p { border: solid 1pt red; margin: 30px; padding: 0;}

p { border: solid 1pt red; margin: 30px; padding: 30px;}

Sec

tio

n 5

of

6


Developer Tools

Developer tools in current browsers make it significantly easier to

examine and troubleshot CSS than was the case a decade ago.

You can use the various browsers’ CSS inspection tools to examine, for

instance, the box values for a selected element.

Help is on the way

84

Sec

tio

n 5

of

6


Developer Tools

Chrome – Inspect Element Firefox – Inspect

Internet Explorer – Developer Tools

Opera – Inspect Element

85

Sec

tio

n 5

of

6


Font-Family

A word processor on a desktop machine can make use of any font that is

installed on the computer; browsers are no different.

However, just because a given font is available on the web developer’s

computer, it does not mean that that same font will be available for all

users who view the site.

For this reason, it is conventional to supply a so-called web font stack,

that is, a series of alternate fonts to use in case the original font choice in

not on the user’s computer.

A few issues here

86

Sec

tio

n 6

of

6


@font-face

Due to the on-going popularity of open source font sites such as

Google Web Fonts (http://www.google.com/webfonts) and Font

Squirrel (http://www.fontsquirrel.com/), @font-face seems to

have gained a critical mass of widespread usage.

The future is now

87

Sec

tio

n 6

of

6


The CSS float property

88

Sec

tio

n 6

of

6

css 1: introduction · • css-driven sites are more accessible. • a site built using centralized...

Documents