HTML (Markup) and CSS (Presentation)
Resources for CIS89A Modules 1-12
HTML is for markup and content. CSS is for presentation.
- HTML - HyperText Markup Language
- CSS - Cascading Style Sheets
In the past, basic HTML was taught first and CSS was taught separately later. Now, in CIS89A Web Development, these are combined and introduced in parallel.
- HTML Tutorials - HTML is where the magic of web page design begins. It isn’t presentational — that’s what CSS is for — HyperText Markup Language is a simple, elegant way to structure content.
Basic CSS: The Cascade, And Why Go External?
CSS Zen Garden * show the power of CSS. A demonstration of what can be accomplished through CSS-based design. View some of the existing designs in the list by loading the style sheet into this page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really. CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be. * css archive
- CSS Tutorial - CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.
- CSS Tutorials - CSS exists to style your HTML — to present your content. The language of Cascading Style Sheets is somewhat different to HTML but it remains simple and straightforward.
- Willard HTML: A Beginner's Guide (Fifth Edition) Optional textbook - Chapter 2. Document Setup and Chapter 3. Style Sheet Setup
Stylesheets (CSS)
In traditional publishing - books, magazines, newspapers, each publication would have a style guide or "stylesheet". The style guide usually listed information such as fonts to use for headings and content text, guidelines for including images, and formatting for captions. This tradition was eventually implemented for the web with unique properties to accommodate HTML content as Cascading Style Sheets. As something of an afterthought, CSS code is more like programming than HTML code.
- separate content and presentation - maintain independently, share work between content creator and web site design.
- selector - HTML element to be affected eg. h2, p
- CSS properties - specific attributes for the selector eg. font-family, color
- declaration - value for a property eg. verdana, blue
- ruleset - putting it all together eg. h2 {font-family: verdana; color: blue;}
what css is...
- inline - styles are embedded in the HTML code they affect
- embedded - placed in a page header and affect all corresponding tags on a single page
- external - styles are coded in a separate document that is referenced from within the header of any pages that will be affected.
cascade - order of effect
- browser default > external .css file linked in page head > embedded style element in page header section > property attribute value in element > user specified appearance preferences > device limitations
- can be multiple of each - partial or complete overlap * processed / applied in order - last description closest to content is what you see
- prior to css specified all styling directly in with the content. Difficult to make changes to multiple pages. Maintenance effort
- format for style descriptions different in css and in html
external css file
- external file that includes styling information that can be used / shared across multiple pages or an entire site
- link to content pages
- what, how - format
- coding - selector
- browsers - defaults, inconsistencies, reset
starting to use css
- 30 CSS Best Practices for Beginners * readability, naming
templates, examples
- CSS Examples - over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
anytime - check your work
- CSS Validation Service - Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets * ?? same function different url
css - links to css related resources
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/css: Error parsing XML for RSS
