CSS Layout Cascading Style Sheets

Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline sections with tag  Block elements vs. inline elements

CSS Review

CSS – Rules Review  CSS Rule Syntax has 3 parts:  Selector  Property  Value Selector PropertyValue Rule

What are the 4 types of selectors?  Any HTML tag (p, table, h1, etc.) – the rule applies to ALL tags of that type on the page  A #idName given to a tag – the rule only applies to the ONE tag on the page with that ID  A.className given to any tags on the page  A pseudo class such as:  a:hover{color:red;} /* hyperlink hover color */

CSS – tag What does it do for us? My title

Browser What will we see in the browser? How it works: Review mystyles.css #foo{ color:red; }.bar { color:blue; } h1.bar { bgcolor:yellow; } Hello World My header HTML File Hello World My header …

What we’ve done previously: Tables for layout Navigation links Content This required,, tags with lots of mental mapping and CSS rules No More! We’ll move to using blocks called divs requiring much less complexity

Where we’re going div block Steps: 1.Set width and height of each block 2.Set a property for side by side 3.Fill each with what you want Let's look at Amazon.com as an example

tag  Defines a division/block in an HTML page.  Most often used together with CSS to layout a web page " What's the fox say?

example  Say we are creating a web site for courses  We want a new section for each subject  Use a section for English, one for Math,...

Demo:  Follow along with me:  Create a new HTML page called layout.html  Create a new CSS page called layoutstyles.css  Add to the web page:  In your CSS file, give the div a background color  Keep an eye on its default behavior  Later we’ll adjust width and height

In class Exercise for  Add two sections with different background colors to this page  Define the background colors in your new layoutstyles.css  Remember:  div tags can have id or class attributes set like any other tag  When you have that working, show me  Then add more content inside the div, and set properties for border, background-image, etc.

tag  Defines an inline element used purely as a range for applying styles  Provides a way to add a “container” to a part of a text or a part of a document  You can use this container to add CSS styles to the content

example

Exercise for  Open layout.html  Add a section to text within a section  Define CSS styles for this section

Block vs. Inline Block Elements  Have line break before and after  Contain inline elements and other block elements  Examples:   ~ ,  ,, Inline Elements  Have no line break before and after  Contain text and other inline elements  Examples: 

Block vs. Inline  Block and inline elements flow through the HTML page differently  They therefore create different layouts  Different CSS styles need to be used to achieve desired layout  Block level elements normally start (and end) with a new line, when displayed in a browser whereas inline elements are normally displayed without line breaks.

Document flow – block element

Document flow – inline element

Document flow – combined

Exercise  Create a page that combines,, and other tags you already know  Give borders to the elements to show how the layout works.