VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 ______
CSS 3 - LAYOUT BASICS
A FUNDAMENTAL CONCEPT – WHAT IS MEANT BY CASCADING The cascade is how CSS resolves conflicts when more than one rule is applied to the same element 4 style sheets applying: Internal styles External styles sheet Internal styles Browserʼs default style sheet Inline will beat out all – WHY? It is lowest in the cascade. Order of CSS rules is important The later a rule appears in a style sheet the more weight it is given
MARGINS, BORDERS, PADDING See Ch. 10 – Web Standardistas Book
About spacing – the space around our elements The effect the relationship of one element to another.
The all important BOX MODEL All elements treated as boxes. Some are block-level Some are inline-level Each box is comprised of a content area and optional margins, borders and padding Up to now these have all be set by the Browserʼs default style
all these can be specified The width of an element includes all – e.g. Margin-left + border-left + padding left – element width + padding-right + border-right + margin right
Applying margins borders and padding
See short html page in Ch. 10
First pass – no margins – fits to left edge of page
Second pass - add background colour so we can see the block-level paragraph element
Third pass - Before we add margins we must remove margins set by the browserʼs default style sheet. Set margin on body and on p to margin: 0; Once this is done you can add margin: 40 px; This sets margin on all four sides to 40 pixels. This is CSS shorthand
Fourth pass – add border of 10px solid line and colour #666666. Note it is written border: 10px solid #666666 Text bumps right up to border
Fifth pass - add padding to make space between the border and the text Add 20 px.
So looking at this final iteration.
The width of the box is 40 + 10 + 20 + 400 + 20 + 10 + 40 = 540 pixels CSS Shorthand for margins, borders and padding Weʼve already seen it with the a:link { border_bottom:1px solid #9CC4E5 }
we could write it longhand as a:link { border-bottom-width; 1px; border-bottom-style; solid; border-bottom-color; 9CC4E5; }
applied to margins – all we need to write is margin: 0; p p { { margin: 0; margin-top: 0; } margin-right: 0; margin-bottom: 0; margin-left: 0; }
When specifying 0 as measurement no need for unit of measure Apply margins, borders, padding on all four sides – in clockwise order: TOP, RIGHT, BOTTOM, LEFT When top and bottom and left and right are the same shorten to: Margin: 20px 10px When each of the margins is different use this form: Margin: 20px 40px 60px 10px
In Class exercise: Apply this to a block quote on king_kong.html To differentiate the blockquote from the surrounding text. Play around with the blockquote { font-family: Georgia, sans-serif; font-size: 18px; font-style: italic; letter-spacing: 0.1em; margin-left:40px; border-left: 10px solid #EoDFDA; padding: 0 20px } DIVIDING UP A DOCUMENT - THE ALL IMPORTANT DIV Grouping information into related clusters e.g. header, content area and footer div and span elements are XHTML and styled in CSS
Look at king_kong.html reference page A long page with well structured semantic content and basic typography Its content falls into three divisions – header, content area and footer. We can use div and span elements in conjunction with id and class attributes As generic (non semantic) mechanism for adding structure • span is inline • div is bloc-level • Wrap div or span around existing markup and target style at the wrapped element
THERE ARE TWO USES FOR DIVs 1. id - To wrap and identify a single section on a web page – e.g. a content section
2. class - To wrap and classify one of a number of sections on a web page – e.g. blog entries
Then the element is targeted by CSS
#content { This is where the rules styling the content div are situated }
or
.blog-entry { This is where the rules styling the blog_entry div are situated }
NOTE: the CSS rule targeting an id is preceded by a #
NOTE: the CSS rule targeting a class are preceded by .
Choose names for ids or classes that have semantic meaning.
USING DIV ELEMENTS TO CREATE CSS LAYOUTS They break the web page into key sections
XHTML markup looks like this:
Use CSS to apply style to these different elements. Control layout by giving divs different widths, heights, changed background colours, and positioning them in the browser window.
Walkthrough in Web Standardistas Book - Ch. 10
Pass 1 – styling typography only Pass 2 – adds CSS rules to target the 4 div elements Set width on container to 550px Header, content and footer nested in container so setting width of container effects others Sets background-colour and adds padding on other divs Pass 3 – add declaration to body to remove margin from browser default style sheet. This resets the margin to 0 Pass 4 – Centre the container in browser window by adding margin: 0 auto; so the browser gives it top and bottom margins of 0px and centres it.
Pass 5 – centre the contents of header and footer Pass 6 - change background colour on header, content and footer. Make content the focal point with darker background. Set header and footer colour to same as background color on body. Pass 7 – final – add border to top of body and to base of container.
Note border on body expands to fill width of window while border on container only occupies 550 px (width of container div)
Using descendent selectors e.g. how to write a rule for a specific
element – e.g. in footer Sometimes called contextual selectors. #footer p { font-size: 11px; color: #383330 } Tells browser to look at any instance of the element p in the div footer and apply this rule
Styling details in the span element Span element is inline
The Famous Primateswebsite is a Web Standardistas production Wrapping the word Famous Primates in a span and giving it a class of “primate” we can write a CSS rule and target it at all instance of the class primate. .primate { text-transform: uppercase; font-weight: bold; }
Styling with Class attributes
Use a class attribute to add style to the image of King Kongʼs portrait.
The write a CSS rule to target only an image with the class of portrait .portrait { margin: 10px 0; border: 1px solid ##FFF7DD; padding: 4px; }
Try styling one of your pictures
ADDING BACKGROUND IMAGES WITH CSS
Can apply a background image to any element in XHTML including the pageʼs body element. Div elements, block quotes, paragraphs, lists and even inline level elements.
Background images can help break up a page and create more dynamic layouts. Simple patters can be repeated for a background texture
body { background-image: url(pattern.png); background-repeat: repeat;
Background image declaration provides a relative link to the image file url specifies the location of the file in relation to style sheet
Background repeat declaration instructs the browser to repeat the image along the x and y axes. Using repeat-x would repeat along x axis. Repeat-y repeats along y axis. no-repeat will display the background image only once with no repeat.
Specify a background colour in addition to the background image in case the user has display images turned off
Find well designed resources at http://www.kollermedia.at/pattern4u/
Use background images on other elements e.g. backquote to highlight the space in paragraph try adding background images to King Kong page www.webstandardistas.com/10/king_kong.html