Unit 3 - Review

Topics 1. Tag, Attribute, Value 2. CSS Rule Syntax + link 3. Categories of Selectors 4. Inline vs Block Tags 5. CSS Layout 6. CSS Box Model 7. Border Properties, Padding/Margin Properties 8. Bold, Italic, Underline in CSS 9. Centering using margin:auto and Other Properties

Groups GroupTopics 1Tag, Attribute, Value, CSS Box Model 2CSS Rule Syntax + link, Centering using margin:auto 3Categories of Selectors, Bold, Italic, Underline in CSS 4Inline vs Block Tags, CSS Layout using Div 5Border Properties, Padding/Margin Properties, and Other Properties

Review Process 1. Groups of 5  Within each group nominate a leader  Each person in the group chooses one of the 5 review topics  Review your topic 2. Find your “expert group” on the topic that you chose.  As an “expert group” decide how each one of you is going to describe to your original group what your particular topic is  As a group create sample HTML code that demonstrates your area. Use all tags and attributes on Review screen. 3. Re-join your original group.  Each member of the group teaches what they learned in their “expert group” to the members of their group.

HTML

Tag, Attribute, Value   Heading 1  Opening tag Attribute Attribute value Opening tag Closing tag Tag content The forward slash indicates that the tag is closed

CSS

External Styles  Define external style sheet in the tag  Exercise  Open a new file in Notepad++  Select Language -> C ->CSS  Type a CSS rule for the tag that does the following:  Sets the color  Sets the font-family (i.e. verdana)  Save as mystyles.css where favorites.html is  Open favorites.html, add the tag to the page to point to mystyles.css

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

Categories of Selectors SelectorExampleDescription HTML tag P{ color:red; } Styles can be applied to each HTML tag ID #foo{ color:red; } Allows you to give a unique ID to any single element on the page Class.bar { color:blue; } Classes are a way to group some elements and give a style to only that group Pseudo-classa:link{ color:#FF0000; } CSS pseudo-classes are used to add special effects to some selectors Combinations of the above h1.bar { bgcolor:yellow; }

Inline vs Block Tags 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:  Example of Block tags:Example of Inline tags:

CSS Layout  CSS Layout is about using DIVs to define boxes on a page to act as a page template, and hold specific pieces of content that may change across pages. 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

CSS Box Model

Border Properties PropertyDescriptionExample Values border Specify thickness, style, color in order 10px solid #FF0000 border-colorColor to fill border#EDEDED border-widthWidth of border on all 4 sides10px border-styleStyle of border on all 4 sides none, hidden, dotted, dashed, double, groove, insert, outset, ridge, solid border Combined styles for width, style, color in that order 10px solid #FF0000 border-top, border-bottom, border-left, border-right Style for one side of the borders10px solid #FF0000 border-collapseremoves space between td borders. Use on border-collapse:collapse;

Padding/Margin Properties PropertyDescriptionExample Values padding Padding for all 4 sides: - One value for all 4 sides - In clock-wise order: Top Right Bottom Left 5px 2px 3px 3px 2px (T R B L ) padding-top, padding- right, padding-bottom, padding-left Padding for one side of the box10px margin Margin for all 4 sides: - One value for all 4 sides - In clock-wise order: Top Right Bottom Left 5px 2px 3px 3px 2px (T R B L ) margin-top, margin-right, margin-bottom, margin-left Margin for one side of the box 10px PropertyDescriptionExample Values float Set a block to one side of the page The floating block must have a width left, right, none clearTurns off float effectsleft, right, both, none display How an HTML element should be display. {display:none} hides the element and does not take up any space. inline, block, none visibilityShow or hide an element. {visibility:hidden} hides the element but still takes up the same space. visible, hidden

Centering using margin:auto  Set margin: auto  Set a specific width.

Bold, Underline, Italic Property Example Description text-decoration text-decoration:none; decoration values: none, overline, line-through, underline, blink font-style font-style:italic;italic text. Can also have value:normal; font-weight font-weight:bold;sets bold font. Can also have value:normal;

Other Properties Property Example Description color color:red;sets text color background-color background-color:#0000FF;sets background color background-image background- image:url('paper.gif'); sets the background image background-repeat background-repeat:repeat-x;sets how the background image repeats text-align text-align:right; sets horizontal alignment of text and other tags within the tag; can also use center, left vertical-align vertical-align:top; sets vertical alignment of text and other tags within the tag. can also use middle, bottom font-family font-family:"Goudy", "Garamond", serif; sets font names, chosen in order if they exist on the computer. use serif or sans-serif as generic font names font-size font-size:20px;sets font size list-style-type list-style-type:circle;sets bullet type for lists on and tag. Width width:30px; height:50px;sets width or height of the tag. Can also use %, width:50%; Float float:left; (must be combined with width) sets a div to allow content to flow to the right of it