CSS The Definitive Guide Chapter 8 Allows one to define borders for p aragraphs h eadings d ivs a nchors i mages a nd more CSS makes it easier Set elements apart from others Accentuate its appearance ID: 227835
Download Presentation The PPT/PDF document "Padding, Margins, and Borders" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Padding, Margins, and Borders
CSS The Definitive Guide
Chapter 8Slide2
Allows one to define borders for paragraphs
h
eadingsdivsanchorsimages and more
CSS makes it easier…Slide3
Set elements apart from othersAccentuate its appearanceMark certain kinds of data as having been changed
Or any other number of other things
These borders can..Slide4Slide5Slide6Slide7
Is defining regions around an element that control how the border is placed in relation to the content and how close other elements can get to that border. In short the area between an element and its border is the padding.
PaddingSlide8
Is that area that is beyond the border
Margins..Slide9
All of these properties affect how the entire document is laid out and affect the appearance of a given document!
Padding, Borders, and MarginsSlide10
All documents generate a rectangular box called the element box.
Each box influences the position and layout of other element boxes.
By default boxes do not overlap each other so that they are visually rendered correctly.Basic Element BoxesSlide11Slide12
The width of an element is defined as the distance from the left inner edge to the right inner edge and the height is the distance from the inner top to the inner bottom
Let check out some examples at
w3schools.comWidth and HeightSlide13
The separation between most normal-flow elements occurs because of element margins.
Setting a margin creates extra “blank space” around an element.
“Blank space” refers to an area in which other elements cannot also exist and in which the parent element’s background is visible.Look at page 211 paragraphs with and without margins.MarginsSlide14
Can accept any length of measurement, pixels, inches, millimeters, or ems.Default value is 0 (zero)
Browsers come with pre-assigned styles for many elements and that is the same with margins. In CSS-enabled browsers margins generate a “blank line” above and below the paragraph element.
You must declare margins for the p element if you don’t want the browser to apply the default.MarginsSlide15
p {
background-color: silver;
margin: 10px;}10 pixels of space have been added to each side of the content area.
Example of using length with margins…Slide16
img
{
margin: 1em;}This would put 1 em of space surrounding all images. Using margins to set extra space around an image…Slide17
1em is equal to the current font size. 2em means 2 times the size of the current font.
if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
Remember what em equals?Slide18
What if you wanted different spaces on each side of an element. That can be done as well.
H1 {margin: 10px 20px 15px 5px; }
The order is important! margin: top right bottom left
The four values go clockwise = TRBL
Different space on each side..Slide19
Percentages are computed in relation to the width of the parent element, so they change if the parent element’s width changes in some way.
Also margins can mix percentages with length values:
h1 {margin: 0.5em 10% 0.5em 10%; }Percentages and MarginsSlide20
p {margin; 0.25em 1em 0.25.em 1em; }
Can be the same as:
p {margin: 0.25em 1em; }The two values are enough to make the four.If the value left is missing, use the value provided for right.If the value for bottom is missing, use the value provided for top.If the value for right is missing, use the value provided for top.
Replicating valuesSlide21
It is possible to set a margin on one side only.
h
2 {margin-left: 3em;} Or maybe two sidesh2 {margin-left 3em; margin-bottom: 2em;}Single-Side MarginsSlide22
Combining negative and positive margins can be useful. Paragraphs can be made to “punch out” of a parent element. A creative way to display text.
Negative and Collapsed MarginsSlide23
Borders
Inside the margins are the borders.The border of an element is one or more lines that surround the content and padding of an element.The background of the element will stop at the out border edge. Background does not extend into the margins, thus the border is just inside the margin.Slide24
Every border has three aspects
width or thickness
Style or appearanceColorDefault width value = medium (usually 2 pixels)
Default style is zero. If a border has no style it doesn’t exist.
Default color value is foreground color of the element itself. If no color is declared for the border, it will be the same color as the text.
BordersSlide25
Without border styles there would be no borders.
In CSS there are 10 distinct non-inherit styles for the property border-style.
None | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | {1.4} | inheritBorders with StyleSlide26Slide27
It is possible to define more than one style for a given border.
p.new1 {border-style: solid dotted dashed solid;}Slide28
Border widthsSlide29
The border-color property sets the color of an element's four borders. This property can have from one to four values.
Examples:
border-color: red green blue pink; top border is redright border is greenbottom border is blue
left border is pink
border-color: red
green blue;
top
border is red
right
and left borders are green
bottom
border is blue
border-color: red
green
;
top
and bottom borders are red
right
and left borders are
green
border-color:red;
all
four borders are red
Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.Slide30
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-color
Try coding border-style and border-colorSlide31Slide32Slide33
Padding
Padding for the element box is between the borders and content area.
Accepts any length value or percentage value.If all h1 elements are to have 10 pixels of padding on all sides it would be written as:h1 {padding: 10px; background-color: silver;}Slide34
Padding
By default elements have no padding.Slide35Slide36
The ability to apply margins, borders and padding to any element is one of the things that sets CSS so far above traditional web markup.
SummarySlide37
Please have one of your h1 elements have a different space on each side using the margin values of your choice.
(must have 4 values TRBL)
Please make at least two of your headings have a different color and different style.Please also use padding in your code.Please use a border around one of your paragraphs. Please use the 3 attributes of the border. (with, style, color)Please provide comments with including date of coding as today’s date.Lab Tonight: