Look at CSS Basics and Syntax
- CSS syntax
- Selector
- Declaration - with property and value
Look at HTML Basics and Syntax
- HTML syntax
- Element (tag), attribute and value
- div and span: extra tags for css
- Element (tag), attribute and value
Techniques - CSS Styles panel in Dreamweaver 8
-
Tag selector in status bar
- All tab
- Click arrow/plus to expand
- Click on a rule to see property and value in properties panel
- and a Properties pane that lets you edit CSS properties for the rule
defining the selection.
- changes you make in the Properties pane are applied immediately
- set properties in alphabetical order
- grouped into categories (default)
- alphabetical list of all available properties
- set properties are displayed in blue;
- properties irrelevant to a selection are displayed with a red strike-through line.
- Holding the mouse over a rule that is irrelevant displays a message explaining why
Techniques - CSS Styles panel in Dreamweaver 8
- Current tab
- Click in the
.advertparagraph in document window - CSS panel shows you a Summary of properties for the current selection
- shows the properties for all rules that directly apply to the selection
- a Rules pane that displays the location of selected properties (or
a cascade of rules for the selected tag, depending on your selection),
- About view
- name of the rule
- name of the file containing the rule
- or Rules view
- displays a cascade, or hierarchy, of all rules that apply
directly or indirectly to the current selection
- displays a cascade, or hierarchy, of all rules that apply
directly or indirectly to the current selection
- About view
- Click in the
- changes you make in the Properties pane are applied immediately
Techniques - Box model
- EVERY element is has a box
- a box can be given borders,
- transparent margins outside the borders (keeps other boxes away),
- and transparent padding inside the borders (keeps the content away from the edges of the box).
- Margins, borders and padding can be applied to each side of the box separately.
- Inside the padding is the "content area", which holds the content of the box.
Techniques - Box model
- IE 5 vs. standard box model: In IE5 right and left border and padding
added to the set width of 100px
- Microsoft corrected IE's box model in IE6
- Only if it is in "standards mode", DOCTYPE declared
- Open 2positioning/box.html and preview in Firefox.
Use Web Developer toolbar: CSS/Use Border Box Model to see broken IE rendering difference.
Background graphics
- Position
- Set horizontal and vertical: use pixels; keywords - left, top, right, bottom; or percent of container. Don't mix keywords and measurement.
- Position with percent: The point 20% across the image is aligned
at the point 20% across the container.
- HTML tree location determines where image lies in layers
hicskdesign 3D Model
Descendant selectors
- HTML tree and descendant selectors
- select elements that are descendants of another element in the document
tree:
ul em {} - Isolate a particular section of tags: all links in the navigation bar, all other links unaffected
Descendant selectors
Parent and child, adjacent siblings
- the blue div is:
- a child of the <body> element
- a parent of the <ul> element
- an ancestor of the <ul> and <li> elements
- a sibling of the other div element (who shares the same parent - the <body> element).
- syntax:
- child selector used to select an element that is a direct child
of another element (first unordered list, but not nested ul):
div > ul {} - and adjacent sibling selector used to select the sibling immediately
following an element (second paragraph, but not first):
p + p {}
- child selector used to select an element that is a direct child
of another element (first unordered list, but not nested ul):
Design / workflow / style sheet organization
- Wireframes/prototyping to comps
- Organize your CSS
- HTML tree
- Group all elements together, i.e. all descendant selectors on h3
- Group all elements by div, i.e. all elements that control content-sub
- Organize CSS for ease of future maintenance, link to main style sheet
and use @import for hacks
