CSS Techniques - PowerPoint PPT Presentation

1 / 15

About This Presentation

Title:

CSS Techniques

Description:

Cascading Style Sheets (CSS) is used to develop and enhance the presentational ... be displayed if it contained no tables or other XHTML hacks used for positioning. ... – PowerPoint PPT presentation

Number of Views:63

Avg rating:3.0/5.0

Slides: 16

Provided by: csU55

Category:

more less

Transcript and Presenter's Notes

Title: CSS Techniques

1
CSS Techniques

Danielle Hernandez

2
Basics What is CSS?

Cascading Style Sheets (CSS) is used to develop
and enhance the presentational component of web
design.
CSS specifies a priority method to determine
which style rules apply if more than one rule is
assigned to a particular element.
CSS can be used externally, internally, or
embedded within the XHTML (sometimes referred to
as inline CSS).
CSS should be validated to ensure optimum
usability among browsers.

3
Basics CSS Style Rules

CSS is comprised of many items called CSS Style
Rules. Each of these style rules is associated
with an element in the XHTML code. These rules
visually style the content of the page. Each CSS
rule is made up of a selector and a declaration.
The declaration is then broken down into a
property and a value. Each property value should
end with a semi-colon unless there is only one
property specified.
Selector indicates the element(s) that the rule
should be applied to.Declaration indicates the
actual style that is being applied to the content
of the element specified in the
selector.Property the affected aspect of an
element.Value a setting for the property.

4
Basics Implementation

There are three ways that CSS can be used in an
XHTML document.
It can be embedded within the XHTML coding using
a style attribute. Embedded CSS is not commonly
used because it involves the most coding and
tends to clutter the coding and make maintenance
of the site difficult.
Internal styles appear in tags, nested in
the tags at the top of the coding. This
technique makes the code easier to read than
directly embedding it within the XHTML.
The third way of using CSS is by creating an
external style sheet. All CSS coding for the
entire website is written in one document that
contains CSS only (no XHTML) and is saved using a
.css file extension. Each page in the website
that uses the coding in the external style sheet
should link to the document in the .

5
Basics Box Model
The visual component of a web page implemented
with CSS relies entirely on the box model. Each
element is assigned to a box area with four
parts margin, border, padding, and content.

Margin the resizable area between the edges of
the borders of two elements. Margins of separate
elements may overlap.
Border acts as a separator between the boxes of
two elements.
Padding the area between the border and the
content of the box. If an element is assigned a
background color, the padding takes on this
color.
Content the inner most part of the box where the
actual content (text, graphics, etc.) appears.

The margin and padding are often referred to as
white space and are used as a visually attractive
element.
6
Basics Validation

All well designed pages containing CSS code pass
validation with no errors when tested with a
reliable CSS validator. To validate CSS code, one
can visit the World Wide Web Consortium (W3C) CSS
Validator webpage and type the URL of the
document into the address box, browse for a local
CSS file to upload, or directly typing the input
to be validated into the text box.

7
Style Images

Images can be manipulated in many ways using CSS
to give the designer plenty of freedom with their
layout. In the XHTML all images should be given a
value for the alt attribute. An id or class
attribute can be used to manipulate the image
with CSS.

Images can
Be floated or cleared
Given an absolute, relative or fixed position
Have a specified height and width
Have styled borders
Have hover effects
Appear in different places on a page
Appear many times on a page

Appear in fixed or repeating patterns
Altered for image replacement
Used as a link
Used in navigation systems
Used as a background for an element or page
Etc.

8
Style Links

There are several different kinds of links
including text links, image links, image maps,
and navigation links. Below is a brief
description of text links, image links and image
maps. Navigation will be covered in a later
slide.
Text Links
To control the presentation of text links,
pseudo-classes are used. There are four main
states of a link unvisited, visited, hover (user
hovering over a link), and active (user clicking
on a link). The corresponding pseudo-classes are
alink, avisted, ahover, and aactive,
respectively. The most common presentation
aspects that these pseudo-classes are used for is
to control the color property or the
text-decoration property.
Image Links
Images can also be used as links. The chosen
image should be an object that relates to the
link. When an image is used as a link, the alt
attribute must be used to specify where the link
will take the user. If no alt text appears in the
code, screen readers will alternatively read the
URL of the link or the name of the image.
Image Map
An image map is when different sections of one
image are links to different pages. For this type
of navigation, one DIV is used for the entire
image map and one is used for the links within
the map. The actual image is defined by setting
its URL as the background image of the first DIV
using CSS.

9
Style Lists

Lists can be styled with CSS in numerous ways.
Lists are typically used to organize information,
but they can also be used to generate horizontal
and vertical navigation systems, as you will see
later on. Three types of lists are commonly used
definition lists , ordered lists