1 / 9

Cascading Style Sheets

Learn how to structure and design web pages without using tables by using CSS and the display property. This tutorial provides step-by-step instructions and examples. Improve your web design skills now!

eshaver
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu

  2. Using “display: inline” • W3 Schools does it best… • http://www.w3schools.com/css/tryit.asp?filename=trycss_display

  3. How to Structure • If you’ve peeked at some of my code, you’ll see I make use of <div> tags a lot. • You can also use <span> tags for short passages you’d like to change.

  4. Possible Structures • Separate Header elements from Content and Footer. • You may also want to include a Navigation element. • Break up your page into logical organizations. This way, you can manipulate many different parts of the document or the whole document.

  5. Design • If you have a good document design, you can just change the style sheet whenever you want to change your design. You won’t even have to touch your HTML again!

  6. Tables vs. DIVs • Tables aren’t very flexible when designing pages. • DIV tags can be directly manipulated through CSS. • What if your manager wants the design of a page to change and everything is controlled by tables? What if he wants the bottom row of every design to now be at the top?

  7. Example 1 • http://cpu.rachelober.com/lecture3/example1.html

  8. Common Layout Suggestions • http://www.intensivstation.ch/en/templates/

  9. Lab #3: Designing Without Tables • http://cpu.rachelober.com/lab3 • Objective: • Change a <table> layout into a <div> layout! • Stock Images for use: • http://cpu.rachelober.com/stock

More Related