Introduction to CSC110
Download
Report
Transcript Introduction to CSC110
CSW 131 – Chapter 4
Formatting Your Pages
Prepared by Prof. B. for use with
Teach Yourself Visually Web Design
by Ron Huddleston, Wiley
1
Introduction to CSS (pp. 96-97)
CSS (Cascading Style Sheets) formats web pages.
Uses plain text (like HTML) and are white space insensitive
Syntax requires the use of selectors and declarations
Selectors: define rules for part of page to be styled
Declarations: include property : value pairs, e.g.,
body_text{
font-family: Times, Baskerville, serif;
color: #660033;
}
Embedded Style Sheets within page using <style> tags
External Style Sheets can link to ALL web pages of site
Inline Styles (within an HTML tag) should be avoided
Browser Support: Very good except older versions, e.g. IE6
2
Create an Embedded Style Sheet (pp. 98-99
Embedded Style Sheets are placed within HTML pages and
take priority over External Style Sheets
download ch04.zip into downloads subfolder
copy & paste ch04zip into class_work subfolder
extract (unzip) ch04.zip, which becomes subfolder ch04
into class_work subfolder
Note: indexDONE.html is for your reference (do NOT edit)
Using Notepad, open index.html
Embedded Style Sheets use this required tag and value:
On a new line before the closing </head> tag type:
<style type="text/css">
</style>
Note that styles are placed within the <head> section (this is
only the opening & closed tags, so page appears unchanged).
3
Understanding Units of Measurement (pp. 100-101)
Many CSS properties require varying units of measurement,
usually more than 1 type/page.
English & Metric units vary by monitor: do NOT use!
Pixels: good for widths of borders, padding and margins
around elements
Points & Picas: 72 points or 6 picas = 1 inch, so 12 points = 1
pica. Based on an inch, so these are also NOT recommended.
Ems & Exes: Ems = width of a capital M in the current font, so if
the font is 16 pixels, 1 em = 16 pixels. Exes are the width of a
lower case x, but usually = ½ em.
Percents = % of the parent element or page. If page is set to
90% and paragraph to 80%, paragraph’s size = 80% of 90%.
IE Browser & Font Scaling: Users can only resize on screen
text if font sizes are set using ems, exes, or percents (IE9?).
Specifying Units: CSS requires a unit of measure (except 0).
pixels = px, ems = em, exes = ex, percent = %, points = pt,
picas = pc, centimeters = cm, inches = in, millimeters = mm.
4
Set the Font and Text Size on Your Page (pp. 102-103)
You can set the style and size for any text on a page,
but ONLY if they reside on the USER’s computer:
Continuing to work on index.html on a new line
before the closing </style> type:
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
Save index.html and view in browser.
Note: Using font-family looks on users computer for
Arial 1st, else Helvetica 2nd, else any sans-serif last.
5
Understanding Color on the Web (pp. 104-105)
Color not only sets the mood for a website, it can
render it unusable for 5% of your (color blind) users.
RedGreenBlue: Each color can be 0 to 255, e.g., purple as
rgb(128, 0, 128) – 128 of red, 0 green, and 128 blue.
Hexidecimal: Using 16 digits, 0-9 & A-F, the 0 to 255 can be
expressed as 2 rather than 3 digits – Purple as #800080.
16 Named Colors: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, & yellow.
The Web-Safe Palette: 216 colors shared by Windows & Apple
on early 256 color monitors. Millions of colors display today.
Accessibility and Colors: Color contrast can make websites
more useable for the color blind. See for yourself @ Vischeck.
CSS 3 and Alpha: This will add the ability to specify an Alpha
channel, or color transparency – rgba(128, 0, 128, .5) will
create purple with 50% transparency. Browser support!?
6
Determine a Color Scheme Using Kuler (pp. 106-107)
Adobe Kuler is a GREAT, FREE online resource for
designers to access and use color schemes you or
others in the community created, and identify
colors within images. MANY students use this.
Go to http://kuler.adobe.com (check out their Help).
View color schemes; click to
see the hexadecimal values.
If you like using it you can set up a free account:
Save and download themes, making it easy to use them on
your web site, and change colors as you wish.
You can also save your own color schemes there.
You can also determine the colors in an image .
7
Set Text Color (p. 108)
Set a Background Color (p. 109)
CSS color property actually sets the color for the
foreground of an element – this is usually for text.
Continuing to work on index.html on a new line before the
closing } type:
color: #540907;
Save index.html and view in browser. W3 color help!
Background color is set using background-color.
Continuing to work on index.html on a new line before the
closing } type:
background-color: #FFC955;
Save index.html and view in browser
8
Add a Background Image (pp. 110-111)
(Designer) Comments / Notes (NOT IN BOOK)
Background images can be used instead of color. Use jpeg or gif
(png?) files that do not overwhelm users. These can be on any
element, but mostly on body.
Continuing on index.html on a new line before the closing } type:
background-image: url("images/backgroundtile.gif");
Note: Subtle, non-distracting images are usually best. Always
set a background-color in case image fails to appear.
(Designer) Comments / Notes, not visible to users, help you
remember, notify other designers, disable code, etc.
Three examples of use:
//color: #540907; [line disabled]
color: #540907; //maroon; [comment only; line works]
/*
Colors are defined below
*/ [/* & */ can be used on one, part of and multiple lines]
9
Control Background Image Tiling (p. 112)
The background-repeat property controls tiling, with values of
repeat-x (horizontal), repeat-y (vertical), and no-repeat (none).
Continuing to work on index.html, comment out the previous
background-image:
// background-image:url("images/backgroundtile.gif");
and on a new line below it replace it with:
background-image: url("images/gradient.gif");
Save index.html and view in browser…
Now add the following line
background-repeat: repeat-x; [repeats: horizontal axis]
Save index.html and view in browser.
10
Position Background Images (p. 113)
Background images default to top left of the element – to specify
a location, background-position is used, with two values; the
1st is distance from left of page, the 2nd from top of page.
Continuing to work on index.html, to match the book, first
comment out the previous background-image and
background-repeat lines:
// background-image: url("images/gradient.gif");
// background-repeat:repeat-x;
and on a new line below it replace it with:
background-image: url("images/flowers.gif");
background-repeat: no-repeat; [shows once]
OK, now on a new line before the closing </style> type:
background-position: 550px 0; [book shows 450px]
Save index.html and view in browser.
11
Apply Additional Text Formatting (pp. 114-115)
CSS line-height sets the distance between the baseline of the 1st
and following lines, while text-transform controls text
capitalization with values uppercase, lowercase, & capitalize.
Continuing to work on index.html on a new line before the
closing </style> type:
h1
{
text-transform: uppercase; [different than "capitalize "]
}
p
{
line-height: 1.5em; [note "em " is used for consistency]
}
Save index.html and view in browser.
Change uppercase to capitalize, view in browser, undo & save.
12
Indent and Align Text (pp. 116-117)
CSS text-indent controls indentation of the 1st line of text, while
text-align controls the look with values center, left, right, &
justify. Measures used most often are px and ems.
Continuing to work on index.html on a new line before the
closing } type:
p
{
line-height: 1.5em;
text-indent: .75em; ["em" offers editing consistency]
text-align: justify; [careful using justify value]
}
Save index.html and view in browser.
13
Apply Spacing with Padding (pp. 118-119)
CSS uses what is referred to as a box model regarding the
space around elements:
» Padding
The element content
» Border
» Margin
Continuing with index.html we will add padding in h1 & p:
On a new line before the closing } for BOTH h1 & p type
padding-left: 20px; [padding only to left of element]
}
Save index.html and view in browser.
Note that there is shorthand or a shortcut for coding padding:
1 value for all sides
2 values for top & bottom, left & right
4 values in clockwise order, top, right, bottom, and left
14
Control Whitespace with Margins (pp. 120-121)
Again using the CSS box model, the margin represents space
between elements:
» Padding
The element content
» Border
» Margin
Continuing with index.html we will add margin in body, h1 & p
on a new line(s) before the closing } using shortcut, add:
margin: 0; [no (0) margin for all 4 sides of body]
margin-top: 0; [no (0) margin for top of h1]
margin-bottom: 10px; [10px margin for bottom of h1]
margin-top: 0; [no (0) margin for top of p]
margin-bottom: 10px; [10px margin for bottom of p]
Save index.html and view in browser.
Note: shorthand or shortcut for coding per the previous slide:
15
Specify Widths (pp. 123-124)
Again using the CSS box model, the width property sets only
the element content width:
» Padding: 20px
element content: 520px
» Border: 10px
» Margin: 20px
But total width = 520 + 20 + 20 + 10 + 10 + 20 + 20 or 620px!
Continuing with index.html we will add width in h1 & p on a
new line(s) before the closing }:
width: 520px; [520px width for h1 content]
width: 520px; [520px width for p content]
Note: As h1 & p have 20px left margins, elements are 540px wide.
Save index.html and view in browser.
16
Add Borders (pp. 125-126)
The CSS border defaults to 0 (not visible), but the values width,
color, & style, make it appear:
» Padding: 20px
element content: 520px
» Border: 10px
» Margin: 20px
Continuing with index.html we will add border in h1 on a new
line(s) before the closing }:
border: 1px dashed #540907; [values can be in ANY order]
Shorthand is used meaning there will be a border on all 4
sides of the h1 element. Other options for border are:
border-top, border-bottom, border-left, & border-right.
Note: As h1 is now 542px wide (520 + 20 + 2).
Save index.html and view in browser.
Note: 10 available border style values are: none, hidden, solid, double,
dotted, dashed, groove, ridge, inset, and outset.
17
Notepad ++ (NOT IN BOOK)
Notepad++ has extended Notepad features
Numbered lines
Color coding
Encoding choices, and many other features
Save and close index.html
Right click index.html and select Edit with Notepad++
(or open with it)
NOTE: use Encoding | Convert to UTF-8 without BOM
Evaluate the differences compared to Notepad
Many designers like this as a simple tool for coding
18
To Do List
Read Chapter 4
Revisit what we did in class
Be careful as we do not follow book
Remember, MUCH more detail about anything we cover
is:
at w3.org
the Appendices of your book
DOCUMENT Your Project using Word doc ProjectPlan
Remember, pick something you LOVE – your website
will benefit!
19