HTML Chapter 3-Css

7/27/2019 HTML Chapter 3-Css

1/89

Chapter 3

Cascading Style Sheets (CSS)


2/89

Introduction to CSS

CSS stands for Cascading Style Sheet. A CSS allows you to separate web sites HTML content from

its style.

We use HTML file to arrange the content.

All of the presentation/formatting like fonts, colors,background, borders, text formatting, link effects, etc. areaccomplished within a CSS.

CSS is a web page layout method that has been added toHTML to give web developers more control over their design

and content layout. Using CSS allows a designer to create a standard set of

commands that controls the style of all subsequent pages.

These commands are embedded inside the web page or froman external file/page.


3/89

Introduction to CSS

With CSS you can add style (fonts, colors,spacing, and size) to web documents.

More advanced techniques control the layout ofthe page without the use of tables or othercumbersome HTML.

CSS separates the layout and the styles of a webpage.

Styles such as fonts, font sizes, margins, can bespecified in one place, and then the Web pagesfeed off this one master list, with the stylescascading throughout the page or an entire site.


4/89

Introduction to CSS

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

This is a heading

This is a paragraph.

The layout of the document was supposed to be taken care of by thebrowser, without using any formatting tags.

When tags like , and color attributes were added to the HTML 3.2specification, it started a nightmare for web developers.

Development of large web sites, where fonts and color information were

added to every single page, became a long and expensive process. To solve this problem, W3C created CSS.

In HTML 4.0, all formatting could be removed from the HTML document,and stored in a separate CSS file.

All browsers support CSS today.


5/89

Introduction to CSS

CSS is a breakthrough in web design because it allows

developers to control the style and layout of multiple

web pages all at once.

As a web developer you can define a style for each

HTML element and apply it to as many web pages as

you want.

To make a global change, simply change the style, and

all elements in the Web are updated automatically.

Benefits of CSS

The benefits of using style sheets are:

Better type and layout controls - Presentational HTML

never gets close to offering the kind of control over type,


6/89

Introduction to CSS

Less work - You can change the appearance of an entire site by

editing one style sheet.

Making small tweaks and even entire site redesigns with style

sheets is much easier than when presentation instructions are

mixed in with the markup. Potentially smaller documents and faster downloads - Old

school practices of using redundant font elements and nested

tables make for bloated documents.

Not only that, you can apply a single style sheet document to all the

pages in a site for further byte savings. More accessible sites - When all matters of presentation are

handled by CSS, you can mark up your content meaningfully,

making it more accessible for non-visual or mobile devices.

Reliable browser support - Nearly every browser in current use

supports all of CSS Level 1 and the majority of CSS Level 2.


7/89

CSS Revisions/Levels

There are three levels/versions of CSS:

CSS1,

CSS2, and

CSS3

CSS 1 The first CSS specification to become an official W3C

Recommendation is CSS level1

It was published in December 1996.

Among its capabilities are support for

Font properties such as typeface and emphasis Color of text, backgrounds, and other elements

Text attributes such as spacing between words, letters, and lines of text

Alignment of text, images, tables and other elements

Margin, border, padding, and positioning for most elements

Unique identification and generic classification of groups of attributes


8/89

CSS Revisions/Levels

CSS 2

CSS level 2 specification was developed by the W3C and

published as a Recommendation in May 1998.

It is a superset of CSS 1

CSS 2 includes a number of new capabilities like absolute,

relative, and fixed positioning of elements and z-index, the

concept of media types, support for aural style sheets and

bidirectional text, and new font properties such as shadows.

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS 2

It removes poorly-supported or not fully interoperable

features and adds already-implemented browser extensions

to the specification.


9/89

CSS Revisions/Levels..

CSS3

CSS Level 3 builds on CSS Level 2 module by module,

using the CSS2.1 specification as its core.

Each module adds functionality and/or replaces part ofthe CSS2.1 specification.

The CSS Working Group intends that the new CSS

modules will not contradict the CSS2.1 specification:

only that they will add functionality and refine definitions.


10/89

CSS Syntax

A CSS rule has two main parts: a selector, and

one or more declarations.

The selector is normally the HTML element you want

to style. Usually, it is the HTML tags to be styled. E.g.

,

Each declaration consists of: property and

a value.

The property is the style attribute you want to change.

Each property has a value.


11/89

CSS Syntax


12/89

CSS Syntax

CSS declarations alway ends with a semicolon.

Declaration groups are surrounded by curlybrackets

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

To make the CSS more readable, you can put onedeclaration on each line, like this:

p {color:red;

text-align:center;

}


13/89

CSS Comments

Comments are used to explain your code, andmay help you when you edit the source code at alater date.

CSS comments are ignored by browsers.

A CSS comment begins with /* and ends with */

/*This is a comment*/

p{

text-align:center;

/*This is another comment*/

font-family:arial;

}


14/89

Linking CSS to HTML

Linking CSS to HTML

It is possible to link CSS with your html pages in two different ways:

internal style, and

external style.

Internal CSS can be either

inline or

embedded.

I. Creating an Inline Style

You can apply styles to a single element using the styleattribute in

the element itself. Inline styles have the structure:

Example:

Introduction


15/89

Linking CSS to HTML

II. Creating Embedded Styles

We use the tag for this

tag has a property called type which should be set totext/css for CSS styling.

The format for this is shown in the example below:

Styling with CSS

/*CSS Content Goes Here*/p { color:red; text-align:center; }


16/89

Linking CSS to HTML

In internal method each HTML file contains the

CSS code needed to style the page.

This means any changes you want to make to

one page, will have to be made to all.

This method can be good if you need to style only one page, or

you want different pages to have varying styles.


17/89

Linking CSS to HTML

III. Creating an External Style Sheet

An external CSS file can be created with any text orHTML editors such as notepadorDreamweaver.

A CSS file contains no HTML, only CSS.

You have to save the CSS file with the .css fileextension.

You can link to the file externally by placing one of thefollowing links in the head section of every HTML file

you want to style with the CSS file.

@import

url(filename.css)


18/89

Inheritance

An element that is directly contained within another

element (with no intervening hierarchical levels), is said

to be the child of that element.

Conversely, the containing element is the parent.

For example, the em element is the child of the p

element, and the p element is its parent.

All of the elements higher than a particular element inthe hierarchy are its ancestors.

Two elements with the same parent are siblings.


19/89

Inheritance

When you write a font-related style rule using the p elementas a selector, the rule applies to all of the paragraphs in thedocument as well as the inline text elements they contain.

Some style sheet properties are inherited and others do not.

In general, properties related to the styling of text font size,

color, style, etc are passed down. Properties such as borders, margins, backgrounds, and so on

that affect the boxed area around the element tend not to bepassed down.

You can use inheritance to your advantage when writing stylesheets.

For example, if you want all text elements to be rendered inthe Verdana font face, you could write separate style rules forevery element in the document and set the font-face toVerdana.

A better way would be to write a style forbody element, and


20/89

Inheritance

Example: All texts in the following page is displayed as red because ofinheritance

CSS

body { color: red;}

Well Known Novels

Romeo and Juliet

Things Fall Apart

Kingdom of God is Among You


21/89

Conflicting styles: the

Cascade Ever wonder why they are called cascading style sheets?

CSS allows you to apply several style sheets to the same

document, which means there are bound to be conflicts.

For example, what should the browser do if a documents

imported style sheet says that h1 elements should be red, butits embedded style says h1s should be purple?

The style sheet specification has a hierarchical system that

assigns different weights to the various sources of styleinformation.

The cascade refers to what happens when several sources of

style information vie for control of the elements on a page

Style information is passed down until it is overridden by a

style command with more weight.


22/89


Cascade

Generally speaking, the closer the style sheet is to the

content, the more weight it is given.

Embedded style sheets have more weight than external

style sheets.

Inline styles have more weight than embedded style

sheets.

To prevent a specific rule from being overridden, you

can assign it importance with the !important indicator.

If you want a rule not to be overridden by a

subsequent conflicting rule, include the !important

indicator just after the property value and before the

semicolon for that rule.


23/89


Cascade

For example, to make paragraph text blue always, use

the following rule:

p {color: blue !important;}

Even if the browser encounters an inline style later in the

document, like this one:

that paragraph will still be blue, because the rule with

the !important indicator cannot be overridden by other

styles in the authors style sheet.


24/89

Grouped Selectors

If you ever need to apply the same style

property to a number of elements, you can

group the selectors into one rule.

This one rule has the same effect as the fiverules listed separately.

h1, h2, p, div, img { border: 1px solid blue; }

Grouping them makes future edits more efficient

and results in a smaller file size.


25/89

Rule order

If there are conflicts within style rules of identical

weight, whichever one comes last in the list wins.

Take these three rules, for example:

p { color: red; }

p { color: blue; }

p { color: green; }

In this scenario, paragraph text will be green

because the last rule in the style sheet overrides the

earlier ones.


26/89

Styling HTML with CSS

Styling Backgrounds

Styling Text

Styling Fonts

Styling Links

Styling Lists

Styling Tables

CSS Class and ID


27/89

1. Styling Backgrounds

You can style the background of an element in onedeclaration with the background property.

background: #ffffff url(path_to_image) top left no-repeat fixed;

Values: background color

image

position

repeat

attachment

Or you can set each property individually


28/89

Styling Backgrounds

Background Color You can specifically declare a color for the background of an

element.

background-color: value;

Values:

color name (e.g. red, green, blue, etc.) hexadecimal number(e.g. #ff0000, #00ff00, #0000ff, etc)

RGB color code (e.g. rgb(255,0,0), rgb(0, 255, 0), rgb(0,0,255), etc)

Transparent

Example:

h1 { background-color: rgb(255, 255, 0); }

p { background-color: #0000FF; }

Background Image You can set an image for the background of an element .


29/89

Styling Backgrounds

Background At tachment Are you using an image as a background?

You can set whether the background scrolls with the page oris fixed when the user scrolls down the page

This is done with the background-attachment property

background-attachment: value;

Values: fixed

Scroll

Background Repeat

You can set if an image set as a background of an element isto repeat (across=x and/or down=y) the screen.

background-repeat: repeat | repeat-x | repeat-y;


30/89

Styling Backgrounds

Example

body { background-image: url("tulips.jpg");

background-position: top right;

background-repeat: repeat;

}

Background Posit ion

You can position an image used for the background ofan element using the background-position property.

background-position: value;


31/89

Styling Backgrounds

Values: top left

top center

top right

center left

center center center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

Example

p { background-image: url("tulips.jpg");

background-position: top right;

}


32/89

2. Styling Text

Color

You can set the color of text with the following:

color: value;

Possible values are: color nameexample: red, black

hexadecimal number example: #ff0000, #000000

RGB color code example: rgb(255, 0, 0), rgb(0, 0, 0)

Example:

p {color: blue;}


33/89

2. Styling Text

Letter Spacing You can adjust the space between letters in the

following manner.

Setting the value to 0 prevents the text from

justifying. You can use negative values.

Negative values make the text overlap each other.

letter-spacing: value;

Possible values are normal

Length


34/89

2. Styling Text

Word Spacing

You can adjust the space between words in the following manner.You can use negative values.

word-spacing: value;

Possible values are

normal length

Line heigh t

You can set the distance between lines in the following way:

line-height: value; Possible values are

normal

number

length

Percentage(%)


35/89

2. Styling Text

Text A l ign

You can align text with the following:

text-align: value;

Possible values are

left right

center

Justify

Examples:

This text is aligned left.

This text is aligned center.

This text is aligned right.


36/89

2. Styling Text

Text Decoration

You can decorate text with the following:

text-decoration: value;

Possible values are

none underline

overline

Line-through

Blink

Examples:This text is underlined.

This text has a line through it.

This text is overlined.


37/89

2. Styling Text

Text Transfo rm You can control the case of letters in an (X)HTML

element with the following:

text-transform: value;

Possible values are none

capitalize

lowercase

Uppercase

e.g. h3 { text-transform: uppercase; }


38/89

2. Styling Text

Text Indent

You can indent the first line of text in an (X)HTML element with thefollowing:

text-indent: value;

Possible values are length

percentage(%)

Text Directio n

You can sets the text direction

direction: value;

Possible values are

ltr (left to right)

rtl (right to left)


39/89

2. Styling Text

unicode-b id i Possible value:

normal

embed

bidi-override

The meanings of the values are:

normal :the element does not open an additional level of embeddingwith respect to the bidirectional algorithm. For inline elements, implicitreordering works across element boundaries.

embed:if the element is inline, this value opens an additional level of

embedding with respect to the bidirectional algorithm. Inside theelement, reordering is done implicitly.

bidi-overr ide:for inline elements this creates an override. For blockcontainer elements, this creates an override for inline-level descendantsnot within another block container element. This means that inside theelement, reordering is strictly in sequence according to the directionproperty; the implicit part of the bidirectional algorithm is ignored.


40/89

2. Styling Text

For the direction property to affect reordering ininline elements, the unicode-bidi propertys valuemust be embed or override.

Example:div {

direction: rtl;

unicode-bidi: bidi-override;

}

Hebrew and Arabic are written from right to left.

This is displayed as:


41/89

2. Styling Text

White Space

You can control the whitespace in an (X)HTMLelement with the following:

white-space: value;

Possible values are

normal

pre

nowrap

pre-wrap

pre-line


42/89

2. Styling Text

This property declares how white space(tab, space, etc) andline break(carriage return, line feed, etc.) inside the elementis handled.

Values have the following meanings: normal :This value directs user agents to collapse sequences of

white space, and break lines as necessary to fill line boxes. pre:This value prevents user agents from collapsing sequences

of white space. Lines are only broken at preserved newlinecharacters.

nowrap:This value collapses white space as for normal, butsuppresses line breaks within text.

pre-wrap:This value prevents user agents from collapsingsequences of white space. Lines are broken at preservednewline characters, and as necessary to fill line boxes.

pre-line:This value directs user agents to collapse sequences ofwhite space. Lines are broken at preserved newline characters,and as necessary to fill line boxes.


43/89

3. Styling Fonts

Font

The font property can set the style, weight, variant, size,

line height and font-type:

font: [ [ font-style || font-variant || font-weight] || font-size [ /line-

height] || font-family ];

Example:

font: italic bold normal small/1.4em Verdana, sans-serif;

The above would set the text of an element to an italic

style a bold weight a normal variant a relative size a line

height of 1.4em and the font to Verdana or another

sans-serif typeface.


44/89

3. Styling Fonts

Font -Fam ily You can set what font will be displayed in an element

with the font-family property.

There are 2 choices for values:

family-name generic family

If you set a family name it is best to also add thegeneric family at the end as this is a prioritized list.

So if the user does not have the specified font name,it will use the same generic family.

font-family: Verdana, sans-serif;


45/89

3. Styling Fonts

Fon t Size You can set the size of the text used in an element by using the font-size

property.

font-size: value;

The value can be:

absolute size

relative size

length

percentage(%)

Absolute sizes are:

xx-small

x-small

small

medium

large

x-large

xx-large


46/89

3. Styling Fonts

The following table provides user agent guidelinesfor the absolute-size mapping to HTML headingand absolute font-sizes

Relative sizes are: larger

smaller

CSS absolute-size values

xx-small x-small small medium large x-large xx-large

HTML font sizes 1 2 3 4 5 6 7


47/89

3. Styling Fonts

A relative-size is interpreted relative to the table of

font sizes and the font size of the parent element.

For example, if the parent element has a font size of

medium, a value oflargerwill make the font size ofthe current element be large.

If the parent elements size is not close to a table

entry, the user agent is free to interpolate between

table entries or round off to the closest one.


48/89

3. Styling Fonts

Length Units in CSS There are two types of length units:

relative and

absolute.

Relative length units specify a length relative to another lengthproperty.

Style sheets that use relative units can more easily scale from oneoutput environment to another.

The absolute units consist of the physical units (in, cm, mm, pt, pc)

and the px unit: in: inches 1in is equal to 2.54cm.

cm: centimeters

mm: millimeters

pt: points the points used by CSS are equal to 1/72nd of 1in.

pc: picas 1pc is equal to 12pt.

px: pixel units 1px is equal to 0.75pt.


49/89

3. Styling Fonts

Example: all the following are possibleh1 { margin: 0.5in } /* inches */

h2 { line-height: 3cm } /* centimeters */

h3 { word-spacing: 4mm } /* millimeters */

h4 { font-size: 12pt } /* points */

h4 { font-size: 1pc } /* picas */

p { font-size: 12px } /* px */

Relative units are: em: the current font-size of the relevant font

ex: the x-height of the relevant font


50/89

3. Styling Fonts

Relative units are: em: the current font-size of the relevant font

ex: the x-height of the relevant font

The em unit is equal to value of the font-size property of theelement on which it is used.

The exception is when em occurs in the value of the font-sizeproperty itself, in which case it refers to the font size of the parentelement.

Example:

body{

font-size: 12px;

text-indent: 3em; /* i.e. 36px - based on font-size*/

}


51/89

3. Styling Fonts

The ex means the x-height.

Thex-heightis so called because it is often equal

to the height of the lowercase x.

However, an exis defined even for fonts that donot contain an x.


52/89

3. Styling Fonts

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height.

If reliable font metrics are not available, user agents maydetermine the x-height from the height of a lowercase glyph.

In the cases where it is impossible or impractical to determinethe x-height, a value of 0.5em should be used.

Example:

h1 { margin: 0.5em } /* em */

h1 { margin: 1ex } /* ex */

Example:

h1 { line-height: 1.2em }

This means the line height of h1 elements will be 20%greater than the font size of the h1 elements.


53/89

3. Styling Fonts

On the other hand:

h1 { font-size: 1.2em }

This means that the font-size of h1 elements will

be 20% greater than the font size inherited byh1 elements.

What is the font size of H1?body { font-size: 20pt;}

H1 {font-size: 1.2em;}

/* The font size of H1 is 24 */


54/89

3. Styling Fonts

Font Style You can set the style of text in a element with the font-style

property:

font-style: value;

Possible values are normal

itailc

Oblique

Font Variant

You can set the variant of text within an element with the font-variant property:

font-variant: value;

Possible values are

normal small-caps


55/89

3. Styling Fonts

Font Weight You can control the weight of text in an element with the font-weight property:

font-weight: value;

Absolute values are

normal

100 200

300

400

500

600

700

800

900

Bold

Relative Values are:

lighter

bolder


56/89

3. Styling Fonts

The font-weight property selects the weight of the

font.

The values 100 to 900 form an ordered sequence,

where each number indicates a weight that is atleast as dark as its predecessor.

The keyword normal is synonymous with 400, and

bold is synonymous with 700.

Keywords other than normal and bold have beenshown to be often confused with font names and a

numerical scale was therefore chosen for the 9-

value list.


57/89

3. Styling Fonts

inherited value Bolder Lighter

100 400 100

200 400 100

300 400 100

400 700 100

500 700 100

600 900 400

700 900 400

800 900 700

900 900 700

Example:

body { font-weight: 600;}

p { font-weight: bolder } /* this is based on 600 and it changes to


58/89

4. Styling Links

User agents commonly display unvisited links differently frompreviously visited ones.

CSS provides the pseudo-classes a:link and a:visited todistinguish them: The a:l inkpseudo-class applies for links that have not yet been

visited. The a:visitedpseudo-class applies once the link has been

visited by the user.

The a:hoverpseudo-class applies while the user designates anelement with some pointing device, but does not activate it. Forexample, a visual user agent could apply this pseudo-class when

the cursor (mouse pointer) hovers over a box generated by theelement.

The a:activepseudo-class applies while an element is beingactivated by the user. For example, between the times the userpresses the mouse button and releases it.

The a:focuspseudo-class applies while an element has the

focus (accepts keyboard events or other forms of text input).


59/89

4. Styling Links

Below are the various ways you can use CSS tostyle links.

a:link {

color: #009900;

text-decoration: overline;}

a:visited {color: #999999;}

a:hover {color: #333333;}

a:focus {color: #333333;}a:active {color: #009900;}


60/89

4. Styling Links

Remark: You must declare the a:linkand

a:visitedbefore you declare a:hover.

Furthermore, you must declare a:hoverbefore

you can declare a:active.

Using the above code will style all links on

your web page, unless you declare a separate

set of link styles for a certain area of yourwebpage.

Look at pseudo-classes sub-section for more.


61/89

5. Styling Lists

List Style You can control the appearance of ordered and

unordered lists in one declaration with the list-style property

list-style: value value value;

Values: image

position

type

Or you can control them individually


62/89

5. Styling Lists

List Sty le Image You can use an image for the bullet of unordered lists with the list-style

property

list-style-image: url(path to image file);

If you use an image, it is a good idea to declare the list-style-type also in

case the user has images turned off.

List Sty le Posit io n

You can control the position of ordered and unordered lists with the list-style-position property

list-style-position: value;

Values

inside

outside


63/89

5. Styling Lists

Lis t Style Type You can control the type of bullet ordered and unordered lists use with the list-style-

type property

list-style-type: value;

Values

none

disc

circle

square

decimal

decimal-leading-zero

lower-roman

upper-roman lower-alpha

upper-alpha

lower-greek

lower-latin

upper-latin

armenian

Georgian

S


64/89

6. Styling Tables

Table Bo rders To specify table borders in CSS, use the border

property.

The example below specifies a black border for table,

th, and td elements:table, th, td{border: 1px solid black;

}

Notice that the table in the example above has doubleborders.

This is because both the table, th, and td elementshave separate borders.

6 S li T bl


65/89

6. Styling Tables

Col lapse B orders

The border-collapse property sets whether the table

borders are collapsed into a single border or separated:

table{

border-collapse: collapse;

}

table, th, td{

border: 1px solid black;}

6 St li T bl


66/89

6. Styling Tables

Table Text Alignment The text in a table is aligned with the text-align and vertical-align

properties.

The text-align property sets the horizontal alignment, like left, right,or center:

td{text-align:right;

}

The vertical-align property sets the vertical alignment, like top,bottom, or middle:

td {

height:50px;

vertical-align:bottom;

}

6 St li T bl


67/89

6. Styling Tables

Table Width and Heigh t

Width and height of a table is defined by the width and

height properties.

The example below sets the width of the table to 100%,

and the height of the th elements to 50px:

table{

width:100%;

}

th{

height:50px;

}

6 St li T bl


68/89

6. Styling Tables

Table Padd ing To control the space between the border and content in a table, use the

padding property on td and th elements:

td{padding:15px;

}

Table Colo r

The color of the borders, and the text and background color of th elementscan be specified:

table, td, th{

border:1px solid green;}

th{

background-color:green;

color:white;

}

6 CSS C


69/89

6. CSS Class

Controlling the way all HTML elements look canbe useful, but also limiting.

It's excellent to be able to change every

paragraph, table cell or image with one line ofCSS code

But sometimes you'll want to change only few

paragraphs or images, not all of them.

You can add CSS code through the style attributeof each element, but for more elements that

method gets too complicated.

6 CSS Cl


70/89

6. CSS Class

For example, paragraph can be defined in CSSfile as follows:

p {

font-size: small;

color: #333333}

However, lets say you want to change the word"sentence"in the paragraph formatted by theabove CSS to green bold text, while leaving therest of the sentence untouched.

This can be done by using class.

6 CSS Cl


71/89

6. CSS Class

There are two types of classes: generic classes that can be applied to any element, and

classes that can be applied only to a certain type of HTMLelement.

I. Generic Classes Their selector starts with a dot (.), which states that it is a

class.

You can name it anything you like:

.important { background-color: #FFFFDE; }

.emphasis { font-family: Verdana; }

.boooring { color: Gray; }

To apply a class to a certain HTML element, use its classattribute where you state the class name without the dot.

6 CSS Cl


72/89

6. CSS Class

The big match today This sentence looks boring

II. Specific Classes

You can also use classes which can be applied only to certain

HTML elements. Selectors of these classes start with the HTML element

name, followed with the dot and the class name:

div.big { font-weight: bold; font-size: 16pt; }

These classes can be applied only to a specified HTMLelement, in this case a DIV element.

Big bold text.

Normal text - class notapplied.

6 CSS Cl


73/89

6. CSS Class

Example: in your paragraph, you put this:

sentence

Then in the CSS file, add this style selector:

.greenboldtext {

font-size: small;

color: #008080;

font-weight: bold;

}

P d Cl


74/89

Pseudo Classes

Pseudo-classes are classes that define tagstates.

Most commonly, these are used to make link

styles change when the mouse pointer hoversover a hyperlink, hyperlink is clicked, etc.

Pseudo class Link state

a:link Normal link

a:visited Already visited link

a:hover Mouse hovers the link

a:active User is clicking on the link

P d Cl


75/89

Pseudo Classes

Example:a:link {

text-decoration: underline;

font-weight: normal;

color: #003300;}

a:visited {

text-decoration: underline;

font-weight: normal;color: #999999;

}

CSS ID


76/89

CSS ID

IDs are similar to classes, except once a specific ID has been declared itcannot be used again within the same (X)HTML file.

The syntax of ID selectors is very similar to classes, but instead of a dotyou must use a hash sign (#).

The HTML content is:

I was asleep, but my heart was awake.

The CSS that formats the HTML content:

#container{

width: 80%;

padding: 20px;margin: auto;

border: 1px solid blue;

background: red;

}

7 CSS Bo Model


77/89

7. CSS Box Model

In CSS, the term box modelis used whentalking about design and layout.

The CSS box model is essentially a box that

wraps around HTML elements, and it consistsof: margins, borders, padding, and the actual

content.

The box model allows us to place a borderaround elements and space elements in relation

to other elements.

The image below illustrates the box model.

7 CSS Box Model


78/89

7. CSS Box Model

Explanation of the different parts:

Margin - Clears an area around the border.

The margin does not have a background color, and it is completelytransparent

Border - A border that lies around the padding and content.

The border is affected by the background color of the box

7 CSS Box Model


79/89

7. CSS Box Model

Padding - Clears an area around the content.

The padding is affected by the background color of the

box

Content - The content of the box, where text and imagesappear

In order to set the width and height of an element

correctly in all browsers, you need to know how the boxmodel works.

7 CSS Box Model


80/89

7. CSS Box Model

Border You can set the color, style and width of the

borders around an element in one declaration byusing the shorthand border property.

border: 1px solid #333333;

Values: width

style

color

Or you can set each property individually

7 CSS Box Model


81/89

7. CSS Box Model

Bo rder Color You can set the color of a border

independently with the border-color property.

border-color: value; Values:

color name

hexadecimal numberRGB color code

transparent

7 CSS Box Model


82/89

7. CSS Box Model

Bord er Style You can set the style of a border independently with the border-style

property.

border-style: value;

Values: dashed

dotted

double

groove

hidden

inset none

outset

ridge

solid

7 CSS Box Model


83/89

7. CSS Box Model

7 CSS Box Model


84/89

7. CSS Box Model

Bo rder Width You can set the width of a border independently with

the border-width property.

border-width: value;

Values: Length

Thin

Medium

Thick

Or you can set the elements for each borders sideindividually

7 CSS Box Model


85/89

7. CSS Box Model

Border Bot tom You can set the color, style and width of the bottom border around an element in one

declaration with the border-bottom property.

border-bottom: 1px solid #333333;

Values:

Width

style

color

Or you can set each value individually

Border Bot tom Color

You can set the color of the bottom border around an element with the border-

bottom-color property.border-bottom-color: value;

You can set the style of the bottom border around an element with the border-bottom-style property:

border-bottom-style: value;

7 CSS Box Model


86/89

7. CSS Box Model

Border Bot tom Width You can set the width of the bottom border around an element with the

border-bottom-width property.

border-bottom-width: value;

Border L eft

You can set the color, style and width of the left border around an elementwith the border-left property.

border-left: 1px solid #333333;

Values:

style

Width color


7 CSS Box Model


87/89

7. CSS Box Model

Border Lef t Color

border-left-color: value;

Bo rder Left Sty le

border-left-style: value;

Border Lef t Width

border-left-width: value;

Border Right

border-right: 1px solid #333333;

Values: color

style

width


7. CSS Box Model: CSS


88/89

MarginProperty Description Values

Margin A shorthand property for

setting the margin properties in

one declaration

margin-top

margin-right

margin-bottom

margin-left

margin-bottom Sets the bottom margin of an

element

auto

length

%

margin-left Sets the left margin of an

element

auto

length

%

margin-right Sets the right margin of an

element

auto

length

%

margin-top Sets the top margin of an

element

auto

length

%

7. CSS Box Model: CSS


89/89

Padding

Property Description Values

Padding A shorthand property for setting

all the padding properties in one

declaration

padding-top

padding-right

padding-bottom

padding-left

padding-bottom Sets the bottom padding of an

element

length

%

padding-left Sets the left padding of an

element

length

%

padding-right Sets the right padding of an

element

length

%padding-top Sets the top padding of an

element

length

%

HTML Chapter 3-Css

Documents

Transcript of HTML Chapter 3-Css