Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3
Cascading Style Sheets. CSS CSS stands for Cascading Style Sheet. Typical CSS file is a text file...
-
Upload
earl-billey -
Category
Documents
-
view
218 -
download
0
Transcript of Cascading Style Sheets. CSS CSS stands for Cascading Style Sheet. Typical CSS file is a text file...
Cascading Style Sheets
CSS
CSS stands for Cascading Style Sheet. Typical CSS file is a text file with an extention.css and contains a series of commands or rules. These rules tell the HTML how to display.
*To create a style sheet, create a file using Notepad save it as a .css document and start writing the CSS code.
/* Styles for sitename.com*/
body {font-family:Arial; background: #000;}
#container {text-align:left;width:1020px;
}
#header {height:232px;}
#footer {width: 100%;padding: 0 10px;margin-bottom: 10px;
}
And so on….
Why use it?Used to control formatting
◦Change text properties◦Control the spacing between
elements on your page◦Draw borders◦Add images◦Etc.
Compatible with HTML and XHTML
Benefits to Using CSS• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn
Only downside…CSS does not work exactly the same way in all
browsers.◦ You should be able to ensure that your site is
still accessible, useable, and attractive in any browser.
Without using CSS “HTML without CSS is
like a piece of candy without a pretty wrapper.”
Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default.
With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.
Box Model
CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float.
HeaderNavigationContentFooter
HTML & CSS
• HTML and CSS work together to produce beautiful and functional Web sites
• HTML = structure
• CSS = style
We have not given up HTML, we are only adding to it!
CSS Rule Structure
A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value.
selector {property: value;}
declaration
Selectors
body { property: value; } h1 { property: value; } em { property: value; } p { property: value; }
•The name of the desired type of element, without any attributes.
Properties and Values
body {background: purple;} h1 {color: green; }h2 {font-size: large;}p {color: #ff0000;} /*hexadecimal for red*/
Properties and values tell an HTML element how to display.body {background: purple;color: green;}
*CSS code can be written in a linear format (above) or in a block format (left).
PropertiesProperty is the name of the CSS
property that describes the sort of formatting you would like to apply.
Properties are basically the same as attributes used in html formatting. Some are the same; however, be careful!
Some examples:Same: border, color, Different: font-size, line-height, text-align,
font-family, background-color
ValuesMany values are the same as when you used
them in html. Some of the rules may change slightly.
Some examples:Same: colors, font styles, size (aside from stating how you are using the size #), Different: border values (html=”0” vs. css: none), if using pixels, you must state it as px
In css, values are not surrounded by quotation marks
Grouping Selectors
h1 {color: black;}
h1 {font-weight: bold;}
h1 {background: white;}
h1 {
color: black;
font-weight: bold;
background: white;
}
Group the same selector with different declarations together on one line.
Example of grouping selectors (both are correct):
Grouping SelectorsGroup different selectors with the same declaration on one line.
h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}
h1, h2, h3 {color: yellow;}
Example of grouping selectors (both are correct):
Quick ReviewWrite out a rule structure (4
parts)_________{______________} (then
name what the information is between the curly brackets.
Write out a rule structure using elements for each part
Group selectors with a common declaration
Group a selector with 2 or more elements within a declaration
Review AnswersRule structure:Selector {property: value;} Declarationh2 {color: blue;}h1, h2, h3 {font-weight: bold;}p {text-align: center; font-style:
“times new roman” arial;}
CommentsYou can add comments to your
html (xhtml) documents in order to remind yourself what you were trying to achieve with your html tags
They only appear when the document is opened with an editor (they are invisible to the end user)
Comments: TipsUseful for describing why you used a
particular tag and what effect you were hoping to achieve
Useful to remind yourself to include, remove, or update certain sections
You should view your commented page with a browser before publishing to avoid sharing your private comments with the public
Comments may not be nested within other comments!
Comments Continued…Different when using html and css:Html: One tag, no closing tag:
<!--My comments that I want to state-->
Css: /*My comments that I want to state*/
p {color: #ff0000;} /*Company Branding*/
Either way is correct depending on your purpose.
Let’s play with it a littleGo to www.w3schools.comClick on “Learn CSS” to the left of
the page.Work through the introduction to
ID and Class.
Attaching a Style Sheet Attach a style sheet to a page by adding the code to the
<head> section of the HTML page. There are 3 ways to attach CSS to a page:
1. External Style Sheet: Best used to control styling on multiple pages.
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>h1 {color: red)</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags.
<p style=“color: red”>Some Text</p>
Begin a new pageSet up a new html documentSave it as personal.html in a new
folder called “personal pages”Create a heading using h1 tags (do
not format!)Add a comment after your h1 tag that
states an image should be placed there.
Create 2 paragraph tags with some content within it
Make sure you are closing ALL appropriate tags!