EducationOnlineForComputers.com » CSS

Excellent CSS Tutorials

computer_teacher — Wed, 09 Mar 2011 05:15:43 +0000

I just wrote a new blog post on our sister site, at Intelligentedu.com/blogs, detailing and deep linking to a site providing excellent CSS Tutorials. They include sample code, exercises and a CSS guide to help you learn and apply CSS to your web pages.

CSS Guide

computer_teacher — Tue, 22 Feb 2011 04:53:53 +0000

Here is a CSS Guide, from webmonkey, that will help you with your website and page design work. CSS (Cascading Stylesheets) separate the visual design elements (fonts, colors, margins, and so on) from the structural logic of a web page, and gives you control without sacrificing the integrity of the data, thus maintaining its usability in multiple environments. It also gives the capability for faster downloads, streamlined site maintenance, and instantaneous global control of design attributes across multiple pages.

CSS Guide Contents:
- How CSS Works
- Linking Stylesheets
- CSS Units of Measure
- CSS Attributes
- CSS Properties
- CSS Examples

36 CSS Tutorials

computer_teacher — Sun, 16 Jan 2011 01:20:57 +0000

CSS 2.0 Tutorial

computer_teacher — Tue, 13 Oct 2009 04:27:31 +0000

30 CSS Navigation and Button Tutorials

computer_teacher — Wed, 19 Aug 2009 05:41:29 +0000

Here are 30 excellent CSS Navigation and Button Tutorials, at InstantShift. These CSS tutorials, from around the web, will teach and show you how to code web navigation and buttons using CSS. They also include some useful web design tips. Some of the topics covered by these CSS tutorials include: advanced CSS menus, web navigation, CSS graphic menu with rollovers, fancy buttons using CSS sliding doors, tabs, and color adjustable CSS.

Tutorials for CSS Navigation and Menus:
These CSS tutorials deal with various CSS navigation and menu techniques. Some of the topics covered here are slicing up the menu design and putting them togethe, animated horizontal tabs, CSS graphic menus with rollovers, and hybrid CSS dropdowns.

- Advanced CSS Menu : Webdesignerwall
- CSS Sprite Navigation Tutorial : Ehousestudio
- CSS Techniques: Using Sliding Doors with Wordpress Navigation : Wphacks
- CSS menus : Howtocreate
- CSS Tabs Menu with Dropdowns : Dave-woods
- Animated horizontal tabs : Dynamicdrive
- Horizontal menu, top to bottom : Aplusrs
- Flexible navigation example : Icant
- CSS Menu - Horizontal/Vertical : Qrayg
- Tabs : Brainjar
- CSS graphic menu with rollovers : Bwebi
- Navigation matrix reloaded : Superfluousbanter
- Hybrid CSS Dropdowns : Alistapart
- A CSS only validating flyout menu : Cssplay
- A flyout menu with breadcrumb trail : Cssplay

Tutorials for CSS Buttons
These CSS tutorials cover the the topics of CSS button, including scalable CSS buttons, oval buttons, making fancy buttons using CSS sliding door technique, and roll over button.

- Scalable CSS Buttons Using Png and Background Colors : Moncse
- CSS Pre-Load Hover Buttons : Firefly-multimedia
- CSS Sliding Door using only image : Kailoon
- CSS Buttons using PNG transparency : Ryebreaddesign
- CSS Oval buttons : Dynamicdrive
- Make fancy buttons using CSS sliding doors technique : Jankoatwarpspeed
- Simple Round CSS Buttons ( Wii Buttons ) : Webappers
- Roll Over Button : Learnola
- CSS Overlapping Arrow Buttons : Firefly-multimedia
- Rediscovering The Button Element : Particletree
- CSS Hover Button : Nubluecouk
- Beautiful CSS buttons with icon set : Woork
- How to make sexy buttons with CSS : Oscaralexander
- Liquid & Color Adjustable CSS Buttons : Sohtanaka
- D CSS buttons : Dynamicdrive

HTML and CSS Tutorials and References

computer_teacher — Wed, 05 Aug 2009 23:55:15 +0000

Here are several HTML and CSS Tutorials and References, located at cherokeered.com, that can server as learning resources for most everything HTML and CSS, which are the most common technologies used in developing web pages. These HTML and CSS tutorials are categorized so that an aspiring web designer, a budding designer, and an advanced designer can all find training materials to suit their HTML and CSS learning needs.

HTML Tutorials:
The HTML beginner’s tutorial teaches you the essentials, and the intermediate guide adds a few nuts and bolts. The aim of the HTML advanced tutorial is to show how to fully exploit the features of HTML and how to optimize it for accessibility.

- HTML – Beginner
- HTML – Intermediate
- HTML – Advanced

CSS Tutorials:
These CSS tutorials describe and explain CSS at beginner, intermediate and advanced levels. Included here are also double rollover and javascript rollover tutorials.

- CSS – Beginner
- CSS – Intermediate
- CSS – Advanced
- CSS – Syntax
- CSS – Background Styles
- CSS – CLASS + ID
- Double Rollover via CSS
- JavaScript Rollovers: How have multiple links change a single image

CSS and HTML Resources:
These learning resources from around the web provide further instructions and tips on creating, coding, and designing web pages using HTML and CSS.

- HTML Dog
- SUNY Albany: Introduction to Cascading Style Sheets
- CSS Box Model
- Cascading Style Sheets and Dreamweaver
- A List Apart
- Dynamic Drive
- Style Gala: CSS Layout
- Web Design 101: Floats
- CSS Techniques Roundup – 20 CSS Tips and Tricks
- CSS Tutorial
- Guide to Cascading Style Sheets
- Test your web design in different browsers

CSS Tutorials and References

computer_teacher — Thu, 23 Jul 2009 19:13:08 +0000

These CSS Tutorials at sitepoint are an excellent starting point for those who want to learn and use CSS in web development. CSS is a presentation language used to describe the presentation and layout of elements in HTML and XHTML pages. CSS can also be applied to any kind of XML document. These CSS tutorials and references provide users with information on CSS properties, CSS selectors, CSS At-rules, CSS concepts and live examples of using CSS elements.

CSS Properties
These tutorials discusses properties of CSS elements such as boxes, list, table, layout, typographical, user interface and color and backgrounds. Each of these properties is explained in detail, though most of them are self explanatory.

- Box Properties
- Layout Properties
- List Properties
- Table Properties
- Color and Backgrounds
- Typographical Properties
- Generated Content
- User Interface Properties
- Paged Media Properties
- Vendor-specific Properties
- Alphabetic Property Index

CSS Selectors
Strictly speaking, a selector is a pattern and is used to match a set of elements in an HTML or XHTML document. This section explains how selectors are used in CSS to create simple patterns

- Universal Selector
- Element Type Selector
- Class Selector
- ID Selector
- Attribute Selector
- Selector Grouping
- Combinators
- Pseudo-classes
- Pseudo-elements

CSS At-rules
This CSSf tutorial provides information on At-rules that provide instructions and directives to the CSS parser. The At-rules elements are explained with their respective examples.

- @charset
- @import
- @media
- @page
- @font-face
- @namespace

CSS Concepts
These tutorials explains some key concepts in CSS such as syntax and nomenclature, inheritance, layout and formatting, filters and hacks and the basic differences between HTML and XHTML.

- What Is CSS?
- General Syntax and Nomenclature
- The Cascade, Specificity, and Inheritance
- CSS Layout and Formatting
- Workarounds, Filters, and Hacks
- Differences Between HTML and XHTML

CSS Live Examples
This section is a quick reference point for CSS properties and live examples are provided for most of them.

  CSS Properties
    Box Properties
      Dimensions
       - height
       - min-height
       - max-height
       - width
       - min-width
       - max-width
      Margins
       - margin-top
       - margin-right
       - margin-bottom
       - margin-left
       - margin
      Padding
       - padding-top
       - padding-right
       - padding-bottom
       - padding-left
       - padding
      Borders and Outlines
       - border-top-color
       - border-top-style
       - border-top-width
       - border-top
       - border-right-color
       - border-right-style
       - border-right-width
       - border-right
       - border-bottom-color
       - border-bottom-style
       - border-bottom-width
       - border-bottom
       - border-left-color
       - border-left-style
       - border-left-width
       - border-left
       - border-color
       - border-style
       - border-width
       - border
       - outline-color
       - outline-style
       - outline-width
       - outline
    Layout Properties
     - display
     - position
     - float
     - clear
     - visibility
     - top
     - right
     - bottom
     - left
     - z-index
     - overflow
     - clip
    List Properties
     - list-style-type
     - list-style-position
     - list-style-image
     - list-style
    Table Properties
     - table-layout
     - border-collapse
     - border-spacing
     - empty-cells
     - caption-side
    Color and Backgrounds
     - background-color
     - background-image
     - background-repeat
     - background-position
     - background-attachment
     - background
     - color
    Typographical Properties
     - font-family
     - font-size
     - font-weight
     - font-style
     - font-variant
     - font
     - letter-spacing
     - word-spacing
     - line-height
     - text-align
     - text-decoration
     - text-indent
     - text-transform
     - text-shadow
     - vertical-align
     - white-space
     - direction
     - unicode-bidi
    Generated Content
     - content
     - counter-increment
     - counter-reset
     - quotes
    User Interface Properties
     - cursor
    Vendor-specific Properties
      Mozilla Extensions
       - -moz-border-radius
       - -moz-box-sizing
       - The display Property Value: -moz-inline-box
      Internet Explorer Extensions
       - zoom
       - filter
       - behavior

CSS Selectors:
- Universal Selector
- Element Type Selector
- Class Selector
- ID Selector
- Attribute Selector
   - CSS3 Attribute Selectors
- Selector Grouping
  Combinators
   - Descendant Selector
   - Child Selector
   - Adjacent Sibling Selector
   - General Sibling Selector
  Pseudo-classes
   - :link
   - :visited
   - :active
   - :hover
   - :focus
   - :first-child
   - :lang(C)
    CSS3 Pseudo-classes
     - :nth-child(N)
     - :nth-last-child(N)
     - :nth-of-type(N)
     - :nth-last-of-type(N)
     - :last-child
     - :first-of-type
     - :last-of-type
     - nly-child
     - nly-of-type
     - :root
     - :empty
     - :target
     - :enabled
     - :disabled
     - :checked Pseudo-class
     - :not(S)
  Pseudo-elements
   - :first-letter
   - :first-line
   - :before
   - :after
   - ::selection

CSS Concepts:
  The Cascade, Specificity, and Inheritance
   - The Cascade
   - !important Declarations
   - Specificity
   - Inheritance
     - The CSS Property Value inherit

2 CSS Tutorials and Guides

computer_teacher — Tue, 30 Jun 2009 01:14:51 +0000

Here is a Comprehensive CSS Guide and Tutorial, located at wsabstract.com, that will teach and show you, from the ground up, how to code and use CSS (Cascading Style Sheets) in your web pages and sites. The introduction page of this CSS tutorial says this about what CSS is and how it can benefit your web site: ”Style is what gives an item its distinctive look or feel. For text it could be what font is used, what color, size, or spacing. It also applies to other HTML objects such as links, images, backgrounds, margins and borders. Some of the benefits to using CSS are more consistency, better layout and visual design, plus easier HTML coding. Also you can do things with style sheets that could never be done before.”

- Introduction
- 4 ways to defining style
- The basics, ids, classes, and spans
- Margins
- Font and text
- Backgrounds
- Advanced CSS concepts

Here is another CSS Tutorial, at htmlhelp.com, that will also help you learn and improve your CSS coding skills.

Style Sheets Now!: Change the appearance of hundreds of Web pages by changing just one file… Influence presentation without losing visitors… All with the power and flexibility of Web style sheets.
Quick Tutorial: A basic introduction to Cascading Style Sheets.
CSS Structure and Rules: An introduction to the various kinds of selectors, pseudo-classes, pseudo-elements, and cascading order.
CSS Properties: Descriptions of the various properties available in Cascading Style Sheets, level 1.
Linking Style Sheets to HTML: Various methods of incorporating style sheets into an HTML document.
Style Sheet Dependence: How to misuse style sheets and make your pages inaccessible.
CSSCheck: Check the syntax and style of your Cascading Style Sheets with this CSS lint.
CSS References: Links to CSS specifications and other documentation.

11 CSS Tutorials at lsu.edu

computer_teacher — Sat, 02 May 2009 05:01:20 +0000

These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. Each of these CSS Tutorials is accompanied with the applicable CSS code and how that code looks when integrated in HTML.

CSS: Borders
This tutorial explains how to create a border for an element on an HTML page using CSS.

CSS: Lists
This study material explains how to create a list of items and use visual indicators in them.

CSS: Margins
This tutorial discusses how margins can introduced via CSS to differentiate between elements on a web page.

CSS: Margins
This tutorial discusses how margins can introduced via CSS to differentiate between elements on a web page.

CSS: Media Types
CSS can be used in different types of media such as print, handheld and screens. This article introduces media types in CSS using the @media rule.

CSS: Padding
Cell padding, which is used to manipulate text positions in a web page, is discussed in this tutorial.

CSS: Psuedo-elements
Pseudo-elements allow users to make changes to certain part of the text in a web page. This tutorial discusses Pseudo-elements and how it is used in CSS.

CSS: Setting Font
Setting and using appropriate fonts on a web page using CSS is discussed in this article.

CSS: Tables
Tables are usually used to separate different areas of a web page to emphasize them. This study material discusses Tables in details.

CSS: Text Color
This article explains how the text color and its other characteristics can be changed and used in HTML.

CSS: The Syntax
This tutorial section discusses the syntax used in CSS for setting the properties and attributes for different web elements.

CSS Tutorials from htmldog

computer_teacher — Mon, 20 Apr 2009 13:29:16 +0000

These good CSS Tutorials at htmldog.com teach you the essentials of CSS. CSS is a style sheet design language that describes the presentation of a web document. Below CSS Tutorials provide quick and essential tips for beginners, intermediate and advanced users of CSS.

CSS Beginner Tutorial
The beginner tutorial explains how web designers can apply CSS in HTML, CSS properties and values, colors and text. Also explained are the alignment and structuring of the user interface using margins, padding and borders.

Applying CSS
The web designers can apply CSS in the HTML in different ways. This tutorial explains that in detail.
Selectors, Properties, and Values
This tutorial explains how to set selectors, properties and their values which help you to make your CSS.
Colours
CSS helps us to set the colors for the contents used in the HTML files and this tutorial help you in that direction.
Text
This tutorial teach us how to set different shapes of the texts in CSS.
Margins and Padding
Do you want to know how to set the spacing and margins in the web pages, this CSS tutorial helps you in that.
Borders
This tutorial teach you how to set borders in the web page using CSS.
Putting It All Together
This tutorial explains most of the well used methods and properties in CSS with code example.

CSS Intermediate Tutorial
This tutorial for intermediate users of CSS explains the classes and ID selectors, how to group properties to do away with code redundancy, writing Pseudo classes, setting shorthand properties and background images.

Class and ID Selectors
This tutorial explains the way you can define the selectors in the form of Class and ID Selectors.
Grouping and Nesting
This tutorial is helps you in understanding the way you can group the properties which can be avoid the repeated code. This tutorial also explains how we can set selectors within the selectors.
Pseudo Classes
We can define the state of the selectors using the Pseudo Classes. In this tutorial teach you how to use the Pseudo Classes.
Shorthand Properties
This tutorial teach you how we can set different properties, such as borders and margins in to one line with space.
Background-images
This tutorial talks about the background properties and it’s amalgamates.

CSS Advanced Tutorial
The advanced section of the CSS tutorials explains the layout and positioning of components to create a proficient user interface. CSS allows users to import other style sheets and set different media types and embedded fonts and a section below explains this in detail. The Specificity section discusses the problems of duplicated rules and how to resolve them.

Display
This tutorial explains the visual representation of HTML files using display property.
Page Layout
This section explains about the position and other properties used to set the layout of the HTML pages.
At-Rules
This tutorial teaches you to import style sheets. It also talks about different media type styles , character set of a stylesheet and embedded fonts.
Pseudo Elements
This tutorial explains the way of embedding Pseudo Elements to Selectors.
Specificity
This section talks about the conflict of duplicated rules in the CSS class.

Browser, CSS, and HTML / XHTML Tutorials

computer_teacher — Thu, 02 Apr 2009 05:03:57 +0000

Here are some of the best Browser, CSS, and HTML / XHTML Tutorials found at alistapart.com. These web development tutorials explain how Browsers, CSS, HTML and XHTML are used in developing many features of today’s web pages. All web servers and browsers support these technologies and thus any web programmer can make professional looking web pages. These CSS, HTML and XHTML tutorials are easy to follow, understand and implement.

Browser Tutorials:
How well does a browser handle content and data from different sources? Can all the design, code and applications interface and survive on one common platform without conflict? These tutorials discuss standards that should be followed while developing for the web so that these components can talk to each other without conflict. It also covers topics that include version targeting, positioning and HTML semantics.

- Advanced Debugging with JavaScript
- Semantics in HTML 5
- Return of the Mobile Style Sheet
- Understanding Progressive Enhancement
- Faux Absolute Positioning
- They Shoot Browsers, Don’t They?
- Version Targeting: Threat or Menace?
- Keeping Your Elements’ Kids in Line with Offspring
- From Switches to Targets: A Standardista’s Journey
- Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

CSS Tutorials:
CSS is a language used to present a document in a mrkup language. HTML and XHTML use CSS to style web pages to be displayed in them. These tutorials explain how CSS can be effectively used in web pages to define color, fonts, layout and presentation. It also provides code samples to write simple CSS sheets and execute them.

- Fluid Grids
- Return of the Mobile Style Sheet
- Progressive Enhancement with CSS
- Understanding Progressive Enhancement
- CSS Sprites2 – It’s JavaScript Time
- Faux Absolute Positioning
- Accessible Data Visualization with Web Standards
- Version Targeting: Threat or Menace?
- Keeping Your Elements’ Kids in Line with Offspring
- Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

HTML and XHTML Tutorials:
HTML and XHTML go hand in hand as XHTML has the same syntax as HTML and are inline with XML standards. These tutorials help explain how HTML and XHTML work with CSS and Javascript. They also explain how Javascript is used with CSS to style web pages and how they can be centrally located.

- Fluid Grids
- Semantics in HTML 5
- Return of the Mobile Style Sheet
- A More Useful 404
- Progressive Enhancement with JavaScript
- Progressive Enhancement with CSS
- Understanding Progressive Enhancement
- CSS Sprites2 – It’s JavaScript Time
- Faux Absolute Positioning
- They Shoot Browsers, Don’t They?

Excellent CSS Reference Sheet

computer_teacher — Wed, 25 Feb 2009 04:14:41 +0000

Here is an excellent CSS Cheatsheet from addedbytes.com (pdf format), giving you a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

Contents of CSS Cheatsheet:

- Selectors
- Pseudo-Selectors and Pseudo-Classes
- Sizes and Colors
- Box Model
- Positioning
- Dimensions
- Color / Background
- Text
- Fonts
- Boxes
- Tables
- Paging
- Interface
- Aural
- Miscellaneous

1-page XHTML & CSS Tutorial

computer_teacher — Wed, 25 Feb 2009 03:26:38 +0000

Here is a quick 1-page XHTML & CSS Tutorial, from Brown University. This tutorial will show you how to write valid XHTML (just HTML with a few minor tweaks) and then use CSS to control the typography, layout, and look-and-feel of your web pages and sites. CSS (Cascading Style Sheets) permits a minimal HTML code base for your pages while giving you a high degree of formatting and layout flexibility. This will result in your users having a better and more compelling experience, while giving you the ability to control your web site behaviour and layout from one CSS file.

Contents of this 1-page XHTML and CSS Tutorial:

XHTML:
- The Picky Bits up top
- Sample XHTML page
- Habit Forming
- Code-Phobic Alternatives

CSS:
- CSS explained
- The Three Different Ways to Bring in CSS
- Linked CSS
- Embedded
- In-line
- Anatomy of a CSS Rule
- Selectors
- Tag
- Class
- ID
- Nesting Selectors
- Link Pseudo-class Selectors
- div and span tags
- Basic Formatting
- Positioning and Layout
- Links

Web Design, CSS, and HTML Tutorials

computer_teacher — Tue, 20 Jan 2009 03:05:45 +0000

Here are 45 Tutorials covering Web Design, CSS, and HTML at woork.blogspot.com. These web development and design tutorials are included in this site’s Woork Handbook, which is a free eBook that teaches CSS, HTML, Ajax, and web programming.

12 Website Design Tutorials and Tips:

- Step by step guide for newbie to design a simple web application
- Set up your Workspace
- A typical website structure
- Config.php: define your database connection’s parameters
- Design the page layout using CSS
- Conceptual design for index.php page layout
- Load page using URL variables and PHP include() function
- Load pages using URL variables and Coldfusion cfinclude tag
- A typical website structure (Coldfusion)
- Web Navigation bar using CSS, PHP and URL variables
- Web Navigation bar using CSS, Coldfusion & URL variables
- Add #navbar elements to default.css file and to index.php

33 CSS, HTML, Web Design Tutorials and Tips:

- Structured process you must know to develop a web application
- Useful guidelines to improve CSS coding and maintainability
- CSS coding: semantic approach in naming convention
- Simplicity is better: some suggestions for a clean blog layout
- Are you a CSS fanatic?
- Liquid layer with rounded corners using css
- CSS Tutorial to Optimize CSS files to improve code readability
- Three column fixed layout structure using CSS
- Digg-like navigation bar using CSS
- Simple CSS vertical menu Digg-like
- Table’s anatomy: why tables are not so bad
- Liquid styled input element with CSS
- Flickr like horizontal menu
- Socialiconize your site
- Tabbed search bar using CSS and Javascript
- Beautiful CSS Form
- Liquid expandable section with rounded corners using CSS
- How to design a compelling header for your site using CSS
- Write a well structured CSS file without becoming crazy
- CSS Tutorial for Perfect Pagination Style
- Clean Tab Bar Digg-like using CSS
- CSS Message Box collection
- Two CSS vertical menu with show/hide effects
- Nice comments counter style for your blog post
- Top-Down approach to simplify your CSS code
- Use CSS to Create a Pastel Color Menu with Dynamic Submenu
- Beautiful CSS buttons with icon set
- Clean and pure CSS FORM design
- Nice CSS menu with feed reader icons list
- Navigation bar with tabs using CSS and sliding doors effect
- Nice login and signup panel Newsvine like using CSS
- Tips to design your site for mobile devices
- Elegant glass style Navigation bar using CSS & toggle animated effect

CSS Tutorial and Guidelines from DesignReviver

computer_teacher — Tue, 20 Jan 2009 00:36:56 +0000

Here is an excellent CSS Tutorial with Guidelines from designreviver.com, titled 13 Training Principles of CSS Everyone Should Know. These CSS tips and design suggestions will help you write better CSS for your website. They will also assist you in writing CSS code quicker and will make your website more efficient. Each guideline is explained in detail, with code examples where applicable.

1. Name CSS Classes Intelligently
2. Use Shorthand Coding Techniques
3. Know Your Audience & Support Their Browsers
4. CSS vs. Javascript
5. Use Premade CSS Templates
6. Validate Your CSS
7. Use The Proper Doctype
8. Use a CSS Compressor
9. Remember Case Sensitive Element Names
10. Download CSS Resource Guides
11. Don’t Declare Default Values
12. Group Your Selectors
13. Simplify Your Coding