creating css

Ms. Josephine T. EduardoCSD, Faculty

CREATING CSS

• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements

• External Style Sheets can save a lot of work

• External Style Sheets are stored in CSS files

What is CSS?

• 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.

Introducing Cascading Style Sheets

• CSS1 - introduced styles for the following document features:– Fonts

– Text

– Color

– Backgrounds

– Block-level Elements

Cascading Style Sheets

• 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


• Three ways to apply a style to an HTML document:– Inline Styles

– Embedded Styles

– External Styles

Applying a Style Sheet

• 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;…”>

• <h1 ALIGN="center" STYLE="background: #000080; font: 36pt/40pt courier; font-variant: small-caps; border: thick dashed blue">Welcome to my home page!</h1>

Using Inline Styles

• <html>

• <head>

• <title> CSS </title>

• </head>

• <body STYLE="background: #000000; color: #80c0c0">

• <h1 ALIGN="center" STYLE="background: #000080; font: 36pt/40pt courier;

• font-variant: small-caps; border: thick dashed blue"> Welcome to my home page!</h1>

• </body>

• </html>

Inline Styles Example

• 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.

Using Embedded Styles

• 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>

Creating an Embedded Style Sheet

Embedded Styles Example

• 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

Using an External Style Sheet

• 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

Understanding How Styles Are Written

• 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;

}

Creating a CSS Style

Understanding How Styles Are Written

• 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

Working with Color

• Grouped selectors are selectors with the same declarations grouped into a comma-separated list

Grouping Element Selectors

• A descendant selector is a selector nested within another selector

Using Descendant Selectors

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


• 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 font’s 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, sans-serif;

}

Using the Font Shorthand Property

• 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>

Using IDs and 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>

Classes

Applying a style to a class

Applying a style to a class and element

• You can define the width of columns in a columnar layout using: width: value

• You can use CSS to set an element’s height using: height: value

• You can float a paragraph using: float: position

Sizing Elements and Floating an Element

• The div element is a generic block-level element

<div>

content

</div>

Working with the div Element

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

Working with Background

Using Background Color

Using Background Image

creating css

Documents