Creating Css

CREATING CSS
Ms. Josephine T. Eduardo

CSD, Faculty
What is CSS?
CSSstands forCascadingStyleSheets
Styles definehow to displayHTML elements
External Style Sheetscan save a lot of work
External Style Sheets are stored inCSS files
Introducing Cascading Style

Sheets
Style sheets are files or forms that describe the layout and
appearance of a document.
Cascading Style Sheets, or CSS, is a style sheet language
used on the Web.
CSS specifications are maintained by the World Wide Web Consortium
(W3C)
Three versions of CSS exist: CSS1, CSS2, and CSS3.
Cascading Style Sheets

CSS1 - introduced styles for the following
document features:
Fonts
Text
Color
Backgrounds
Block-level Elements

CSS2 introduced styles for the following
document features:
Positioning
Visual Formatting
Media Types
Interfaces

CSS3 (which is still in development) will
introduce styles for the following document
features:
User Interfaces
Accessibility
Columnar layout
International Features
Mobile Devices
Scalable Vector Graphics
Applying a Style Sheet

Three ways to apply a style to an HTML
document:
Inline Styles
Embedded Styles
External Styles
Using Inline Styles

Inline styles are easy to use and interpret because they are
applied directly to the elements they affect.
<element style=style1: value1; style2: value2; style3: value3;>
<h1ALIGN="center"STYLE="background:#000080;font:
36pt/40pt courier;font-variant:small-caps;border:thick
dashed blue">Welcome to my home page!</h1>
Inline Styles Example

<html>
<head>
<title> CSS </title>
</head>
<body STYLE="background: #000000; color: #80c0c0">
<h1ALIGN="center"STYLE="background:#000080;font:36pt/40pt courier;
font-variant:small-caps;border:thick dashed blue"> Welcome to my home

page!</h1>
</body>
</html>
Using Embedded Styles

You can embed style definitions in a document head
using the following form:
<style>
style declarations
</style>
Where style declarations are the declarations of the
different styles to be applied to the document.
Creating an Embedded Style Sheet

An embedded style sheet is one in which the CSS code is written
in the <head> section of an XHTML document
On a blank line in the <head> section of an XHTML document, type:
<style type="text/css">
Press the Enter key four times
Type the end </style> tag
Position the insertion point on the blank line between the start
<style> and end </style> tags
Type the CSS code
Creating an Embedded Style Sheet

The following code shows the syntax for an embedded style
sheet:
<style type="text/css">
. . . CSS code is typed here . . .
</style>
Embedded Styles Example
Using an External Style Sheet

Because an embedded style sheet only applies to the
content of the start.htm file, you need to place a style
declaration in an external style sheet to apply to the
headings in the rest of the Web site
An external style sheet is a text file that contains
style declarations
It can be linked to any page in the site, allowing the same
style declaration to be applied to the entire site
Using an External Style Sheet

You can add style comments as you develop an external style
sheet
Use the link element to link a Web page to an external style
sheet
You can import the content of one style sheet into another
Understanding How Styles Are

Written
A style is a consistent, recognizable pattern
A CSS style is a collection of one or more rules
A style sheet is a collection of styles
A rule is the combination of a selector, a property, and a
value
The selector identifies the element to which you are applying
a style.
Element, type, class, and id selectors
Creating a CSS Style

In a text document, type the selector followed by a left brace,
as in the following code, and then press the Enter key.
selector {
Type the declarations (each indented by two or three spaces),
separating a property from a value with a colon. Type a
semicolon after each declaration, and then press the Enter
key, as in the following code.
property: value;
Creating a CSS Style

Type a right brace on its own line (but not indented) below the
declaration list. The following code shows the complete syntax
for a rule:
selector {
property: value;
property: value;
}
Understanding How Styles Are

Written
Working with Color

The color property changes the foreground color of an
element
The background-color property changes the background
color of an element
You can define color in three ways:
By name
By their RGB triplet
By a hexadecimal value
Working with Color
Grouping Element Selectors

Grouped selectors are selectors with the same declarations
grouped into a comma-separated list
Using Descendant Selectors

A descendant selector is a selector nested within another
selector
Using Font Properties

The font-variant property can make text appear in small
caps

The font-size property is used to change the font size
You can express font size in:
Centimeters
Inches
Millimeters
Points
Picas
Pixels
X-Height
em
Percentage

Em units and percents are examples of a relative value, a
value that increases or decreases in size in relation to its
parent element
Point values are an absolute value, a fixed value that will
not increase or decrease in size in relation to its parent
element

The font-family property is used to change the typeface of
text
A font family is a set of fonts that have similar
characteristics
Fonts you see depend on the platform
Generic font
Using the Font Shorthand Property

Following the selector and the left-facing bracket, type font:
on its own line, as shown in the following code:
h2 {
font:
Type values for the fonts style, weight, variant, size, and
family as applicable.
Enter spaces between the values for the font properties.
Enter commas between values for the font family.
Using the Font Shorthand Property

The following code shows the syntax for a completed rule:
h2 {
font: normal bold 1.4em Verdana, Helvetica, sansserif;
}
Using IDs and Classes

Use an id to distinguish something, like a
paragraph, from the others in a document
For example, to identify a paragraph as head,
use the code:
<p id=head> </p>
Classes
HTML and XHTML require each id be unique therefore an id

value can only be used once in a document
You can mark a group of elements with a common identifier

using the class attribute
<element class=class> </element>
Applying a style to a class
Applying a style to a class and

element
Sizing Elements and Floating an

Element
You can define the width of columns in a columnar layout

using: width: value
You can use CSS to set an elements height using: height:

value
You can float a paragraph using: float: position
Working with the div Element
The div element is a generic block-level element

<div>
content
</div>
Working with Background

CSS background properties are used to define the background
effects of an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Using Background Color
Using Background Image
Using Background Image

Creating Css

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creating Css

Uploaded by

Copyright:

Available Formats

CREATING CSS

Ms. Josephine T. Eduardo

Introducing Cascading Style

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets

Applying a Style Sheet

Using Inline Styles

<element style=style1: value1; style2: value2; style3: value3;>

Inline Styles Example

font-variant:small-caps;border:thick dashed blue"> Welcome to my home

Using Embedded Styles

Creating an Embedded Style Sheet

Creating an Embedded Style Sheet

Embedded Styles Example

Using an External Style Sheet

Using an External Style Sheet

Understanding How Styles Are

Creating a CSS Style

Creating a CSS Style

Understanding How Styles Are

Working with Color

Working with Color

Grouping Element Selectors

Using Descendant Selectors

Using Font Properties

Using Font Properties

Using Font Properties

Using Font Properties

Using Font Properties

Using Font Properties

Using the Font Shorthand Property

Using the Font Shorthand Property

Using IDs and Classes

HTML and XHTML require each id be unique therefore an id

You can mark a group of elements with a common identifier

Applying a style to a class

Applying a style to a class and

Sizing Elements and Floating an

You can define the width of columns in a columnar layout

You can use CSS to set an elements height using: height:

You can float a paragraph using: float: position

Working with the div Element

The div element is a generic block-level element

Working with Background

Using Background Color

Using Background Image

Using Background Image

You might also like