advanced css: (layered) display & presentation pa 70b – giordon stark
Post on 22-Dec-2015
218 Views
Preview:
TRANSCRIPT
ADVANCED CSS: (LAYERED) DISPLAY & PRESENTATION
PA 70b – Giordon Stark
Table of Contents
Review of Last TimeIntroduction to LayoutsElaboration on <div> and <span>More CSS PropertiesLet’s learn some CSS!
Display, Dimension, Position, LayeringPractice Sessions
Recreation and Adaptation: Getting rid of tables
BECAUSE NOT EVERYONE HAS PERFECT MEMORY RECALL.
A Review of Last Time
Terminology
Rule Contains the selector and one or more declarations
Selector A group of styles – creates the link between the
element and rules to apply 3 types: HTML Tag Selector, Class Selector, ID
SelectorDeclaration
A property and value pair, uses the format “property:value;”
W3C:
The CSS “Recipe”
Internal CSS<style type="text/css">
/* CSS here */</style>Inline CSS (use sparingly, if at all!)<tag1 style=“<!--declarations here -->” />External CSS
File Type: .css No necessary ‘wrappers’ <link rel="stylesheet" type="text/css"
href="mystyle.css" />
Selectors
Tag Selectors – Multiple Elementshr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
Class Selectors – Multiple Elements.headline {font-family:arial; font-size:14px; color:red} HTML:
<b class="headline">stuff</b><i class="headline">other stuff</i>
ID Selectors – Singular Element#layer1 {position:absolute; left:100;top:100; z-Index:0} HTML:
<div id="layer1">stuff</div>
Multiple Style Sheets + Cascading
Styles are specified inside an HTML element inside the head section of an HTML page in an external CSS file
When you have multiple style sheets for one page, including both internal, external, and inline; CSS cascades all the rules into one singular rule.
The hierarchy is (from highest priority to lowest) Inline Style Internal Style Sheet External Style Sheet Browser Default
An example: http://w3schools.com/css/css_howto.asp
Inline Elements versus Block Elements
Block level elements include Heading Division Paragraph Blockquote Ordered and Unordered Lists
Inline elements include Span Anchor
Block Level and Inline Elements
Block Level elements display text on its own line (line breaks before and after) – my definition of ‘layout’ elements
Rules Block Level elements can contain other block-level elements and inline
elements Inline elements cannot contain block-level elements
Bad Example<div>
<a href=“#”><h1><span>Heading</span></h1></a></div>
Fixed Example<div>
<h1><a href=“#”><span>Heading</span></a></h1></div>
Block Level and Inline Elements
In CSS Inline elements are used for changing
Colors (background and text) Font styles (font weight, text decoration, font family, etc..)
Block level elements are used for changing Positioning declarations (locational) Dimensional declarations (width and height) Padding and Margins
Major Differences Block elements take 100% of available width (of their
parent element) Takes whatever height it needs to fill its content
Some Tips and Tricks
Let’s do a quick refresher and learn some extra tricks on our CSS coding: http://www.thefloatingfrog.co.uk/2008/09/10-css-short
hand-techniques-youll-use-everyday/ http://carsonified.com/blog/features/design/creating-s
exy-stylesheets/ http://stylizedweb.com/2008/03/12/most-used-css-trick
s/ http://www.smashingmagazine.com/2008/11/12/12-pri
nciples-for-keeping-your-code-clean/
GOOD LAYOUTS, GOOD CSS, GOOD TIMES…
Introduction to Layouts
Good Layouts
What should a good layout have? Header Footer Content Left and/or Right Columns Navigation Menu Logo/Banner
Where might these be on a page?
CSS and Layouts
A major benefit is that you’re no longer forced to use tables to create layouts with complete control http://www.yourhtmlsource.com/examples/positioning
2.html http://www.howtocreate.co.uk/tutorials/positionExamp
le.phpWe use block level elements (divs) and inline
elements (span) to make these layoutsDon’t forget about the box model, everything
is made possible!
WHY DO WE CARE ABOUT THESE TWO?HOW ARE THEY GOOD FOR LAYOUTS?
WHY DO WE CALL THEM “CLEAN SLATES”?
Division and Span
Division and Span
Div (short for division) divides the content into individual sections.
Each section can then have its own formatting, as specified by the CSS.
Div is a block-level container, meaning that there is a line feed after the </div> tag.
Division and Span
Span is similar to div in that they both divide the content into individual sections.
The difference is that span goes into a finer level, so we can span to format a single character if needed.
There is no line feed after the </span> tag.
The Clean Slates
Have you ever thought that it would make sense to have a ‘blank slate’ html tag that had absolutely zero styles?
For Block Level elements: division tag. <div></div>
For Inline elements: span tag. <span></span>
Neither really have any HTML attributes applied by default which makes them perfect canvases for styling pages.
Division and Span
So exactly how are they used in HTML? http://essentialkeystrokes.com/css-classroom-div-vs-sp
an/ http://www.html.net/tutorials/css/lesson8_ex2.asp
BECAUSE THE WORLD IS NOT ENOUGH…
More CSS Properties!
CSS Properties
Mainly, we’ll be talking about division and span. In fact, we’ll use website tutorials to make the point clearer… because nobody explains it better than these guys (other than me).
Let’s learn about the following properties: position: {absolute, relative, static, inherit}; top/left/right/bottom: {number}; float: {left, right, both, none}; clear: {left, right, both, none};
CSS Properties
Websites http://www.yourhtmlsource.com/stylesheets/csslayout.
html http://www.brainjar.com/css/positioning/ http://www.barelyfitz.com/screencast/html-training/css
/positioning/We’ll summarize key concepts on the next
few slides
CSS Properties
Float Push it as far as possible to the right or to the left, and
allow text to wrap around it Required with variable height columns
Clear Used on a floated element to force it below adjacent
floatsThese are very hard to master. If you ever get
confused on how they work, Google “CSS Floats” for examples. http://css.maxdesign.com.au/floatutorial/tutorial0801.ht
m http://css.maxdesign.com.au/floatutorial/tutorial0901.ht
m
CSS Properties
Absolute & Fixed Positioning Position is determined by its offset values (top, left, right,
bottom) from its containing element Removed from the normal flow The containing block is the nearest element outside it that has
a position of absolute, relative or fixed If there is no such element, the browser window is used If it is fixed positioning, the browser window is ALWAYS used
Relative Positioning Position is determined by its offset values Not removed from normal flow The containing block of their closest, block-level ancestor
For absolute elements the containing element can be an inline element (not for relatively positioned elements)
CSS Properties
Stacking Order – use the z-index! Two things determine the stacking order: the stacking
context and the z-index value An element with a higher z-index appears in front of
an element with a lower z-index When two elements have the same value (or if neither
has been assigned a value) the source order is used Stacking context also determines the stacking order
http://www.brainjar.com/css/positioning/stackdemo.html
Finally, some elements just get overlapped regardless of z-index: “Overlapping plug-ins”
Summary
For a quick reference to other properties and their values, just use w3schools website: Categorized (in particular, look at pseudo-elements)
http://www.w3schools.com/cssref/default.asp
For a list of supported units http://www.w3schools.com/cssref/css_units.asp
For a (short) list of colors http://www.w3schools.com/cssref/css_colors.asp
For a list of selectors http://www.w3schools.com/cssref/css_selectors.asp
When in doubt, Google is your friend.
RECREATION AND ADAPTATION( D E S T R O Y I N G TA B L E S E V E R Y W H E R E ! )
Practice Session
Baby Steps – The Exercise
floatingLayout.htmlWe’re going to recreate this layout step-by-
step. The layout we need to re-create is:
http://www.ugcs.caltech.edu/~kratsg/PA070b/Lecture3/examples/floatingLayout.png
THE START OF YOUR PROJECT!
Exercise/Homework
Exercise/Homework
No image! This is the first week of creating your layout page (one page) for your student website. To get started…1. Visualize your site layout, draw it. Where do you want your
(vertical/horizontal) navigation? Where’s your content? What colors do you want to use? (find those colors).
2. Develop a skeleton using the simplest of html elements: div, span, paragraph, heading, anchor links, lists.
3. Develop the CSS, starting with dimensions and positions, then working down to the coloring. (It helps if you add borders to the elements you’re moving, so you can see where they are).
4. Add in colors, themes, styles, and filler content. Personalize it and make it unique.
Exercise/Homework
You will be graded on the following criteria: Creativity
of layout – how original is the layout? of color scheme – how well do the colors blend together?
Clash? Efficiency
How well is your layout separated from your styles? 100% Efficiency: http://www.csszengarden.com/
Etiquette Is your code presentable, easy-to-read, indented, and
structured properly? Does it conform to standards of XHTML strict coding?
Example (don’t mimic this)
Another Example (don’t mimic this)
top related