Scribd
Upload
49 views

05 CssBasics

This document provides an introduction to CSS basics, including: 1. It describes the different types of CSS style sheets - inline, internal, and external stylesheets. 2. It explains how to declare CSS styles using selectors like element, class, and contextual selectors. 3. It covers common CSS properties like color, font, text, and box properties and how to assign values to these properties.

Uploaded by

Naveed Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
49 views

05 CssBasics

This document provides an introduction to CSS basics, including: 1. It describes the different types of CSS style sheets - inline, internal, and external stylesheets. 2. It explains how to declare CSS styles using selectors like element, class, and contextual selectors. 3. It covers common CSS properties like color, font, text, and box properties and how to assign values to these properties.

Uploaded by

Naveed Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 29

CSS Basics

Goals
• Understand basic syntax of Cascading
Style Sheets (CSS)
• Understand the differences among inline,
internal and external style sheets
• Understand how to declare a style
• Understand how to attach specify values
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 a Web browser
Let’s See Some Code
• Rule Structure
Selectors
• Element Selectors – (refer to HTML tags)
H1 {color: purple;}
H1, H2, P {color: purple;}
• Contextual – (refer to HTML, but in context)
LI B {color: purple;}
Selectors
• Class Selectors
<H1 CLASS=“warning”>Danger!</H1>
<P CLASS=“warning”>Be careful…</P>
…….
In your HTML code -
H1.warning {color: red;}
OR to an entire class…
.warning {color:red;}
Introduction to Styles and Properties
• A single piece of CSS formatting information,
such as text alignment or font size, is referred
to as a style
• Some of the style capabilities of CSS include
the ability to change fonts, backgrounds, and
colors, and to modify the layout of elements
as they appear in a Web browser
Introduction to Styles and Properties
• CSS information can be added directly to
documents or stored in separate documents
and shared among multiple Web pages
• The term “cascading” refers to the Web
pages’ ability to use CSS information from
more than one source
CSS Properties
• CSS styles are created with two parts
separated by a colon: the property, which
refers to a specific CSS style, and the value
assigned to it, which determines the style’s
visual characteristics
• Together, a CSS property and the value
assigned to it are referred to as a declaration
or style declaration
CSS Properties
Common CSS Properties
CSS Properties
• The properties are grouped into the
following categories:
– Color and background properties
– Font properties
– Text properties
– Box properties
– Classification properties
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
Embedded Style Sheets
• <html>
• <head>
• <title>Embedded Style Sheet</title>
• <style type="text/css">
• .warning {color:#ff0000}
• h1.warning {text-decoration:underline}
• p.warning {font-weight:bold}
• </style>
• </head>
• <body>
• <h1 class="warning">WARNING</h1>
• <p class="warning">Don't go there!</p>
• </body>
• </html>
External Style Sheets
• Code Sample: StyleSheet.css
• .warning {color:#ff0000}
• h1.warning {text-decoration:underline}
• p.warning {font-weight:bold}

• Code Sample:ExternalStyleSheet.html
• <html>
• <head>
• <title>External Style Sheet
• </title>
• <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
• </head>
• <body>
• <h1 class="warning">WARNING</h1>
• <p class="warning">Don't go there!</p>
• </body>
• </html>
Inline Styles
• <html>
• <head>
• <title>Inline Styles</title>
• </head>
• <body>
• <p style="color:blue; font-weight:bold; font-size:12pt">Common
Greetings</p>
• <ul style="margin-top:-20px; font-size:10pt">
• <li style="list-style-type:square">Hello</li>
• <li style="list-style-type:circle">Hi</li>
• <li style="list-style-type:disc">Howdy</li>
• </ul>
• </body>
• </html>
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
CSS Values
• For instance, you can assign any font name
that is available on a user’s system to the
font-family property
• For other properties, you must assign a value
from a specific set of values
Length Units
• Length units refer to the units of measure
that you can use in a style declaration to
determine the size or positioning of an
element
• Whether a length unit is used for sizing or
positioning depends on the property and the
element to which it is assigned
Length Units
• You assign a measurement value to a property
by assigning the number that represents the
measurement, immediately followed by the
unit of measure
CSS Length Units
Length Units

• CSS length units are either absolute or


relative
• Absolute length units use an exact
measurement to specify the size or
placement of an element
Length Units

• The following CSS length units are absolute:


– cm (centimeters)
– in (inches)
– mm (millimeters)
– pc (picas)
– pt (points)
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)
Percentage Units
• An alternative to relative length units is
percentage units, which adjust properties
relative to other values
• You assign a percentage unit value to a
property by assigning a number that
represents the percentage, immediately
followed by the percent symbol (%)
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
Color Units
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
• Refer to Appendix D for information on
assigning colors with the RGB color system
Resources
• Slides were adapted from the following text &
companion lectures:
XHTML, Comprehensive
First Edition
Dan Gosselin
Published by Course Technology (2004)

You might also like