Introduction to CSS

Get to know each other!O Like the individual designs of the name tags, CSS allows you to determine the style of your webpageO What draws you into a website?O What makes a website visually appealing?

What is CSS?O Cascading Style SheetsO Define how to display HTML elements: HTML defines the content, CSS defines the formatO CSS information stored in an External Style Sheet (.css files)

The External Style Sheet<head><link rel="stylesheet" type="text/css"href="mystyle.css" /></head>

CSS SyntaxO The selector is normally the HTML element you want to style.O Each declaration consists of a property and a value.O The property is the style attribute you want to change. Each property has a value.

CSS Selectors: ID and ClassO The ID selector is used to specify a style for a single, unique element.O Defined with a "#": #para1 when the html coding includes the attribute <p id=”para1”> as the initial bracketO The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.O defined with a ".": .center, with html code indicating class=”center”  all elements with this indication will be centered O you can choose for a class to only affect one type of element by further specifying it with p.center, h.center, etc.

StyleO Background color: defined in the body element: body {background-color:#b0c4de;}O Text color: can be in any sector: body {color:blue;}O Text alignment: h1 {text-align:center;}O Text transformation: p.capitalize {text- transform:capitalize;}

The Possibilities are Endless!O Borders: boxes can be created around text—anything from a solid line around the text to a 3D grooved boderO Navigation Bar: a list of links used to help visitors navigate your site or be directed to other sitesO Every color under the sun: CSS allows you to code font and back ground color using HEX values, color codes, and color names

Review: How much do you remember?

Homework Edit the page you produced with the threeparagraphs from your favorite book so thatthe format more accurately reflects the feel of the book. Make use of differentfonts, colors, and alignment, as well as one other element that you find on your own to make your representation more unique.For reference: http://w3schools.com/css

Introduction to CSS

by abmcg

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Introduction to CSS Presentation Transcript