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
- How to Link CSS to HTML – Stylesheet File Linking
- To link your CSS to your HTML, you have to use the link tag with some relevant attributes.The link tag is a self-closing tag you should put at the head section of your HTML.To link CSS to HTML with...
- CSS basics - Learn web development | MDN
- Selector This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, elements). To style a different element, change the selector.Declara...
- 28 outstanding examples of CSS | Creative Bloq
- 28 great examples of CSS sites that will provide a burst of web design inspirationBuilt using Ruby on Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has the ability to let travellers...
- Style HTML by Using External CSS and Inline Style
- There are three options for styling HTML elements. You can style HTML elements by using the inline CSS. The internal CSS is for styling whole pages. The external stylesheet can set rules for entire...
- CSS 101 - Berkeley Advanced Media Institute
- To style elements in a document, you simply apply rules to selectors. What’s that now? Simple: A “selector” is a way of referring to some specific element or group of elements on a page. For...
- Transitions & Animations - Learn to Code Advanced HTML & CSS
- With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.Anim...
- CSS Crash Course For Absolute Beginners - YouTube
- In this video I will cram as much as possible about CSS. We will be looking at styles, selectors, declarations, etc. We will build a CSS cheat sheet that you can keep as a resource and we will also...
