Download presentation
Presentation is loading. Please wait.
1
Unit 3 - Review
2
Topics Tag, Attribute, Value CSS Rule Syntax + link
Categories of Selectors Inline vs Block Tags CSS Layout CSS Box Model Border Properties, Padding/Margin Properties Bold, Italic, Underline in CSS Centering using margin:auto and Other Properties
3
Groups Group Topics 1 Syntax and Selectors 2 Layout 3
Character Formatting CSS Properties 4 Element Layout CSS Properties 5 Font and Color/Background
4
Review Process Groups of 5
Within each group nominate a leader Each person in the group chooses one of the 5 review topics Review your topic 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. Re-join your original group. Each member of the group teaches what they learned in their “expert group” to the members of their group.
5
HTML
6
The forward slash indicates that the tag is closed
Tag, Attribute, Value The forward slash indicates that the tag is closed <hr /> <h1>Heading 1</h1> <body bgcolor=“#000000”> Opening tag Tag content Closing tag Opening tag Attribute Attribute value
7
CSS
8
External Styles Define external style sheet in the <head> tag
Exercise Open a new file in Notepad++ Select Language -> C ->CSS Type a CSS rule for the <p> 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 <link> tag to the page to point to mystyles.css
9
CSS – Rules CSS Rule Syntax has 3 parts: Selector Property Value
10
Categories of Selectors
Example Description HTML tag P{ color:red; } Styles can be applied to each HTML tag ID #foo{ 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-class a:link{ color:#FF0000; CSS pseudo-classes are used to add special effects to some selectors Combinations of the above h1.bar { bgcolor:yellow;
11
Inline vs Block Tags Block Elements Inline Elements
Have line break before and after Contain inline elements and other block elements Examples: <div> <p> <h1> ~ <h6> <ul>, <ol> <li> <table> <tr>, <td>, <th> Have no line break before and after Contain text and other inline elements Examples: <span> <a> <br /> Example of Block tags: Example of Inline tags:
12
Let's look at Amazon.com as an example
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 div block Steps: Set width and height of each block Set a property for side by side Fill each with what you want Let's look at Amazon.com as an example
13
CSS Box Model
14
Border Properties border-color Color to fill border #EDEDED Property
Description Example Values border Specify thickness, style, color in order 10px solid #FF0000 border-color Color to fill border #EDEDED border-width Width of border on all 4 sides 10px border-style Style of border on all 4 sides none, hidden, dotted, dashed, double, groove, insert, outset, ridge, solid Combined styles for width, style, color in that order border-top, border-bottom, border-left, border-right Style for one side of the borders border-collapse removes space between td borders. Use on <table> border-collapse:collapse;
15
Padding/Margin Properties
Property Description Example 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 box 10px margin Margin for all 4 sides: margin-top, margin-right, margin-bottom, margin-left Margin for one side of the box Property Description Example Values float Set a block to one side of the page The floating block must have a width left, right, none clear Turns off float effects left, 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 visibility Show or hide an element. {visibility:hidden} hides the element but still takes up the same space. visible, hidden
16
Centering using margin:auto
Set margin: auto Set a specific width.
17
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;
18
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 <ul> and <ol> 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
Similar presentations
