Post on 31-Dec-2015
transcript
Original HTML Philosophy to have basic text file that would be
interpreted by the browser quickly downloaded
Original HTML Philosophy to have basic text file that would be
interpreted by the browser quickly downloaded
But:
Original HTML Philosophy to have basic text file that would be
interpreted by the browser quickly downloaded
But: final page format depended upon browser
used
Original HTML Philosophy to have basic text file that would be
interpreted by the browser quickly downloaded
But: final page format depended upon browser
used not much control over placement of some
objects
Original HTML Page Layout Could be Controlled by Using HTML tag extensions Converting text to images
Original HTML Page Layout Could be Controlled by Using HTML tag extensions Converting text to images Controlling page layout with tables
But There Were Drawbacks
Using HTML tag extensions– not all browsers supported the extensions
Converting text to images
But There Were Drawbacks
Using HTML tag extensions– not all browsers supported extensions
Converting text to images– slowed page download speed
But There Were Drawbacks
Using HTML tag extensions– not all browsers supported extensions
Converting text to images– slowed page download speed
Controlling page layout with tables
But There Were Drawbacks
Using HTML tag extensions– not all browsers supported extensions
Converting text to images– slowed page download speed
Controlling page layout with tables– Makes code more complex and difficult to
interpret by coder– May slow download speeds
Other Original HTML drawbacks Content not separated from design within
the document (code tags and content intertwined)
Other Original HTML drawbacks Content not separated from design within
the document (code tags and content intertwined)
In order to apply a style, must apply tag to each occurrence individually.
Other Original HTML drawbacks Content not separated from design within
the document (code tags and content intertwined)
In order to apply a style, must apply tag to each occurrence individually.
Not possible to define elements of style and follow with content
With Styles
Instead of relying on browsers to interpret the document, the appearance of a tag is explicitly defined.
When browser receives text file from the server, also receives the rules for displaying the document.
The collection of styles for a web page is known as a STYLE SHEET
Styles Limitations of HTML led to development of
style sheets Style sheets use a common language and
follow common rules; language is known as Cascading Style Sheets (CSS)*
CSS developed by W3C Developed to SUPPLEMENT HTML
*CCS sometimes used, Proprietary CSS first developed by Netscape
CSS First CSS standard, CSS1, released in 1996 CSS2 was released in 1998 Formatting web pages quite different in
CSS from HTML CSS provides several tools not available in
HTML
CSS Browser support for CSS is uneven I.E. best for CSS1 Netscape tried to have own version of CSS;
N 4.7 not fully CSS1 compliant No browser fully compliant with CSS2 Test in as many browsers as possible
CSS References The World Wide Web Consortium
http://www.w3c.org
The Web Standards Projecthttp://www.webstandards.org/css/
CSS bugs and workaroundshttp://www.css.nu/pointers/bugs.html
Little Shopr of CSS Horrorshttp://www.haughey.com/csshorrors/
Solution: Styles
Inline StylesStyle affects an isolated instance of an HTML tag
Only the tag defined is affected, other tags in the document are not
Solution: Styles
Embedded (Global) Styles
Applies to a single document, tags included IN the documentAny tag can be defined and the style affects the
entire HTML document
In other words, the new style definition replaces the old definition for that tag throughout the document
Solution: Styles
Linked (or external) style sheetsTags are defined within a text file which is saved
as its own file with a .CSS extension
CSS Styles If need to format a single section in your
webpage, then you might use the inline style
If need to format all instances of an element in a Web page, then use the embedded or global style
If need to format elements for an entire site, then use a linked style sheet.
Uses of Styles
To Use
Define a tag within a section of a document
Inline
Style
Define a tag throughout a document
Embedded or Global Style
Define a tag throughout an entire Web site
Linked Style Sheet
Using Inline Styles
To Use Do this
Inline Style Add the “style” property to the HTML tag
How
<tag style=“style declarations”>
“style declarations”= attribute1:value1; attribute2:value2
Using Inline Styles
To Use Do this
Inline Style Add the “style” property to the HTML tag
Examples
<H1 STYLE=“color:red; font-family:sans- serif”>
Another example
Using Embedded Styles
To Use Do this
Linked Style Sheet Create an embedded style
How
<STYLE TYPE=“style sheet language”>
There are several style sheet languages, but the default is “text/css” for CSS
Using Embedded Styles
Important Terms in Embedded Styles
Selector = Element in HTML document (such as Header, Paragraph)
Declaration= the collection attibutes and values applied to the selector(s)
Using Embedded Styles
To Use Do this
Linked Style Sheet Create an embedded styleuse Selectors
Selectors= elements in y
Exampe
<STYLE TYPE=“style sheet language”>
There are several style sheet languages, but the default is “text/css” for CSS
Using Styles
To Use Do this
Inline Style Add the “style” property to the HTML
tag
Define a tag throughout a document
Embedded or Global Style
Define a tag throughout an entire Web site
Linked Style Sheet
Using Styles
To Use Do this
Inline Style Add the “style” property to the HTML
tag
Define a tag throughout a document
Embedded or Global Style
Define a tag throughout an entire Web site
Linked Style Sheet