Embed Size (px)
Citation preview
Online Chapter 1 4th Edition
Review elements Whitespace handling Rule structure Linking to an external style sheet Alternate Style Sheets Media Specific Style Sheets Using @import Declaration Reviewing some HTML5 (header)
Elements are like little labels that describe the different parts of a web page.
It is customary to type your element names in all lowercase, although HTML5 isn’t picky here. But it is rare to find someone coding in uppercase.
The basis of document structure. In CSS elements take two forms:
◦ Replaced Where the elements content is replaced by something
that is not directly represented by document content.
Ex: <img src=“howdy.gif”>◦ Nonreplaced
Their content is presented by the browser inside a boxgenerated by the element itself. Ex: <span>Hi There</span>
Each rule has two fundamental parts:◦ Selector◦ Declaration block (can have more than one)
Property Value
h1 { color: red;
}
Selector
property
value
CSS treats spaces like HTML does Spaces not recognized between rules or
within rules Blank lines will not have any programming
effect
Generates an element box within a line of text and do not break up the flow of the line.
Difference between inline elements in HTML vs. CSS◦ Html restricts block-level elements from
descending from inline-level elements.◦ CSS there is no restriction on how display roles
can be nested.
Remember this?<link rel=“stylesheet “ type=“text/css”
href=“sheet1.css” media=“all”>◦ Placed inside the head section of the HMTL document◦ Must not be placed inside any other document.◦ This statement causes the web browser to locate and
load the style sheet sheet1.css◦ The default value for the media attribute is all (some
coders like to be explicit and by including this attribute.)
<link rel=“stylesheet “ type=“text/css” href=“sheet1.css” media=“all”>
Rel stands for “relation” – The relation is stylesheet
Type is always set to text/css◦ Describes the type of data that will be loaded
using the link tag Href the value is the URL of your style sheet Media rules regarding media types with
each rule separated by a comma.
<style type=“text/css”>…</style> The style element is one way to include a
style sheet Style should always use the attribute typeThe value of the type is text/css (the same as
the link element) Should be closed with a closing </style> Referred to as the embedded style sheet
or document style sheet
There can be more than one linked style sheet associated with a document.
By linking more than one style sheet, the browser will combine the rules from each and apply them all to the document.
In our example we have a style sheet named:
base.css preferred.css alternative.css(That would be three different style sheets)
Allows the user to pick the style they want to use, and the browser would switch from one style sheet to another.
The user would select from the menu barUse style and the user would pick the style they would want.
Go to menu bar ~choose View (firefox) Page Style Choose options Allows you to provide different themes for your site.
…<head>
<meta charset=“UTF-8” /><title>Palau de la Musica</title><link rel=“stylesheet” href=“base.css” /><link rel=“stylesheet” href=“preferred.css”
title=“Dashed” /><link rel=“alternate stylesheet”
href=“alternate.css” title=“Dotted” />
</head>
Create the following: Use a base set of persistent styles that are
applied regardless of the visitor’s preference.
This is the base.css style sheet.
Img { border: 4px solid red;
}
Will loaded by default in addition to base.css
When the visitor jumps to the page.
Img {border-style: dashed;
}(This was identified as the preferred style sheet in the link
statement within the head section.)
This style sheet is named alternate.css but you can name it what you want, as with the other style sheets above.
Img {border-style: dotted;
}
You can designate a style sheet to be used only for a particular output, perhaps only for printing or only for viewing onscreen in the browser.
Allows the author to choose style sheets based on features of a given media type.
Media descriptors are used. Three most common
◦ all, screen and print(The default value for the media attribute is media all, so
declaring media =“all” is redundant. Some coders prefer to be explicit by always including media=“all”)
…<head>
<meta charset=“UTF-8” /> <title>Palau de la Musica</title>
<link rel=“stylesheet” href=“base.css” media=“screen” /> <link rel=“stylesheet” href=“print.css” media=“print” /></head><body>…
<img src=“img/palau250.jpg” width=“250” height=“163” alt=“El Palau de la Musica” /><img src=“img/tickets.jpg” width=“87” height=“163” alt=“The Ticket Window” />
…</body> </html>
/*Print Style Sheet*/@media print {
img {display: none;
}p {
color: black;}Shows no images i.e. turns them off black and text
It is not unusual for more than one style rule to apply to the same element, particularly on larger sites that require more effort to manage CSS.
So… a style’s location can break a tie
BASIC RULE: the later the style appears, the more precedence or importance it has….
Another way to load an external style sheet to the HTML document.
By placing @import url(sheets2.css) at the beginning of the style sheet that contain them, and there are no other constraints.
There can be more than one @import statement
Cannot use alternative style sheets
Found inside the style container and must be placed before the other CSS rules or it won’t work.
<style type=“text/css”>@import url(styles.css); /*import comes
first */H1 {color: gray;}</style>
/*This is a CSS comment */
Use to make your coding clearer! Use to point out information! Use to help someone else understand your coding.
You may start comments on their own line, inside a declaration block, or after a rule.
/* ----------------------------------------------------------------------- */
/* ----- This style sheet contains a variety of example CSS comments ----- */
/* ----------------------------------------------------------------------- */
/* :::: From Figure C (p.183) :::: */
/* GLOBAL NAVIGATION ------------------------------- */
/* MAIN CONTENT ------------------------------- */
/* SIGN-UP FORM ------------------------------- */
/* PAGE FOOTER ------------------------------- */
Locate the reference to an external style sheet in the html5 page and click the file name.◦ The style sheet should show up in a new browser
window. You can copy it from there if you like!
Use the CSS validator which will flag some syntax errors. Validate first!
Then:◦ Make sure to separate properties from their value
with a colon : (not an equal sign as in HTML5)◦ Be sure to complete each property/value pair (a
declaration) with a semi-colon ;◦ Don’t add spaces between numbers and their
units◦ Don’t forget to close your curly braces◦ Don’t forget to close the closing </style>
CSS3 is the natural extension of the versions of CSS that preceded it.
CSS3 is more powerful than earlier versions of CSS and introduces numerous visual effects, such as drop shadows, text shadows, rounded corners, and gradients.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </html>
The <title></title> belongs in the head section and always after the meta element that specifies the character encoding.
Recommended title length is 60 characters including spaces. Because search engines usually cut them off in their results around there. Browsers display a varying amount of characters but no more than 60 in the title bar at the top of the browser before cutting off the text.
Header element is one of four sectioning content elements
A page can have multiple header elements and their meaning can vary.◦ A header at or near the top of the page may
represent the header for the whole page.◦ Often the head can include the pages main
navigation and logo.
Links within the nav may point to content within the page, to other pages or resources.
Use nav for only the documents most important groups of links, not all of them
The real importance of external style sheets is the way in which they allow authors to put all of a site’s presentation information in one place, and point all of the documents to that place.
