css class 2 -add margins to elements on a page. -set width and height of elements. - css shorthand...
TRANSCRIPT
![Page 1: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/1.jpg)
CSS Class 2
-Add margins to elements on a page. -Set width and height of elements. -CSS shorthand properties for box model.
-Style links.
-Style tables.
-Replace bullets on a list.
-Control indentation of lists.
![Page 2: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/2.jpg)
Review Definition
• Block element: – Has a space above and below it on the page
![Page 3: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/3.jpg)
Add Margins to Elements on a Page
• margin
![Page 4: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/4.jpg)
What the Margin Does
• Defines area outside the box
• Separates elements from one another on the page
![Page 5: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/5.jpg)
Here’s Someone Who is Annoyed About a Margin
![Page 6: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/6.jpg)
How to Set Margins
• Margin-top, margin-bottom,
Margin-left, and margin right
Set margins the same as padding.
Use any unit, but px most common
Always provide unit of measurement except when setting for “0”
![Page 7: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/7.jpg)
Margins and Paragraphs
• With vertical margins, they will collapse into each other (see p. 305)
• With horizontal, the distance between two paragraphs is:– Top margin of lower paragraph– Bottom margin of upper paragraph
• If you are trying to eliminate space, you must work with both.
• Solution is to set to 0
![Page 8: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/8.jpg)
Set Width & Height of Elements
![Page 9: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/9.jpg)
Set Width & Height of Elements
• By default, most block elements are set to a width of 100% of their parent element– An element that is the direct child of the body will
have a width of 100% of the body– It will stretch across the browser window
• Table cells are set to a width that is a calculation of the minimum width needed to display cell content and the width needed to make up its part of the width of the table’s row
![Page 10: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/10.jpg)
CSS to the Rescue
• Width property allows designers to override the default setting and specify a width to be used by the element
• All valid units of measurement allowed• Most often:
– Px used to set exact widths– Percentages to allow the element flexibilityto expand or collapse based on the width ofbrowser window
![Page 11: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/11.jpg)
Caution on Setting Height
• Element heights are usually as big as needed to fit contents
• CSS has height property to offer more control• Why:
– If you use percentage for the width, the height of text will vary depending on browser’s width
– Setting height in this case can result in a large empty space at bottom of element’s block (on some browsers)
– Designers often avoid setting height
![Page 12: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/12.jpg)
Style Links
• Concept of pseudo-, as in pseudo-class and pseudo-elements
• What is pseudo-class?– A CSS special selector that exists for styling
links in a certain order of state– That states are:– link, visited, hover, active
![Page 13: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/13.jpg)
States Defined
• Link when first visited
• Visited when link has already been clicked
• Hover when mouse is over it
• Active when it is being clicked
![Page 14: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/14.jpg)
Syntax for Using Pseudo-elements
• a:link {
font-weight: bold;
color: #5e7630;
text-decoration: none;
padding-left: 3px;
padding-right: 3px; }
![Page 15: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/15.jpg)
Syntax for Visited
a:visited {
font-weight: bold;
color: #5e7630;
text-decoration: none;
padding-left: 3px;
padding-right: 3px;
![Page 16: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/16.jpg)
Syntax for Hover
a:hover {
color: #000;
background-color: #5e7630;
text-decoration: underline;
}
![Page 17: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/17.jpg)
Syntax for Active
a:active { background-color: #fff;
}
![Page 18: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/18.jpg)
Text Decoration
• none• underline• overline• line-through
![Page 19: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/19.jpg)
Text Decoration, cont.
• None hides the underline
• Underline brings it back
![Page 20: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/20.jpg)
Style Tables
![Page 21: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/21.jpg)
Inheritance
• Every table is made up of:
– table– tr– td
![Page 22: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/22.jpg)
Nesting & Inheritance• Tr has to be nested
within table:– Therefore all
properties that apply to former apply to latter
• Same applies to td but it inherits from table and tr
• Add in thead, tfoot, tbody
• <table>
• <thead>
• <tr>
• <th>Region</th>
• <th>Number of Parks</th>
• <th>States/Territories in Region</th>
• </tr>
• </thead>
• <tfoot>
• <tr>
• <td colspan="3">Total Regions: 7; Total Parks: 482</td>
• </tr>
• </tfoot>
![Page 23: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/23.jpg)
Setting Borders
• Special effect with border
– Set to 50 px– Set color to blue for
top and bottom– Set color to red for left
and right
![Page 24: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/24.jpg)
Replace Bullets on List
![Page 25: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/25.jpg)
CSS List Styling Properties
• List-style-type allows change to default appearance of bullet
• Examples:– None– Disc– Circle– Square– Decimal
• List-style-image allows for replacement of bullet with image
• Image must be small or line height will increase
• Overcome inheritance with list-style-image changed to none
![Page 26: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/26.jpg)
Why Use Ugly Bullets?
![Page 27: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/27.jpg)
Control Indentation of Lists
• By default, unordered and ordered lists indent the individual items
• li is a block element, so indentation can be controlled by setting the padding or margin
• To achieve consistency across browsers, you must set margin-left and padding-left to the same value(set at ul or ol level, not ea. Ind’l item)
![Page 28: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/28.jpg)
Long List Items & Hanging Indents
• When the list item is long, to where does it wrap?
• Annoying if it wraps to the margin
• Good news: it doesn’t. By default, it wraps to align with the top item, not the bullet or number
![Page 29: CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f345503460f94c50fe4/html5/thumbnails/29.jpg)
Change by…
• Using list-style-position property
• Sets to inside
• Makes the bullet or number an inline element within the list item
• Since property is inherited from nested list, override it later by setting list-style-position to outside