Cascading Style Sheets - Page Layout - Part 2

Cascading Style Sheets - Page Layout - Part 2 - CIS 4004:...

Info iconThis preview shows pages 1–7. Sign up to view the full content.

View Full Document Right Arrow Icon
CIS 4004: CSS – Page Layout – Part 2 Page 1 © Dr. Mark Llewellyn CIS 4004: Web Based Information Technology Spring 2011 Cascading Style Sheets – Page Layout - Part 2 Department of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs2585/spr2011
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CIS 4004: CSS – Page Layout – Part 2 Page 2 © Dr. Mark Llewellyn The CSS Box Model bottom border Content bottom padding bottom margin left margin right margin top margin top border left border right border top padding left padding right padding
Background image of page 2
CIS 4004: CSS – Page Layout – Part 2 Page 3 © Dr. Mark Llewellyn It can get quite tedious writing a separate style for each of the four sides of an element, whether you are specifying margins, padding, or borders. CSS provides several different shorthand ways to specify these properties within a single declaration. In any shorthand notation the order is always top, right, bottom, left. So instead of writing: {margin-top:5px; margin-right:10px; margin-bottom:8px; margin-left:4px} You can write: {margin: 5px 10px 8px 4px;} An Aside – CSS Shorthand Notation
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CIS 4004: CSS – Page Layout – Part 2 Page 4 © Dr. Mark Llewellyn Note that there is just a space between each of the values, no delimiters such as a comma are used. You also do not need to specify all four values when using the shorthand notation. If you do not provide all four values, the opposite side’s value is used as the missing value. For example: {margin: 12px 10px 6px;} will set the missing value for the left margin as 10px which is the value that is specified for the right margin. Similarly: {margin: 12px 10px;} will set the missing bottom margin to 12px and the missing left margin to 10px. An Aside – CSS Shorthand Notation
Background image of page 4
CIS 4004: CSS – Page Layout – Part 2 Page 5 © Dr. Mark Llewellyn If only a single value is specified, such as {margin: 12px;} then all four sides are set to this single value. Note when using the shorthand notation, it is not possible to set only the bottom and left margins without providing some values for the top and right, even if those values are both zero. In cases such as this, you can write 0 without supplying a value type, such as: {margin: 0 0 4px 8px;} The same shorthand rules apply to padding and border, as well as margin. An Aside – CSS Shorthand Notation
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CIS 4004: CSS – Page Layout – Part 2 Page 6 © Dr. Mark Llewellyn You can adjust three different aspects of the box with CSS: margin , border , and padding . For the margin you can set the distance between this box and adjacent elements in the markup. For
Background image of page 6
Image of page 7
This is the end of the preview. Sign up to access the rest of the document.

Page1 / 45

Cascading Style Sheets - Page Layout - Part 2 - CIS 4004:...

This preview shows document pages 1 - 7. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online