Embed Size (px)
Citation preview
Web Development with Cascading Style Sheets
Syntax
Activity
Lesson 1: Benefits: Why CSS
Separate formatting from structure Standards compliant for a variety of
platforms and devices and accessibility
Maintain websites efficiently Easy to change
CSS - basics Types
Inline Embedded Linked Imported
Rules (or components) Selector
Any valid html tag Declaration with one of more properties Value for each property
p { color: navy; }
SelectorSelector
PropertyProperty
ValueValue
DeclarationDeclaration
CSS-basics
Grouping selectors td{color: #000000} tr{color:#000000}
Could also be td, tr {color: #000000}
Comments /* code here */
Embedded Style Sheet
<html><head><title>Sample Page</title><style type="text/css"><!--body { background-color: #eee;font-size: 12px; }h1 { color: navy; }p { color: #333; }--></style></head><body><h1>Welcome!</h1><p>This is a sample paragraph for demonstration.</p></body></html>
Hides from old browsers
Create an embedded style sheet
CSS Resources W3Schools
http://www.w3schools.com/css/default.asp Colors on the web color wizard
http://www.colorsontheweb.com/colorwizard.asp#wizard
Adobe’s Kuler http://kuler.adobe.com/?
sdid=BOOWP&s_kwcid=adobe.kuler|1255313383
Robin Williams Non Designers Design Book Firefox web developers add-on
https://addons.mozilla.org/en-US/firefox/addon/60
Evaluate websites:With or without CSS?
http://www.karascupcakes.com/index2.html
http://www.chicagocupcakes.com/
CSS properties
Color Use Hexadecimal
Inheritance CSS elements inherit properties from
the parent elements. A paragraph <p> would inherit properties
from its parent <div>
Text Styles Styles
text-align vertical-align text-indent letter-spacing word-spacing line-height text-decoration text-transform
Font Style
font-family font-style font-weight font-size font
Units of Measurement Absolute
pixels – px inches – in centimeters – cm milimeters – mm points – pt picas – pc
Relative ems – em x-height – ex percent - %
Modifying Text – Design Advice
Robin Williams Non-designers Design Books
Format text on home page of our cupcake website Align copyright Justify paragraphs Indent and line height parpagraphs(if
desired) kerning – (line spacing of title)
Linked Style Sheet
All styles reside in an external document
The document is linked to one OR all pages in a website
Benefits Create look in one style sheet – appear
on all linked pages Make changes to that page – change
appears on all pages
Linked Style Sheet
To create the .css page, there should be no html tags – only the css instructions:
h1 {font-family: Georgia, "Times New Roman", Times, serif;font-weight: 900;letter-spacing:5px;color:#562500;font-size:36px;}
Save it as a .css On the webpage
<link href=“mystyle.css" rel="stylesheet" type="text/css" />
Create a linked style sheet Rename the template and link a .css we will
create from our embedded style sheet.
Review
Name some benefits to css: Separate formatting from structure Standards compliant for a variety of
platforms and devices and accessibility Maintain websites efficiently
Easy to change
What is the most common type of style sheet? Linked
Review
Name the rules or components of a css declaration
p { color: navy; }
SelectorSelector
PropertyProperty
ValueValue
DeclarationDeclaration
Review
Name some text styles text-align vertical-align text-indent letter-spacing word-spacing line-height text-decoration text-transform
Name some font styles font-family font-style font-weight font-size font
Lesson 2: Designing with Cascade Class allows you to distinguish one element from the other
The paragraphs for “seasonal specials” on our cupcake website should probably differ from the paragraphs for regular main content
Classes: are selectors that target styles more specifically than type selectors. Element.ClassName{declare style}Classes
Naming Classes Name you classes logically according to their function
div.header{styles to format headers} div.content{styles to format content}
Element Classes associated with a specific html element. Allows you to
distinguish one element from another of the same type <div class=“header”>
Classes Independent classes
Are not associated with any html element and can be shared. .importanttext{color:#ff0000; font-weight:500;}
Specificity Weight (or level of importance) of a given class – the
greater the weight the greater the importance http://www.htmldog.com/guides/cssadvanced/specificity/
Remember Classes can be used more than once on a page – they can
be repeated Create a class styles in our cupcake index page in
an embedded style sheet. You’ll have to put some basic formatting in as well. differentiate the main paragraph from the seasonal
paragraph Bonus: Add another “special” paragraph on your
own
ID Styles ID styles also allow you to give elements unique
names ID styles applied to only ONE element on a page.
wrapper main_content nav footer
Element IDs div#logo {assigned styles}
Independent IDs #myID {assigned styles}
Use # in the .css and id=“idname” in html
Browser Window
Planning your styles with IDTake Tutorial: http://ouray.cudenver.edu/~melynn/Templates/messageDesign.html
MainContent
Footer
Navigation } CSS “Wrapper”
Banner image
Activity
Add a primary wrapper div to give our content some nice margins We can also add some background
color to make the wrapper standout Extra credit: add a wrapper div to
our first practice file to create margins.
Contextual Style Allow you to target your styles to
elements within a specified parent-child structure In other words: they are nested within
other styles so they will inherit some properties from the parent.
Activity Create a contextual style for our
“Seasonal Special” paragraph. Make the $3.00 different from the rest of the paragraph BUT make sure to keep some of the formatting from the parent.
More about styles Target elements with specific attribute
element[attribute] {style here} td [width=“100”] {background-color:#??}
The “cascade” in style sheets Refers to the hierarchical order in which
different style sheet types interact and take precedence when styles conflict
1. inline styles2. embedded style sheets3. linked style sheets4. imported style sheets
Import style sheets External style sheets that are imported from within
another style sheet. @import “news.css” A note about the differences between link and @import
I don't really see the difference between these two elements......
There is lots. For example, link is html and @import is CSS.
> why would you use one and not the other?
If you want to import CSS from CSS, you use @import, if you want to linkstylesheet to html page, you use link.
You should also not that they are supported differently in browsers, butthat is usually not problem, unless your stylesheet breaks when externalstyle is not applied.
Inline styles
You can place styles directly in a html tag <span style=“font-size: 14px;”>
Least powerful in terms of controlling your documents from a central location.
May be needed in some instances testing styles to override the style sheet your style doesn’t require a new ID
Activity
Update the flavors page with our linked style sheet
Add your structure divs Place an inline style (or more) on the
“flavors” page
Review What is the primary purpose of the
“class” element? Allows you to distinguish one html element
from another What is the syntax for writing a class in a
style sheet? .myclass {format style here}
What is the primary purpose for the ID element? Also distinguishes one element from another
BUT can only be used once on the page
Review What is the syntax for writing an ID
element? #idname {format id style here}
What is an inline style A style placed directly in the html tag using
the attribute style= Name the hierarchical order in the
cascade of style sheets (which takes precedence if styles conflict):
1. inline styles2. embedded style sheets3. linked style sheets4. imported style sheets
Lesson 3: Designing Content Sections Margins and padding are a part of
each element on an html page. By controlling them, you can control
the spacing of elements and the overall layout and appearance of the page.
The box model defines how margins and padding interact with the html elements: html element
MarginPadding
Border
Margin The box model component that
defines the space between an element’s box and its parent element. Use any measurement that deals with
length. You can use the margins of the body tag
to set page margins but we will use the id “wrapper” we created for organization margin-top, margin-bottom, margin-left,
margin-right, margin
Margin
Collapsible margins: Two adjacent vertical margins take on
the property of the greater (they are not added)Horizontally, they are added together
Padding
Box model component that defines the space between an element’s content and its box padding-top, padding-bottom, padding-
right, padding-left, padding
Activity We will now organize our style sheet,
insert a header banner, set margins and padding to layout our page. margin auto in wrapper centers our content
– sets the margins are equal left and right width 748px in wrapper sets content equal
to banner and border – without a table! We don’t want to set padding for the
wrapper – we would then have space between any page background and a banner image. We’ll need to create more divs to set padding there.
Activity cont
Insert image in both main and flavors page
Add main-content and footer divs with margins and center footer
Color the page background blue Yikes! How do fix it so the content
background color is white??
Negative Margins
You can set negative margins for elements for interesting appearance Does not display in IE 6 which is still
widely used. http://ouray.cudenver.edu/~melynn/
portfolio/week6Design/index.html
Borders Borders can also help define a clean
layout Distinguish content sections Create and define white space Can control style color and width
Syntax for top,right,bottom,left border-width border-style border-color
Activity
Let’s set borders for our seasonal special, footer, and all images Watch the white space in ie when
setting your margins, paddings and borders
Floating Elements
Allows you to easily layout a page without the use of tables
float-left: forces the floated element to the left of adjacent elements
float-right: forces the floated element to the right of adjacent elements
Activity
We will float the seasonal special announcement on the home page. We will also need to set a width for this element.
Bonus: float the “Flavor of the month” paragraph on specials page to the right.
Content overflow Allows you to control content flow
that is too big for its elements content
overflow property behaviors: scroll (allows you to create scrollbars to
view all content) hidden visible auto inherit
Review Name the 3 components of the Box
element: Margin Padding Border
What elements can you assign margins and padding to? anything on a webpage
Why do you need to be cautious with a negative margin? It does not work in all browsers
Review Name the properties of borders you can
control size, style, color and which side of the box
What is float? Allows you to place elements to the right or
left of the adjacent elements What does clear:right do to the float
element? Does not allow anything to display to the right
of the floated element
Lesson 4
Positioning: family of css properties that specifically
addresses the position of elements on a page. Set the coordinates using the top and left properties
Absolute, relative and fixed
Absolute vs Relative Positioning
Absolute removes elements from their html flow.
The top leftmost edge of an element’s parent is the reference point on which the coordinates are based top:0px; left:0px sets elements to
upper left corner if body is the parent
Absolute vs Relative Positioning
Relative positioning with the above code would position the selected element 0px from the top of its NORMAL location in the document and 0px from the left
Activity: Create a navigation div with bullets and use absolute and positioning to create a page layout By setting the width of our divs, we will create
a fixed multi-column layout Then we’ll save the css as another name.
Fluid Layouts Fluid layouts is one that accommodates to
the size of the user’s browser. The layout will reflow so that’s its dimension
will increase or decrease to fill the space 3 methods
Set the element width using a relative unit of measurement
Use the left and right margins to control the displayed width of the element (vs width=Xpx)
Position the element, and use the right property instead of the left to establish its relationship to the browser window
Activity
We’ll now create layouts based on this tutorial: http://css.maxdesign.com.au/
floatutorial/tutorial0801.htm
Fixed Positioning **Does not work in IE** A layer is just a
div with a z-index (this allows you to layer above other items on the page)
We’ll use code from: http://hem.fyristorg.com/g-force/test/
fixedlayer.htm Why use?
Could place “Take survey here” link or a link to website help so that it is always visible.
Annoyance factor to decide upon.
Review What two positioning tools did we use to
position elements on the page? Absolute and relative
Explain absolute vs relative positioning Absolute removes elements from their html
flow Relative position the selected element in the
NORMAL flow or location in the document What is a fluid layout?
Decreases or increases with a change in browser window size.
Enhancing an existing design-the cursor You may want to change the
appearance of the cursor to further add to the usability of your website. We’ll add a help cursor to an “email for
questions” link.
Link Styles
Links can be modified by styles to such a degree that you may not need images for the links
Link States a:link a:visited a:hover a:active
List Styles
You can also customize lists to further enhance your navigation area
We will combine link and list styles (Topic E) to enhance the design or our navigation area.
Enhancing Forms
Styles can also improve the usability of your forms by highlighting the input fields and adding whitespace to bring attention to the areas a user needs to complete.
Fieldset and Legend html tags are used Here is quick reference http://www.quirksmode.org/oddsandends/
fieldset.html
Background Image
background-repeat repeat, no-repeat, repeat-x, repeat-y Sets a background image that does not
repeat and is centered: Body{background-image:
url(image.gif);background-repeat:no-repeat;background-position:50%;}
Let’s put a background image into our webpage
Review
How did we change the cursor for our question email? We used an inline style
style="cursor:help“ What did we use to structure our
navigation? A <ul> list
Review
What types of modifications did we use to format the navigation? We removed the bullets, changed the
padding for the <li> and margins for the <ul>, customized the links. It no longer looked like a standard html list
What types of properties can you apply for background image tiling? repeat, no-repeat, repeat-x, repeat-y
Alternate Style Sheets
By providing links to alternate styles, you can make your page more accessible to all users.
The most common example of a link to alternate style sheet is link to a printable document.
Types of Style Sheets Persistent
Always enabled. Generally for layout. Preferred
The default style sheet that is disabled when a user selects an alternate style sheet.
Alternate An optional alternative to your site’s preferred style
sheet that the user can select. When a user selects an alternate style sheet, the
preferred style sheet is disabled but the persistent style sheet remains linked to the document. All layout in the persistent All font and color in the preferred which can be disabled
for an alternative (more accessible) font and color style sheet.
Resource for alternate style sheet
http://www.alistapart.com/stories/alternate/
Create a Print Style Sheet
Optimizes a page for printing. Limit images if any Well-formed text media=“print” in the link tag
Use the display property remove elements not useful in print #navigation {display:none}
Activity
Remove the navigation, image header and footer from the print style sheet and link it to the main page. Copy and paste flavors page and call it
printflavors.html with the print style sheet linked.
Review
Name the types of style sheet Persistent, preferred, alternate
Why would you use a print style sheet? To make the document more print
friendly. Few graphics, no links, clean text.
