03-CssBasic for beginners

7/29/2019 03-CssBasic for beginners

1/45

CSSCASCADING STYLE SHEET

Nazia Hameed

COMSATSINSTITUTE OF INFORMATION TECHNOLOGY

ISLAMABAD


2/45

Goals

Understand basic syntax of CascadingStyle Sheets (CSS)

Understand the differences among inline,internal and external style sheets

Understand how to declare a style

Understand how to attach specify values


3/45

Problem

When tags like , and color attributes

were added to the HTML, 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.

Solution??????????


4/45

Cascading

Style

Sheet


5/45

What are Cascading Style Sheets?

Created by Hakon Wium Lie of MIT in1994

Has become the W3C standard for

controlling visual presentation of webpages

Separates design elements from structural

logicYou get control and maintain the integrity

of your data


6/45

Introduction to Styles and Properties

Cascading Style Sheets (CSS) are a

standard set by the World Wide Web

Consortium (W3C) for managing the

design and formatting of Web pages in aWeb browser


7/45

CSS SYNTAX

Rule Structure


8/45

Example

CSS Example

p

{

color:red;text-align:center;

}

Hello World!

This paragraph is styled with CSS.

OUTPUT


9/45


A single piece of CSS formattinginformation, such as text alignment or fontsize, is referred to as a style

Some of the style capabilities of CSSinclude the ability to change fonts,backgrounds, and colors, and to modifythe layout of elements as they appear in aWeb browser


10/45


CSS information can be added directly todocuments or stored in separatedocuments and shared among multiple

Web pagesThe term cascading refers to the Web

pages ability to use CSS information frommore than one source


11/45

CSS Properties

CSS styles are created with two partsseparated by a colon: the property, whichrefers to a specific CSS style, and the

value assigned to it, which determines thestyles visual characteristics

Together, a CSS property and the valueassigned to it are referred to as adeclaration orstyledeclaration


12/45

CSS Properties


13/45

CSS Comments

Comments are used to explain your code, andmay help you when you edit the source code ata later date. Comments are ignored bybrowsers.

A CSS comment begins with "/*", and ends with"*/", like this:

/*This is a comment*/p{

text-align:center;/*This is another comment*/color:black;font-family:arial;}


14/45

The id and class Selectors

In addition to setting a style for a HTML

element, CSS allows you to specify yourown selectors called "id" and "class".

The id Selector

The id selector is used to specify a style for asingle, unique element.

The id selector uses the id attribute of the

HTML element, and is defined with a "#".

The style rule below will be applied to the

element with id="para1":


15/45

The id Selector

#para1

{

text-align:center;

color:red;}

Hello World!

This paragraph is not affected by thestyle.

Output


16/45

The class Selector

The class selector is used to specify astyle for a group of elements. Unlike the idselector, the class selector is most often

used on several elements.This allows you to set a particular style for

many HTML elements with the sameclass.

The class selector uses the HTML classattribute, and is defined with a "."


17/45

Class Selector

.center

{

text-align:center;

}

Center-alignedheading

Center-alignedparagraph.

Output


18/45

Class Selector

You can also specify that only specific

HTML elements should be affected by a

class.


19/45

Class Selector Example

p.center

{

text-align:center;

}

This heading will notbe affected

This paragraph will becenter-aligned.


20/45

Ways to Insert CSS

There are three ways of inserting a style

sheet:

Inline style

Internal style sheet

External style sheet


21/45

Inline Styles

The most basic method of applying styles

is to use inline styles, which allow you to

add style information to a single element in

a document

An inline style (inside an HTML element)

has the highest priority, which means that

it will override a style defined inside the tag, or in an external style sheet.


22/45

Inline Styles

Inline Styles

Common Greetings

Hello

HiHowdy


23/45

Internal Style Sheets

Internal Style Sheet

.warning {color:#ff0000}

h1.warning {text-decoration:underline}

p.warning {font-weight:bold}

WARNING

Don't go there!


24/45


25/45

External Style SheetsCode Sample: StyleSheet.css

.warning {color:#ff0000}h1.warning {text-decoration:underline}

p.warning {font-weight:bold}

Code Sample:ExternalStyleSheet.html

External Style Sheet

WARNING

Don't go there!


26/45

Common CSS Properties To create a link from an HTML document to an external

stylesheet, add the tag in the tags.

hrefattribute specifi es the stylesheets location.

Type attribute alerts the browser that the file contains CSS.

rel attribute tells the browser that this link will be a

stylesheet. Media attribute specifies the media type

Screen the stylesheet should be used for display in a Web browser.

Handheld the stylesheet would contain styles you had optimizedfor mobile devices


27/45

Common CSS Properties


28/45

CSS Properties

The properties are grouped into the

following categories:

Color and background properties

Font properties

Text properties

Box properties

Table properties


29/45

Assignment

Make your profile using HTML and useExternal styles sheet to make it

appealing .

DUE DATE: 24nd March 2012

Viva : 26rd March 2012


30/45

CSS Values

The values you can assign to a CSS

property depend on what type of property

it is

Some properties can be assigned a range

of values


31/45

CSS Values

For instance, you can assign any font

name that is available on a users systemto the font-family property

For other properties, you must assign a

value from a specific set of values


32/45

Length Units

Length units refer to the units of measurethat you can use in a style declaration todetermine the size or positioning of an

elementWhether a length unit is used for sizing or

positioning depends on the property andthe element to which it is assigned


33/45

Length Units

You assign a measurement value to aproperty by assigning the number thatrepresents the measurement, immediately

followed by the unit of measure


34/45

CSS Length Units


35/45

Length Units

CSS length units are either absolute or

relative

Absolute length units use an exactmeasurement to specify the size or

placement of an element


36/45

Length Units

The following CSS length units are

absolute:

cm (centimeters)

in (inches)

mm (millimeters)

pc (picas)

pt (points)


37/45

Length Units

Relative length units are preferred

because they adjust properties according

to screen size or user preferences

The following CSS length units are

relative:

em (em space)

ex (x-height)

px (pixels)

%


38/45

Percentage Units

An alternative to relative length units ispercentage units, which adjust propertiesrelative to other values

You assign a percentage unit value to aproperty by assigning a number thatrepresents the percentage, immediatelyfollowed by the percent symbol (%)


39/45

Color Units

A color unit represents a color value that

you can assign to a property

You can assign a color unit to a property

using any one of 16 color names defined

in the CSS1 specification


40/45

Color Units


41/45

Color Units

Most graphical computer systems use the

RGB color system for specifying colors

You can also assign a color using the

RGB color system


42/45

Why CSS?

Advantages to Workflow

Cost Savings

You WILL Be Cooler


43/45

Advantages of CSS

Workflow

Faster downloads

Streamlined site maintenance

Global control of design attributes


44/45

Advantages of CSS - Cost Savings

Cost Savings

Reduced Bandwidth Costs

One style sheet called and cached

Higher Search Engine RankingsCleaner code is easier for search engines to index


45/45

Advantages of CSS - Cost Savings

Faster download = better usability

CSS requires less code

Tables require spacer images

CSS can control the order that elementsdownload (content before images)

03-CssBasic for beginners

Documents

Transcript of 03-CssBasic for beginners