today’s objectives complete web page using xhtml & css adding css to documents embed link...
TRANSCRIPT
Today’s objectives
Complete web page Using xhtml & CSS Adding CSS to documents
Embed Link @import url(File);
CSS
XHTML ELEMENTS
Presentational versus semantic mark up
http://www.w3schools.com/tags/ref_html_dtd.asp
<u> | text-decoration : underline;
<b> | <strong> | font-weight : bold; <i> | <em> | font-style : italic; <strike> | text-decoration :
line-through; <font> | font-family : Arial; <center> | text-align : center;
Presentational Elements
Presentational elements alternatives Presentational elements alternatives –
semantic elements | <address> <h1> <p> <ul> Phase elements : <abbr> <strong> Computer Phrase elements: <kbd>
<var><code>
Style sheet properties | font-family : Arial;
Source: Learning Web Design : J. Robbins, 2009, p. 85
XHML | Element Prohibitions Distinction between block-level (starts
new line in the flow of HTML) and inline elements (don't break the flow. ) is important. Block : <p> <h1> <ul> <ol> … Inline : <span> <em> <q> <strong> …
Whether an element is block-level or inline restricts what other elements it may contain. Block | inline elements: http://htmlhelp.com/reference/html40/inline.html
XHML | Element Prohibitions
There are certain tags that are not allowed to be in other tags. Block elements cannot be inside inline elements.
<span><p>Bold paragraph</p></span>
a link (<a href="...">Link</a>) cannot contain another a link.<a href=“…”>LinkA and <a href=“…”>Nested Link</a></a>
Form element cannot contain another form inside of it.
Inline elements (e.g.,<span>) cannot be directly in the main <body> of a page.
XHML | Element Prohibitions <p> cannot be inside another <p>
XHML | Element ProhibitionsW3C - Nesting restrictions: a must not contain other a elements. pre must not contain the img, object, big,
small, sub, or sup elements. button must not contain the input, select,
textarea, label, button, form, fieldset, or iframe.
label must not contain other label elements. form must not contain other form elements.
Source: http://www.w3.org/TR/2002/REC-xhtml1-20020801/#prohibitions
CASCADING STYLE SHEETS
CSS
CSS Level 1 – CSS1
First version of CSS (CSS Level 1 - CSS1) in 1996.
Included properties for font, color, and spacing instructions to page elements.
Lack of browser support prevented widespread use of CSS.
CSS2
CSS Level 2 (CSS2) released in 1998. Added positioning properties allowed
CSS to be used for page layout. Introduced styles for other media
types (such as print).
CSS2
CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a working draft or a Candidate Recommendation (W3C).
CSS2.1 and CSS3
CSS 2.1 builds on CSS2 which builds on CSS1.
Supports media-specific style sheets - authors may tailor presentation of documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.
CSS 2.1 is derived from and will replace CSS2.
CSS3 specification – Working draft
CSS
Most browsers support majority of CSS1, CSS2, and CSS2.1 specifications.
Some browsers already support features from CSS Level 3 (CSS3) - still in development.
Source : www.w3.org/Style/CSS.
CSS
CSS3 adds support for: vertical text improved handling of tables improved integration with XML
technologies multiple background images Etc.
Source : www.w3.org/Style/CSS.
The Benefits of Using CSS
Better type and layout controls. Less work. Change appearance of
site by editing one style sheet. Potentially smaller file sizes and
faster download.
The Benefits of Using CSS
More accessible sites. Meaningfully marking up content makes it more accessible for nonvisual or mobile devices.
Reliable browser support. Almost all browsers support all of CSS1 and most of CSS2.
RULES, SELECTORS, DECLARATIONS
CSS
Style sheet
Made up of one or more style instructions (called rules).
Rules describe how elements get displayed.
h1 { color: green; }p { font-size: small; font-family: sans-serif; }
Cascading Style Sheets
Style is set of one or more rules that attached to elements in document (<h1>, <p>…)
h1 { color: #000000; }
The Rule
h1 {color : #c0c0c0;}
Rule
The Rule
h1 {color : #c0c0c0;}
Selector Declaration
Rule
The Declaration
Has two parts separated by a colon: Property - that part before the colon
Value - that part after the colon
h1 {color : #c0c0c0;}
The Declaration
Property is a quality or characteristic that something possesses (e.g., color, size, style).
The Declaration
Curly brackets {} help distinguish between selector, property, and value
Colon separates property and values
Semicolon separates declarations
h1 {color : #c0c0c0; font-size : 2em;}p {font-family : Arial;}
Types of selectors
Tag Selectors: Page-Wide Styling Class Selectors: Pinpoint Control ID Selectors: Specific Page Elements The Universal Selector (Asterisk)* { font-weight: bold; }
Tag selectors
h1 {color : #c0c0c0;} body { background-color : #FFFFFF;} p {padding : 10px;}
Styling Groups of Tagsh1, h2, h3, h4, h5, h6 { color : #F1CD33; }
Types of selectors | Descendent Descendent Selectors h1 strong { color: red; }Any <strong> tag inside an h1 is red, but
other instances of the <strong> tag on the page aren’t affected.
li a { font-family: Arial; }
Types of selectors | Class selectors
Classes (applies to more than one type of element – several different styles for the same element.
.mytext {font-family: Verdana; font-size: 10px;}
<p class=“mytext”>Hello World</p>
31
Types of selectors | ID id Selector
Use to apply a CSSrule to ONE element on a Web page.
Configure with #idname
The sample creates an id called “new” with red, large, italic text.
To use the id, code the following XHTML:
<p id=“new”>This is text is red, large, and in italics</p>
<style type="text/css">#new { color: #FF0000;
font-size:2em; font-style: italic;
}</style>