Scribd
Upload
104 views

Unit 1 CSS

Cascading Style Sheets (CSS) is a styling language that allows attaching style to HTML elements. CSS has advantages like better layout control, less work through editing one style sheet, and more accessible sites. CSS uses selectors to apply styles through type, ID, class and grouping selectors. Styles can be defined internally, through linked external stylesheets, or inline. Common properties control fonts, colors, backgrounds, borders and more. CSS follows inheritance and specificity rules to determine which styles take precedence.

Uploaded by

Krishna Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
104 views

Unit 1 CSS

Cascading Style Sheets (CSS) is a styling language that allows attaching style to HTML elements. CSS has advantages like better layout control, less work through editing one style sheet, and more accessible sites. CSS uses selectors to apply styles through type, ID, class and grouping selectors. Styles can be defined internally, through linked external stylesheets, or inline. Common properties control fonts, colors, backgrounds, borders and more. CSS follows inheritance and specificity rules to determine which styles take precedence.

Uploaded by

Krishna Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 17

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>

You might also like