Ideas to Layout
advertisement
Ideas to Layout
Beginning web layout using Cascading
Style Sheets (CSS). Basic ideas,
practices, tools and resources for
designing a tableless web site using CSS.
CB Averitt
Florence-Darlington Technical College
cb.averitt@fdtc.edu
Topics
•
•
•
•
•
•
•
•
•
What is CSS
CSS Syntax
4 CSS’s
Classes
ID
<div> tag
Tools & Resources
CSS Best Practices
What Browser should be
used in designs and
layouts?
•My Challenges
•Media Types
•Links with Preloaded
Images
•Button Rollovers – Sprites
•CSS’s relationship with
accessibility
•Let’s Build a Page
•Questions?
What is CSS?
– CSS stands for Cascading Style Sheets
– Styles define how to display HTML elements
– Styles are normally stored in Style Sheets
– Styles were added to HTML 4.0 to solve a problem
– External Style Sheets can save you a lot of work
– External Style Sheets are stored in CSS files
– Multiple style definitions will cascade into one
w3schools.com
CSS Syntax
– Selector {property: value} - example:
body {color: black}
– More than one property – Semicolon - Selector
{property1: value1; property2: value2;} example:
p {text-align: center; color: red}
– Readable – example:
p{
text-align: center;
color: black;
font-family: arial;
}
– Grouping – use a comma
h1,h2,h3,h4,h5,h6 {
color: green;
}
4 css’s
– Browser Default
– External style sheet – example
<link rel="stylesheet" type="text/css" href="main.css" />
– Internal style sheet (inside the head tag) –
example:
www.powersaviation.com
– Inline style (inside an html element) – example
<p style="background: blue; color: white;">A new background
and font color with inline CSS</p>
link
Classes
– Different styles for the same type of html element –
example:
p.right {
text-align: right;
}
p.center {
text-align: center;
}
p.left {
text-align: left;
}
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
<p class=“left">This paragraph will be left-aligned.</p>
link
ID
– HTML elements with particular attributes. a
unique identifier to an element - example:
#red {
color: red;
}
<p id="red">This paragraph will be the color red. This paragraph
will be the color red. This paragraph will be the color red.
This paragraph will be the color red. This paragraph will be
the color red. This paragraph will be the color red. This
paragraph will be the color red. This paragraph will be the
color red. This paragraph will be the color red. This
paragraph will be the color red. </p>
link
<div> tag
– defines a division or a section in an HTML
document.
– is often used to group block-elements to format
them with styles.
– Browsers add a <br /> between
Tools & Resources
– Dreamweaver
– Web Developer for Firefox
– Cssfly.net – www.cssfly.net
– www.w3schools.com
– Google
– Validation
– Existing Websites
CSS Best Practices
– Doc Types – examples:
http://www.w3schools.com/tags/tag_doctype.asp
• The doctype declaration should be the very first thing in an
HTML document, before the <html> tag.
• The doctype declaration is not an HTML tag; it is an
instruction to the web browser about what version of the
markup language the page is written in.
• The doctype declaration refers to a Document Type
Definition (DTD). The DTD specifies the rules for the markup
language, so that the browsers can render the content
correctly. link
– xhtml
• Closing – example: <p>This is some text.</p>
• Self closing – example: <hr />
Best Practices continued
– Use standard html tags first - H1, H2, etc.
– Defining styles (browsers may be different –
default styles)
– Screen Resolutions
• 1024 X 768
• What are the big boys doing?
– CSS Comments – example:
/* This is a comment */
What Browser should be used in
designs and layouts?
– Types
•
•
•
•
•
•
Firefox
Internet Explorer 7
Internet Explorer 6
Safari
Opera
Chrome
– Browser Stats
Over the last 30 days IE is
93%, Firefox is 5.6% and
Safari is .68%. Within IE,
IE 7.0 is 90%, IE 6.0 is 9%
and IE 8.0 is .8%.
My challenges in the beginning
– Pushing a page down (min-height. IE 6.0)
– Do not start your class name with a number –
example: #1heading {color: black;}
– Site Centering
– Positioning on the parent - link
Media Types
– example:
<link rel="stylesheet" type="text/css"
href="/source/fdtc_screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="/source/print2.css"
media="print">
http://www.w3schools.com/css/css_mediatypes.asp
&
link
Links with preloaded images
– example:
www.imperialinktattoo.net
Button rollovers – Sprites
– example:
www.ptli.org
https://www.ptli.org//source/images/button2.jpg
– Entire site as one big image with positioning.
CSS’s relationship with accessibility
– Converting from tables to CSS is the first step.
– Not an “end all”
•
•
•
•
Alt tags on images
Closed Captioning/Transcripts for videos
Links that make sense – avoid “click here”
Organize page with H1, H2, p, etc
Let’s Build a Page
Questions?
CB Averitt
cb.averitt@fdtc.edu
