Unit 1 CSS

Cascading Style Sheets
(CSS)
Cascading Style Sheet (CSS)
Introduction
Advantages and disadvantages
Inheretance
CSS basics
Selectors
4 Ways To Put CSS And HTML Together
Introduction
CSS stands for Cascading Style Sheets and
is a simple styling language which allows
attaching style to HTML elements.
Style Sheets are templates, very similar to
templates in desktop publishing applications,
containing a collection of rules declared to
various selectors (elements).
Cascade is a method of defining the weight
(importance) of individual styling rules thus
allowing conflicting rules to be sorted out
should such rules apply to the same selector.
Advantages and Disadvantages

1.
Better type and layout controls. Presentational (X)HTML never gets

close to offering the kind of control over type, backgrounds, and
layout that is possible with 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 nonvisual 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.
2.
3.
4.
5.
Disadvantages
Browser compatibility must be the most common difficulty.
CSS Inheritance
Allows elements to inherit styles from parent elements.
Helpful in reducing the amount of CSS to set styles for
child elements.
Unless a more specific style is set on a child element,
the element looks to the parent element for its styles.
Each style has a numeric specificity value that is given
based on its selector.
CSS Basics
A style definition is made up of a selector followed by
a declaration block, as shown in this example:
<html>
<head>
<title>CSS Basics</title>
<style type="text/css">
P { color:#000000 }
h1{font-weight: bold; font-style: italic;
color: red}
</style>
</head>
<body>
CSS Syntax
selector/element {
property: value;
}
The selector can either be a grouping of elements, an
indentifier, class, or single XHTML element (body, div,
etc)
Selectors
4 types of selectors
1. Type Selectors
2. Grouping Selectors
3. ID Selectors
4. Class Selectors
Type (Element) Selector

Specify the style(s) for a single XHTML
element.
body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
Grouping Elements
Allows you to specify a single style for
multiple elements at one time.
h1, h2, h3, h4, h5, h6 {
font-family: Trebuchet MS, sansserif;
}
The Class Selector

<p class=intro>This is my introduction
text</p>
.intro {
font: 12px verdana, sans-serif;
margin: 10px;
}
The Identifier Selector

<p id=intro> This is my introduction
text</p>
#intro {
border-bottom: 2px dashed #fff;
}
4 Ways To Put CSS And HTML

Together
1. Defining a style sheet inside of the HTML document,
inside the <HEAD> tag.
2. Referring to an external file which contains a style sheet,
by using the 'LINK' element.
3. Referring to an external file which contains a style sheet,
by using the '@import' notation.
4. Using a style element inside the document body,
attached to a tag.
Using Style Sheets

External Style Sheet
<link rel=stylesheet type=text/css href=location.css
/>
Also a media descriptor (screen, tv, print, handheld, etc)

Preferred method.
Embedded Styles
<style type=text/css>
body {}
</style>
Inline Styles
<p style=font-size: 12px>Lorem ipsum</p>
Font Properties
Property
Valid Values
Example
Inherited?
font-family
[font name or type]
font-family:
Verdana, Arial;
font-style
normal | italic
font-style:italic;
font-variant
normal | small-caps
font-variant:smallcaps;
font-weight
normal | bold
font-weight:bold;
font-size
[ xx-large | x-large |
large | medium |
small | x-small |
xx-small ] |
[ larger |
smaller ] |
percentage |
length
font-size:12pt;
font
[ font-style || fontfont: bold 12pt

variant || fontArial;
weight ] ? fontsize [ / line-height
] ? font-family
Color and Background Properties

Property
Valid Values
Example
color
color
color: red
background-color
color | transparent
background-color: yellow
background-image
url | none
background-image:
url(house.jpg)
background-repeat
repeat | repeat-x | repeat-y | background-repeat: nono-repeat

repeat
background-attachment
scroll | fixed
background-attachment:
fixed
background-position
[ position | length ] | {1,2} |

[ top | center | bottom ] ||
[ left | center | right ]
background-position: top
center
background
transparent | color || url ||

repeat || scroll || position
background: silver
url(house.jpg) repeat-y
REFERENCES
FONT ATTRIBUTE
COLOR AND BACKGROUND ATTRIBUTE
TEXT ATTRIBUTE
BORDER ATTRBITEES
MARGIN
LIST ATTRIBUTES
CLASS
<SPAN>

Unit 1 CSS

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Unit 1 CSS

Загружено:

Авторское право:

Доступные форматы

Cascading Style Sheets

Cascading Style Sheet (CSS)

Advantages and Disadvantages

Better type and layout controls. Presentational (X)HTML never gets

Browser compatibility must be the most common difficulty.

Type (Element) Selector

The Class Selector

The Identifier Selector

4 Ways To Put CSS And HTML

Using Style Sheets

Also a media descriptor (screen, tv, print, handheld, etc)

[font name or type]

[ font-style || fontfont: bold 12pt

Color and Background Properties

repeat | repeat-x | repeat-y | background-repeat: nono-repeat

[ position | length ] | {1,2} |

transparent | color || url ||

Вам также может понравиться