Free Web Design, Development and Programming Training and Tutorial Resources




    



March 8, 2011

Excellent CSS Tutorials

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.



Tags for this post>>

February 21, 2011

CSS Guide

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



Tags for this post>>

January 15, 2011

36 CSS Tutorials

Here are developertutorials’ 36 CSS Tutorials that teach and show you how to effectively use Cascading Style Sheets (CSS) in your web pages and sites. CSS topics covered include disabling buttons and text boxes, tabbed navigation, cursors, absolute positioning, text sizing, tableless site, alternate stylesheets, link styles and colors, page scrollbar styles, hover link text, layered sub-menus, backgrounds, CSS with forms, and CSS selectors.


36 CSS Tutorials:

 - Styling Disabled Buttons / Disabled Text Boxes in CSS
 - Four CSS Tricks Every PHP / Web Developer Should Know
 - Planning Your Stylesheet – The Definitive Guide
 - CSS Shorthand Properties
 - Print Stylesheet – The Definitive Guide
 - An Introduction to CSS
 - Overlapping tabbed navigation in CSS
 - Cascading Style Sheets – CSS
 - Create a Stretchable Elastic Website with Absolute Positioning
 - CSS Cursors
 - Fluidity and Text Sizing
 - Creating Tableless Sites – Why and Some Basics
 - Creating Rollover Effect Using CSS List Menus
 - CSS Browser Detection – The Complete Guide
 - How to Position Text and Images Exactly
 - Alternate Stylesheets
 - Creating and Linking External CSS files
 - Having Different Link Colors on One Page
 - Fixed Image Background for a page
 - Links and Styles
 - Changing Table Background on MouseOver
 - Remove Underlines from Links
 - Define Page Scrollbar Styles
 - No Print Script
 - CSS – Maximum benefits
 - Fun with Hover Link Text
 - Making Your Own Layered Sub-Menus
 - Create Cascading Style Sheet – CSS backgrounds
 - Designing Consistent Form Field Sizes
 - CSS & Round Corners: Making Accessible Menu Tabs
 - Applying CSS to Forms
 - Use Cascading Style Sheets Selectors
 - Cascading Style Sheets (CSS); Backgrounds (2 of 2)
 - Cascading Style Sheets (CSS); Backgrounds (1 of 2)
 - Cascading Style Sheets (CSS); Learning More
 - Cascading Style Sheets (CSS); Getting Started



Tags for this post>>

October 12, 2009

CSS 2.0 Tutorial

Here is a CSS Tutorial, at New Mexico Tech Computer Center, that will help you with styling web pages and sites using CSS 2.0. This tutorial acts as a reference guide for Cascading Style Sheets 2.0, which is used for describing the style, layout, etc. of Web pages. In this CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once. It contains everything that is required for you to master CSS 2.0. This CSS tutorial also can be downloaded as a pdf.


Tutorial on Styling Web Pages with CSS 2.0:

  What are Cascading Style Sheets and why should you use them?
  Connecting your page to a style sheet
  Overall structure of a style sheet
  At-rules
  How to write CSS rules
  Common value types in CSS
     - Dimensions
     - Specifying colors
     - String constants
     - Universal resource identifiers (URIs)
     - Counters
     - Specifying angles
     - Times
     - Frequencies
  Selectors
     - Element type selectors
     - Selecting elements by class
     - Selecting elements by their context
     - Child selection
     - Adjacent element selection
     - Selecting by attribute values
     - Selecting specific single elements by ID
     - Pseudo-classes
     - Pseudo-elements
     - The universal selector -When rules collide
     - Cascading
     - Specificity: Which selector applies?
     - Inheritance
  Declarations
  Font properties
     - The font-family property
     - The font-style property
     - The font-variant property
     - The font-weight property
     - The font-size property
     - The font property
  The display property: What kind of box is this?
  Other text properties
     - The line-height property
     - The text-indent property
     - The text-align property
     - The text-decoration property
     - The text-transform property
     - The white-space property
     - The letter-spacing property
     - The word-spacing property
     - The vertical-align property: Shifting the baseline
     - The quotes property: Specifying quote characters
  The color property
  The background properties
  Designing with box elements
     - Side lists
     - The height and width properties
     - The clear property
     - The float property
     - The padding properties
     - The border properties
     - The margin properties
     - The overflow property: What if it doesn’t fit?
     - The clip property: Specify a clipping rectangle
     - The visibility property: Can we see the content?
     - The position property: Positioning boxes
     - The box offset properties: top, bottom, left, and right
     - The z-index property: Stacking order
  The content property: Specifying content in pseudo-elements
     - The counter-reset property
     - The counter-increment property
  The list properties
     - The list-style-type property
     - The list-style-image property
     - The list-style-position property
     - The list-style property
     - The marker-offset property
  Tables
     - Table column properties
     - How table size is computed
     - Table border properties
     - The speak-header property: Aural rendering of tables
  User interface options
     - The cursor property
     - Selecting colors to match UI components
     - Dynamic outlines
  Aural stylesheets
     - Spatial presentation: the azimuth property
     - Voice properties
     - The volume property
     - The speak, speak-punctuation , and speak-numeral properties: spelling it
     - General voice qualities: voice-family, pitch, pitch-range, stress, and richness
     - Timing properties: speech-rate, pause-before, pause-after, and pause
     - Element cues: cue-before, cue-after, and cue
     - Audio mixing: play-during
  The @import rule: Importing another stylesheet
  The @media rule: Tuning for different rendering platforms
     - Media types
  The @page rule: Paged media
     - The size property for paged media
     - Controlling page breaks
     - Orphan control
     - Widow control
     - Crop marks and alignment targets: the marks property
     - The page attribute: Selecting a page type



Tags for this post>>

August 18, 2009

30 CSS Navigation and Button Tutorials

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



Tags for this post>>

August 5, 2009

HTML and CSS Tutorials and References

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



Tags for this post>> | |

July 23, 2009

CSS Tutorials and References

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
     - :only-child
     - :only-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



Tags for this post>>

June 29, 2009

2 CSS Tutorials and Guides

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.




Tags for this post>>
May 1, 2009

11 CSS Tutorials at lsu.edu

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.



Tags for this post>>

April 20, 2009

CSS Tutorials from htmldog

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.



Tags for this post>>

April 1, 2009

Browser, CSS, and HTML / XHTML Tutorials

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?



Tags for this post>> | | |

February 24, 2009

Excellent CSS Reference Sheet


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



Tags for this post>>

1-page XHTML & CSS Tutorial


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



Tags for this post>> |

January 19, 2009

Web Design, CSS, and HTML Tutorials

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



Tags for this post>> | | |

CSS Tutorial and Guidelines from DesignReviver

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



Tags for this post>>

October 21, 2008

HTML and CSS References and Examples

Here are some excellent HTML and CSS References and many useful HTML and CSS Coding Examples, from Java2s.com. These web development support documents will help you build your HTML and CSS skills with developing web sites. Areas covered include CSS Attributes, HTML Attributes, and all HTML Tags.


HTML and CSS References

1.  CSS Attributes and Javascript Style Properties
2.  HTML Attributes Reference
3   HTML Tag Reference


HTML and CSS Code and Examples

1.  Background Attributes
2.  Basic Attributes
3.  Basic Tags
4.  Box Model
5.  CSS Attributes and Javascript Style Properties
6.  CSS Controls
7.  Form Attributes
8.  Form Style
9.  Form Tags
10. Frame Attributes
11. Frame Tags
12. HTML
13. IE Firefox
14. Images
15. Layout
16. Layout Attributes
17. Link Attributes
18. Link Tags
19. List Attributes
20. List Style
21. List Tags
22. Marquee Attributes
23. Meta Tags
24. Microsoft Attributes
25. Object Attributes
26. Object Tags
27. Reference
28. Style Basics
29. Styles Tags
30. Table Attributes
31. Table Style
32. Table Tags
33. Text
34. Text Attributes
35. Text Tags
36. XML


Tags for this post>> |

August 23, 2008

CSS Tutorial from University of Texas

Here is an excellent Cascading Style Sheets Tutorial (CSS Tutorial), from the University of Texas. A style sheet provides a set of rules that how a web page should display. Style rules specify a property for an HTML tag or set of tags for items such as font styles and sizes, paragraph positioning, and line spacing. Style sheets maintain the separation between structural and presentation information. This CSS Tutorial gives you a good introduction and instructions for coding web pages and sites using cascading style sheets, along with several CSS samples.


Contents of this CSS Tutorial:

 - Introduction

 - Incorporating Style Sheets Into Your Document

 - Example Rules

 - CSS Properties

 - Inheritance

 - Style Sheets and Forms

 - Positioning

 - Backgrounds

 - Sample 1

 - Sample 2

 - Conclusion

 - References


Tags for this post>>

April 20, 2008

CSS Tutorial from Open-of-course.org

Here is Open-of-course.org‘s online CSS Tutorial that will teach you how use use and apply Cascading Style Sheets (CSS) in your web pages. Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. CSS in HTML pages is used to define colors, fonts, layout, and other aspects of document presentation. Besides separating the content from the content’s presentation, CSS also permits the same web pages to be presented in different styles for different rendering methods, such as on-screen, in print, by voice, etc. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities are calculated and assigned to rules, so that the results are predictable. Also check out this site’s CSS Forum to communicate with other web developers using CSS.


CSS Tutorial Topics
:

Introduction to CSS

Inheritance and Cascading in CSS

Block and Inline Elements

Datasheet-style Form

Tabular List

Other CSS Resources



Tags for this post>>

March 26, 2008

322 CSS Tutorials

Here are 322 CSS Tutorials, linked from the tutorial portal, tutcity.com. Cascading Style Sheets (CSS) is a simple and powerful method for managing and applying style to web documents and HTML pages. Whether you are a web designer, developer, or anywhere in between, CSS is an important part of developing websites. These CSS tutorials teach you how use Cascading Style Sheets and much of the functionality you can get by using them.


CSS Tutorial Topics:

 - Advanced Techniques
 - Background
 - Box Model
 - Buttons and Navigations
 - Colors and Effects
 - Cursors
 - Forms
 - Getting Started
 - Layouts
 - Links Formatting
 - Miscellaneous
 - Positioning and Styling
 - Scrollbars
 - Text Formatting


Tags for this post>> |

December 27, 2007

HTML and CSS Tutorials from bytesizeoffice.co.uk

Here are the HTML and CSS Tutorials hosted bytesizeoffice.co.uk. These will teach you several important topics with creating and designing web pages using HTML and CSS.


HTML and CSS Tutorials
:

Part One 
Website introduction, web site addresses, web site files – HTML Files, Style Sheets, Image Files.
 
Part Two
Make a Web Page, example web files, example HTML files

Part Three
Styles Sheets, How to specify a Style sheet, Cascading Style Sheets.

Part Four
Common Style Properties and Values, Style Sheet Properties, Style sheet Size Values, Style Sheet Colours, Common Style Sheet Properties


Tags for this post>> | |

Next Page »