Css cascading style sheets
Download
1 / 23

CSS Cascading Style Sheets - PowerPoint PPT Presentation


  • 106 Views
  • Uploaded on

CSS Cascading Style Sheets. CSS Define style, look and presentation of the website content The way the content is presented on the page is determined in presentation rules in a style sheet layout background fonts margins. CSS HTML is used to create logical structure of the content

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' CSS Cascading Style Sheets' - december


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Css cascading style sheets

CSSCascading Style Sheets


CSS

Define style, look and presentation of the website content

The way the content is presented on the page is

determined in presentation rules in a style sheet

layout

background

fonts

margins


CSS

HTML

is used to create logical structure of the content

CSS

is used to style the structured content


Styles

External

reside in a separate style sheet file (.css)

Internal

located inside individual page within <style> tags inside the document’s <head>

Inline

located within HTML tags themselves and only apply to the content of that tag


Style rules Cascade

There are rules to determine which style takes

precedence while multiple styles can cover a single

element of the page.

When style rules conflict, the laws of

the cascade determine how the conflict is settled.

The order of the cascade

1. External

2. Internal

3. Inline


Style rules Cascade

The closer a rule to the element getting styled, the more power the rule has in the battle of conflicting style rules.

The order of the cascade

1. External

2. Internal

3. Inline


Creating CSS

A style rule begins with a selector.

Selector can be a

tag

class

id


Creating a style rule for a tag

Redefining the style for a tag gives considerable control,

as HTML has a tag for nearly any type of text you need to

format.

<body>


DW CSS categories

Type

Background

Block

Box

Border

List

Positioning

Extensions


Creating a Custom class

Style rule for something that does not have tag as

a label.

Custom name for a style when you create a class.

.myclass

Do not create classes for something that has a logical tag, like heading <h1, h2, h3, etc>You can simply redefine one of the heading tags.

HTML is used to create logical structure of the content

CSS used to style the structured content


Creating a Custom class

Class is reusable

Many different elements on a page can be assigned to the

same class

Class has a name

A period (.) precedes a class selector

Named elements can be targeted with CSS rules


Creating a Custom class

Class style rule must be applied to the

document


Creating advanced selectors (IDs, pseudo-class

selectors)

An ID can only be used once per page

IDs are unique

Used in addition to CSS rules

A hash or pound sign (#) precedes an id selector.

#subnav


Creating advanced selectors (IDs, pseudo-class

selectors)

ID is another method for assigning names

ID style rule must be applied to the

document


Pseudo-class selectors

Names so because pseudo-states don’t actually exist in

the document

The user must do something to trigger the pseudo-class,

such as

Visit a link

Hover over a link

Browse over a visited link


Pseudo-class selectors L-V-H-A order

LoVeHAte

A: link

A: visited

A: hover

A: active


Verification of styles

Previewing in a variety of browsers and browser versions

Sometimes the style rules conflict and you get enexpected

results


CSS for layout

Box model

DIV

division


CSS for layout

Box model

Margin

Border

Padding

Content

CSS set rules

For each element


CSS for layout

Position and float

Static

Relative

Inherit

Absolute

Fixed


CSS for layout

Position and float

Static

Relative

Inherit

Absolute

Fixed


CSS for layout

Float

Left

Right

None

Inherit


CSS for layout

Elements in HTML can nest.

Inside the body tag might be a div (division) named

content with adiv named newitem nested inside.

Each of these nested elements exist in a parent-child

relationship that allows CSS properties to be inherited.

The child elements are descendants of the parent and

inherit properties from them.


ad