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  we...
What is CSS?O Cascading Style SheetsO Define how to display HTML  elements: HTML defines the  content, CSS defines the for...
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  ...
CSS Selectors: ID and ClassO The ID selector is used to specify a style for a  single, unique element.O Defined with a "#"...
StyleO Background color: defined in the body  element:       body {background-color:#b0c4de;}O Text color: can be in any s...
The Possibilities are Endless!O Borders: boxes can be created around  text—anything from a solid line around the  text to ...
Review: How much do   you remember?
Homework Edit the page you produced with the threeparagraphs from your favorite book so thatthe format more accurately ref...
Upcoming SlideShare
Loading in …5
×

Introduction to CSS

462 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
462
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to CSS

  1. 1. Introduction to CSS
  2. 2. 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?
  3. 3. 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)
  4. 4. The External Style Sheet<head><link rel="stylesheet" type="text/css"href="mystyle.css" /></head>
  5. 5. 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.
  6. 6. 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.
  7. 7. 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;}
  8. 8. 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
  9. 9. Review: How much do you remember?
  10. 10. 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

×