The box model, layout and styling images

Week 9

the box model

the box model

• padding- the space in between the border and the content. Padding is added on to the total width of the box.
• margin- moves the "entire box" to the left, right, up or down
• border- a line that surrounds the the element. Borders are added on to the total width of the box

You can effect all four sizes of the box

padding

• padding-left: 3px;
• padding-right: 4px;
• padding-top: 5px;
• padding-bottom: 6px; 
• padding: 5px;
• padding: 3px 4px 5px 6px;

Margins

• margin-left:3px;
• margin-right:4px;
• margin-top:5px;
• margin-bottom:6px; 
• margin:5px;
• margin:3px 4px 5px 6px;

Margins

• Margins collapse!
• You can you negative margins (ex: margin-left:-20px;)
• You can only add left/right margins to inline elements- except for images.

Borders

• border-style (border-top-style)
• border-width (border-top-width)
• border-color (border-top-color)
• border: width, style, color;
• border-top: width, style, color;

Borders

To add rounded corners:

• border-radius:5px;
• border-top-right-radius:5px; 

• note: not supported in ie 8 or below

Borders

You can add a photo for a border:

• border-image:url(path to image), slice, border-image-repeat;
• border-image:url(kittens.jpg) 55 55 55 55, stretch;

Box sizing

• box-sizing: (content-box, border-box);
• width: (percentage, numerical value, auto, inherit)
• height: (percentage, numerical value, auto, inherit)

Overflow

By default, overflow is set to visible which allows content to "break" outside the box when it has a specific height.

• overflow: (visible, hidden, scroll, auto, inherit)

Display

You can change how an element is displayed

• display: (inline, block, none)

box shadow

• box-shadow: (horizontal offset, vertical offset, blur distance, spread distance, color)

box-shadow: 6px 5px 5px 6px #4444;

will have to use vendor prefixes.

css positioning and layout

the float property

• float: (left, right, none, inherit)

• Can be applied to any HTML element to position it on the page
• Used to create multi-column layouts
• img {float:left;} would position all elements to the left side of my page.

the float property

inline elements

• Always provide a width for floated text elements
• Floated inline elements behave as block level elements
• Margins on floated elements do not collapse

the float property

block level elements

• Always provide a width
• elements do not float higher than their original spot

the CLEAR PROPERTY

Clears floated elements and returns it to it's natural state

clear:(left, right, both, none, inherit)

floating multiple properties

• containing elements will not "enclose" floated elements by default. 
• floating the containing element is one fix
• setting the overflow: auto is another way to fix this

Using floats to create columns

Demo

Using CSS positioning

position: (static, relative, absolute, fixed, inherit)

You also have to specify where you what the element moved.

top, right, bottom, left

top: 10px;

Using CSS positioning

• static: default. Normal positioning within the document.
• relative: moves an element relative to it's original positioning. 
• absolute: elements are removed from the document flow and are positioned in respect to the browser window or containing element
• fixed: element stays "fixed" in one position as users scroll

Using CSS positioning

z-index: (number, auto, inherit)

• moves items up or down on the "z-axis"
• by default items are stacked at 1

CSS positioning

demo

page layouts

types of page layouts

• fixed: stay at a specific pixel width
• fluid: resize according to the size of the browser
• elastic: resize based on the proportional value of the text
• hybrid: combine fixed and scalable layouts

fixed layout

• easiest to accomplish as a beginner
• secures the design won't break
• does not adapt to screen size
• all widths and height will be in px

fixed layout demo

fluid layouts

• more advanced way of page layout
• site design "adapts" to the size of the browser window
• elements may "break" as site is scaled down
• more math
• all widths and heights should be in %

fluid layout demo

elastic layouts

• less popular than fixed and fluid
• allows flexibility in text size
• images and video don't scale
• hard to control the site width
• not cross device friendly

hybrid layouts

• use both % and px to create widths
• can be used to create a "responsive" site

Grid systems

using faux columns

styling images

styling images

You can control the width and height of an image via CSS

img {

width: 100px;

height: 200px;

}

img.large{

width: 100%;

height: 200%;

}

aligning images

You can also align images using the float property or by using margin: 0px auto to center them

img.left {

float:left

}

img.center{

display: block;

margin: 0px auto;

}

background images

• background-image: url ("images/backgroundimage.jpg");
• background-repeat: (repeat-x, repeat-y, or repeat)
• background-attachement: (fixed or scroll);
• background position: (left, right, top, bottom)

You can set images as background and control if they repeat and their position

background images

• background: #444 url ("images/backgroundimage.jpg") no-repeat top left;

You can also use the shorthand version

Order:

1. Color

2. Image URL

3. Repeat

4. Attachment

5. Position

background images

You can set an image as a background and repeat it as a pattern.

body {

background: url (images/background.jpg) no-repeat;

}

body {

background: url (images/background.jpg) repeat-y;

}

background images

You can also call multiple background images. The image called first will be placed infront.

background-image: url(kittens.jpg), url(dogs.jpg);

background-position: left top, center top;

background-repeat: no-repeat, repeat-y;

Sprites (image rollovers)

demo

CSS Gradients

CSS Gradients

New to CSS3, you can create radial and linear gradients

background-image: linear-gradient (180deg, yellow, green)

background-image:radial-gradient (center contain yellow green)

CSS Gradients

Gradients can be difficult to understand and create, but there are tools out there that will help you generate them:

http://css3generator.com/

http://www.colorzilla.com/gradient-editor/

http://www.cssbuttongenerator.com/

PSEUDO CLASS SELECTORS

PSEUDO CLASS SELECTORS

Are applied to already existing classes

• :link - applies a style to an unclicked link
• :visited - applies a style to an already clicked link
• :focus - applies a style when an element is ready for input
• :hover - applies a style when a link is hovered over with mouse
• :active - applies a style when the element is being clicked

PSEUDO ELEMENT SELECTORS

Are applied to already existing classes

• :first-line (color, font, background, word-spacing, letter-spacing, text-decoration, vertical-alignment, text-transform, line-height)
• :first-letter (color, font, text-decoration, text-transform, vertical-align, padding, background, margin, line-height, border, float, letter-spacing, word-spacing)

PSEUDO ELEMENT SELECTORS

• p:first-letter{color:green;}
• p:first-line{font-size:18px}

PSEUDO ELEMENT SELECTORS

• :before - inserts content before the specified element
• :after- inserts content after the specified element
• note: the above does not work in IE7 and below

p:before{

      content:"Once upon a time";

      font-weight:bold;

      color:purple;

}

ATTRIBUTE SELECTORS

• element[attribute]: selects an element that has a the specified attribute

img[title]{border3px solid #555;}

ATTRIBUTE SELECTORS

• element [attribute="exact value"]

input[type="text"]{border:1px solid #444;}

img[title="kittens"]