ideas to layout beginning web layout using cascading style sheets (css). basic ideas, practices,...
TRANSCRIPT
Ideas to LayoutBeginning web layout using Cascading Style
Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web
site using CSS.
CB AverittFlorence-Darlington Technical College
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 commah1,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 StatsOver 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%.
All Of Them!!
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
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
