TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a

Size: px

Start display at page:

Download "TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a"

Jasmin Lester
6 years ago
Views:

1 > > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any tag. s are "block" level tags. They have a line break after by default. span Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a span, you can apply the box model to any tag. spans are "inline" level tags. They have NO line break after by default. width/height The inner edges of the content box, and does not include the padding or margin. TAG STYLE SELECTORS height border border-style padding width border-top border-top-style padding-top max-height border-bottom border-bottom-style padding-bottom max-width border-left border-left-style padding-left min-height border-right border-right-style padding-right border-color border-width margin* border-top-color border-top-width margin-right* border-bottom-color border-bottom-width margin-left* border-left-color border-left-width margin-top* border-right-color border-right-width margin-bottom* *check margins in IE 6 &7

2 > > > > Floating > > > > Nesting Tags (from Smashing Magazine using new HTML5 tags)

3 > > > > Centering (this is the 10% auto margin) (this is the 10% auto margin) {width: 80%; margin-left: auto; margin-right: auto; > > > > Clear clear:left, right, or both Forces an object to not float, which maybe it is because the object next to it has a float to sit next to the object next to it. {width: 40%; {width: 40%; because of the float and the space available I am up here not down there Drop me down!!!! Add: clear: both (see below) instead: { clear: both;

4 > > > > Background and Shortcut background-color apply a background color background-color: teal; background-image apply a background image background-image: url(images/image.gif) background-repeat to not have the image repeat, choose background-repeat: no-repeat to have it repeat in a certain direction, choose repeat-x repeat-y background-repeat: repeat-x shortcut background: teal url(images/image.gif) no-repeat; > > > > Padding/Margin Shortcuts padding or margin all four sides padding: 10px top/bottom and left/right padding: 10px 20px each side like a clock padding: 10px 20px 5px 10px > > > > Div Border Style border: none dotted dashed solid double groove ridge inset outset Example {border-color: red; border-width: 1px; border-style: dotted; Shortcut {border: red 1px dotted; Border and padding inside box-sizing: border-box; this works for padding to go inside the box instead of default outside of box for both

5 > > > > CSS Positioning Options Static position:static This is default. The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the.html document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. #-1 { position:static; Relative position:relative Content also appears relative to where it is in the.html document, but you can scoot it around, for example: Let's move -1 down 20 pixels, and to the left 40 pixels: #-1 { position:relative; top:20px; left:-40px; If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. You can also use negative amounts, as done above. Absolute Uses specific coordinates (nailed down). top or bottom left or right position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move -1a to the top right of the page: #-1a { position:absolute; top:0; right:0; width:200px; Fixed Uses specific coordinates (nailed down), but does not move when you scroll. top or bottom left or right position:fixed When you specify position:fixed, the element is removed from the document and placed

6 exactly where you tell it to go, and does not move when you scroll. Let's move -1a to the top right of the page: #-1a { position:fixed; top:0; right:0; width:200px; > > > > Centering in the window with absolute positioning inside position:relative + position:absolute This allows you to center (in the window) a relative, and have the contents positioned absolutely..container {position: relative;.content {position: absolute; > > > > Stacking Order z-index Elements with a higher z-index will be on top of elements with a lower number. Think about it like floors of a building. z-index: 100; apply to one element that you would like to be above another element, but don't forget to add z-index: 1; to the other element > > > > Transparency For IE filter: alpha (opacity=30) Other Browsers opacity: 0.3 The same as above but for other browsers. List both. CSS3 rgba(255, 0, 0, 0.2) This creates a red box with 20% transparency. Apply to color (text) or background. > > > > CSS Overflow Options Visible Allows stuff to continue outside the box Hidden Clips the content if it is too long Scroll Adds a scroll bar, horizontal or vertical you can also say overflow-y: scroll to specifically add a scroll bar on the right. Auto Adds a scroll bar if necessary

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1