• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lecture2
 

Lecture2

on

  • 479 views

 

Statistics

Views

Total Views
479
Views on SlideShare
479
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Lecture2 Lecture2 Presentation Transcript

  • Introduction to HTML and CSS Lecture 2
  • Goals CSS CSS Classes Floating elements Cascading elements
  • CSS Definition: Cascading Style Sheets CSS defines how HTML elements are displayed.
  • Three ways to define CSS Styles
  • Inline-styles You can add a ‘style’ attribute to any HTML element and define your styles there <div style=”width:50px;height:50px;”></div> <div width=”50” height=”50”></div>
  • Internal Style Sheet You can also place a <style> tag in the <head> portion of your HTML document and define your CSS there <head> <style type=”text/css”> … </style> </head>
  • External Style Sheets The most common place for CSS is an external style sheet Which is a file with a .css extension To access this file you will need to use the HTML <link> element You place a <link> between your HTML <head> tags <head> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head>
  • CSS Syntax A typical CSS statement looks like this: SELECTOR { DECLARATION; PROPERTY: VALUE; } For Example: h1 { color: #FFFFFF; } Selector-> h1 Declaration-> color: #FFFFFF; Property-> color Value-> #FFFFFF
  • CSS Syntax Cont... THANKS W3SCHOOLS.COM !!
  • CSS Syntax Cont. CSS declarations always end with a semicolon, and curly brackets surround declaration groups. Do not leave spaces between property values and units THERE’S A SPACE HERE incorrect width: 20 px; correct width: 20px;
  • Open Core-Concepts sheet in Dropbox Dropbox/Lecture2/CSS core concepts.doc Go to page 5: Common CSS Attributes
  • CSS Classes A special non-unique case for elements. Classes should be used when multiple elements require the same styling
  • <html> <head> <style type=”text/css”> .box { width: 50px; height: 50px; } </style> </head> <body> <div class=”box”></div> <div class=”box”></div> <div class=”box”></div> </body> </html>
  • CSS Classes Cont... CSS classes are declared with a period ‘.’ followed by a unique name Such as ‘.box’ in the previous example In CSS if you follow a class declaration with a selector you can define specific declarations for that element
  • CSS Classes Cont... Where ‘.box’ is the class, ‘p’ is the selector and ‘color: green;’ is the declaration .box p { color: green; }
  • Let’s change it up a bit Add background color to the boxes Add a border to the boxes Add margin to the boxes Float all boxes left
  • Exercise Floating Objects
  • Cascading Style Sheets When an HTML element has multiple styles defined on it the one with the highest priority will be chosen and override the rest.
  • Cascading Style Sheets Cont... An inline style has the highest priority and will override any other CSS defined Internal style sheet External style sheets These are typically declared before the internal style sheets Browser default options are at the bottom of the list, and will have the lowest priority.
  • Cascading Example
  • Helpful links http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/css_syntax.asp http://www.w3schools.com/css/css_id_class.asp http://www.w3schools.com/css/css_float.asp
  • Homework Implement the design for the three floating blocks