LIS3353 SP12 Week 13

CSS Part II

LIS 3353 – Monday 4/2/12

Agenda

 IT News
– E-paper
 Grading Updates
– All are complete, I just need to upload to Blackboard
– I'll post a zip file of a sample spreadsheet and
explanations of grading rubrics for the group
assignments
 Office hours Wednesday – from 2-3 instead of 10-12
 CSS – review and continuation

CSS - Review

 Cascading Style Sheet
 Separates CONTENT from DESIGN
 More efficient use of time and resources
 Selectors (the tag)
 Declarations (the design)
 4 rules for applying CSS to page

CSS – Internal/Embedded

 Style information is embedded into the HEAD element of
page
 All formatting in one location, vs. each individual
element/tag on the page needing its own stylistic
information attached
 Good for small sites/pages

<head>
<style type="text/css">
hr {color: red;}
body {margin-left: 20px;}
</style>
</head>

CSS – External

 Style information is external to the webpage
 Code shows syntax for linking the webpage to
an external CSS
 This page below will draw CSS/formatting
information frm the yourstyle.css document.

<head>
<link rel="stylesheet" type="text/css" href="yourstyle.css" />
</head>

CSS – Import

 This statement may be used in a CSS file or inside the STYLE element.
 You can combine importing with other methods
 All @import statements must occur at the start of the style sheet
 Any rules specified in the style sheets themselves override conflicting rules in the
imported style sheets
 You can use as many style sheet files as you wish and override them with
embedded styles

<style type="text/css">
<!—
@import url(pagestyle.css);
->
</style>

CSS – Inline

 Least flexible
 requires each element to be tagged
within the HTML coding of the page.

<p style="color:sienna;margin-left:20px">This
is a paragraph.
</p>

CSS Multiple Sheets

 Use multiple sheets to dictate
formatting of a page
 If there are conflicts, the INTERNAL
sheet takes precedence
 BE CAREFUL! Don't have conflicts!

CSS – Multiple Sheets

 EXTERNAL CSS (from @import or link
href)
h3 {color: red; text-align: right; font-size: 8pt}
 INTERNAL CSS
h3 {text-align: center; font-size: 20pt}

 Result?

Index card!

 Name
 FSUID
 What is the result of the CSS question?


 EXTERNAL CSS (from @import or link href)
h3 {color: red; text-align: right; font-size: 8pt}
 INTERNAL CSS
h3 {text-align: center; font-size: 20pt}

 Result?
h3 {color: red; text-align: center; font-size: 20pt}


Author's User's Browser's
style style style
sheet sheet sheet

Greatest weight Least weight

CSS Basics

 Three parts
– Selector (HTML tag you want to define)
– Declaration (the style, consisting of:
• Property (attribute of selector)
• Value (markup value for that attribute)

body {color: black;}
p {font-family: "sans serif";}
p {text-align: left; color: red;}
h1, h2, h3, h4, h5, h6 {color: yellow;}

The class selector

 In CSS file:
– p.right {text-align: right; }
– p.left {text-align: left; }
– p.center {text-align: center; }

 In HTML page:
<p class="left"> YOUR TEXT HERE
Aligned LEFT</p>
<p class="right"> YOUR TEXT HERE
Aligned RIGHT</p>
<p class="center"> YOUR TEXT HERE
ALIGNED CENTER</p>
<p class="right" class=“center”>
????</p>

The class selector
 You can create a class selector free of tag names if
you want all tags to be formatted the same
.center {text-align: center;}
 Any tag with the "center" class will be aligned
center
 Can omit element name for selector if you wan tall
elements with that same selector to have same
formatting
<h1 class=“center”> <h1 class=“center”>
<p class=“center”> <p class=“center”>

p.center { text-align: center } .center { text-align: center }
h.center { text-align: center }

The ID selector

 ID selector applies to one unique
element ONLY
p#para1 {text-align: center; color: green}
 ID selector here is named "para1"
 "para1" is selector for the <p> element
and defines alignment & color
properties for anything with this ID

The ID Selector

p#para1 { text-align: center;
color: green }

<p id=“para1”>
This text would be centered and green
</p>

The DIV Selector

<DIV> - can be used with class attributes to create
customized block-level elements
 Create formatted sections

 Acts like a <p> tag

 Declare it in the style rule:
div.introduction {font-size: 14pt; margin: 24 pt;}

Apply style rule in the document:
<div class="introduction">This is the introduction
to the new document</div>

The SPAN selector

Use <SPAN> with CLASS attribute to create
customized inline elements:
 Declare it in style rule:
SPAN.logo {color: white; background-color:
black;}
 Apply the rule in the document
<p>Welcome to the <span class="logo">Wonder
Software</span> Website</p>

CSS – What you can change

BACKGROUND: FONT
– background – font-style
– background-color – font-variant
– background-image – font-weight
– background-repeat – font-size/line-height
– background-attachment – font-family
– background-position
PROPERTIES
TEXT: – margin
– color – margin-top
– direction – margin-left
– text-align – margin-right;
– text-indent – margin-bottom

CSS – Multiple Style Sheets

 Cascading
– SPECIFICITY
• Dating: I like flowers unless I tell you I like specific
flowers
– ORDER:
• Relationships: Forget what I said before, it's what I'm
saying now that matters

 Inheritance
– HIERARCHY:
• Children: If you had green eyes and red hair, and your SO
had green eyes and red hair, your kids SHOULD have
green eyes/red hair too!

CSS Links and Resources

Resources
 http://www.w3schools.com/cssref/default.asp
 http://www.css-generator.com/index.php
 http://www.colorschemedesigner.com

Examples
 http://www.w3schools.com/cssref/tryit.asp?filename=trycs
s_color
 http://www.csszengarden.com/
 http://css3generator.com/

LIS3353 SP12 Week 13

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a LIS3353 SP12 Week 13

Semelhante a LIS3353 SP12 Week 13 (20)

Mais de Amanda Case

Mais de Amanda Case (14)

Último

Último (20)

LIS3353 SP12 Week 13

Notas do Editor