Cascading Style Sheets (CSS) provide the presentation layer to a Web page. Using CSS, Web designers can control the display presentation of a site from one central document. See also our CSS layout resources and information section.
- Optimize Your Web Page with CSS Sprites
- CSS sprites mash up all the images used on a webpage into one large image and display only the part that contains the image wherever it's required. Using CSS sprites drastically reduces the load time of the page.
- Use Your Favorite Font on Your Website with CSS Web Fonts
- Build your website using HTML but don't limit your Web text to only certain fonts. With CSS Web Fonts, you can display the text in your favorite font.
- Top 10 New Features in CSS 3
- Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. Explore 10 of the exciting new features in CSS 3.
- Top 10 CSS Tools for the Design-challenged Web Developer
- Writing CSS code can be a bear for Web developers. These ten CSS tools and frameworks can make the development process much easier.
- Custom Scrollbars with CSS
- CSS 3 is well on its way and promises some amazing features, including scrollable divs. There are several implementations of custom scrollbars, but the following implementation works across all popular browsers and supports scrolling with the mouse wheel.
- How to Use CSS for Search Engine Optimization
- Using external CSS files to determine the design attributes creates clean HTML code and will create better search engine rankings. With some knowledge of CSS you can change the code without destroying the visual layout.
- How to Create Great HTML Emails with CSS
- HTML e-mails have great appeal and are widely used for all kinds of professional correspondence, but ensuring that your message displays correctly can be a daunting task. Fortunately, we have options.
- Browser Support for CSS
- CSS rules are always interpreted by Web browsers. These standards give specifics on how browsers should display those rules but they're not always followed. To design pages with CSS, you need to know the standards, and to understand how browsers' quirks and flaws will affect your Web design results.
- CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns
- This article takes a look at fixed-width, liquid and elastic layouts. Previously, Previously, in the previous article, all the examples have used widths defined in pixels. This type of layout is known as fixed-width layout, or sometimes "ice layout" due to its rigid nature.
- CSS Mastery: Page Layout
- One of the major benefits of CSS is the ability to control page layout without needing to use presentational markup. This week you'll learn how to horizontally center a design on a page, create two and three column float based layouts and more.
- CSS 2.1 Properties
- Cascading Style Sheets (CSS) are used for Web page layouts and aid in separating the document's style from its structure. Used correctly, CSS can be a powerful Web design tool. This extensive reference covers all the properties of the current version.
- Style Sheets 'Made' Easy
- One of the biggest problems many people have with setting up a Web site is creating the cascading style sheets (CSS). If you don't know how to create a style sheet, or don't do it that often, here's an alternative.
- How to use CSS to Create a 'Two Step' Photographic Gallery
- In the wake of his success with 'How to Create a Photographic Gallery Using CSS,' author Stu Nicholls has created a new method which doesn't require thumbnail images and has a unique two step method of display. The 'mouse hover' stage creates a half size image and the 'mouse click' creates a full size image.
- How to Use CSS to Solve
min-widthProblems in Internet Explorer - The lack of support for minimum width in Internet Explorer has caused many problems for web designers. Until now, the only way to emulate min-width is to use either JavaScript or Internet Explorer expressions (indirect JavaScript), but now there's another solution.
- How to Style an Unordered List with CSS
- In this article you will learn how to style an unordered navigation list using CSS, then take it a step further and add a pop-up information box for each link item so that your visitors will get an indication of the content for the page link.
- How to Add Fluid Borders to Your Boxes with CSS
- In the last tutorial you learned how to style a definition list. This week, you'll delve deeper into this process and learn how to add different fluid borders to your boxes using just CSS.
- Spring Into HTML & CSS: Working with Color and Images Using CSS
- Color options in CSS include hexadecimal color, hexadecimal shorthand color, RGB color, etc. Using images, you can create beautiful layouts without the constraints of tables. This week, you'll learn how to apply images to backgrounds and elements, and how to use images for a range of visual techniques.
- How to Style a Definition List with CSS
- Many tutorials on the styling of CSS lists for menus use unordered lists, but these can be difficult to understand since extra styling is needed to remove the bullets. This week, you'll learn how to style a Definition List, which is equally suitable for menus, but is a little easier to understand.
- How to Create a Frames Layout with CSS
- By far the most sought after use of CSS is to emulate the dated html 'frame' layout, whereby the header, navigation and footer stay on screen at all times and the content area will scroll. In this tutorial, you'll learn how to all these things with CSS.
- How to Create Flick Animations with CSS
- Fed up with Flash and GIF animations? Try out the alternative - CSS flick animation. These animations normally appear as static images on the page but they spring into life when you move your mouse across them.
- How to Create a Photographic Gallery Using CSS
- Web sites (both personal and professional) often make use of galleries to show off photographs, artwork, etc. Here you'll learn how to create a professional gallery using an unordered list of photographs and a Cascading Style Sheet (CSS).
- How to Create an Image Map Using CSS
- Learn how to turn an ordinary definition list into an image map using nothing more than CSS, and what's more, it should work in all modern browsers. Each styling step is fully explained so you can see how to implement it for yourself.
- How to use CSS for Flickerless Image Replacement
- One major use of CSS is the styling of unordered lists used to hold menu links. In this tutorial you'll learn how to remove the unordered list items, replace them with images and using two images per link, have a hover state that is flicker free in Internet Explorer.
- CSS: Cascading Style Sheets Made Easy
- HTML was originally intended to be used to define the content of a document using tags such as
<h1>,<p>,<table>,etc. As browsers evolved, it became difficult to create Web sites where the content was separated from the presentation layout. To solve the problem, styles were created. This article is a brief introduction to CSS and how it works. - Advanced CSS Layouts
- Learn how to create complex table-like layouts with CSS. We replicate WebReference.com's front page using only CSS and lots of iterations.
- Cascading Style Sheets: Separating Content from Presentation
- This glasshaus excerpt outlines both the historical events driving the need for CSS based page development and a basic introduction of CSS itself.
- CSS: A Beginner's Guide
- This book excerpt covers the CSS visual model; discussing at length the box model and associated box properties.
- HTML with Style
- Our archived HTML/CSS tutorials will make sure you're up to code. Whether you're a beginning Web coder, or an advanced developer, Stephanos will give you the foundation you need to look and perform your best.
- Making Headlines with CSS
- It only takes a dash of CSS to spice up otherwise bland content and grab your reader's attention. In this tutorial, guest author Christopher Schmitt provides specific examples for dressing up your page and section headers.
- Style Sheets Syntax
- A quick look at the basics in using style sheets within your Web pages. From the IDG book, HTML Web Publishing Secrets.
- Using Multiple CSS Classes on Elements
- Making use of the latest coding standards not only makes a Web developer's job easier, but can also result in smaller pages. Applying multiple CSS classes to individual elements allows you to style your HTML with less overall bytes.
Book Reviews
- Book Review: Cascading Style Sheets - Designing for the Web
- Written by the creators of CSS (Hakon Wium Lie and Bert Bos), this book covers all aspects of CSS, beginning with the basics, such as the anatomy of a rule, linking styles sheets to documents and progressing to more advanced topics.
- Book Review: Spring into HTML and CSS
- Do you need to quickly get up to speed when building Web sites? Were you recently elected to create a small Web site for your company? Perhaps you work in a small office and just want a presence on the World Wide Web. Whatever your reasons this book offers a simple solution.
- Book Review: Integrated HTML and CSS
- Traditionally, when learning to code web pages, HTML is taught first, followed by CSS, but since both are related, it would make more sense to teach both at the same time. In this book, HTML and CSS are combined, making them faster to learn. Designed with the beginner in mind, this book assumes no prior knowledge of HTML or CSS.
Other Guides
- Style Sheets
- This page introduces the basic concepts of cascading style sheets, and links to examples and resources. In addition there is also a tutorial which shows you the basic mechanisms of style sheets.
- WebDeveloper.com's Guide to Cascading Style Sheets
- Cascading Style Sheets are a clean way to make sure the text on all your pages looks exactly the way you want ... almost like XML for designers. Read all about CSS in this lucid explanation full of live examples.
- CSS Help
- A multisectional tutorial center with pages on CSS tables, fonts, text, cursors, lists and more. Lots of non-CSS reference info as well.
- Cascading Style Sheets
- The top resource on style sheets. From W3C.
- Index DOT CSS: The Advanced CSS Reference
- An indepth reference on style sheets with sections on syntax, selectors, and declaring shorthands.
- Effective Use of Style Sheets
- Not a tutorial but rather a guide to CSS implementation, by Jakob Nielsen.
Tools
- Software Review: NoteTab Pro
- If you're comfortable with HTML and CSS and don't want or need a WYSIWYG program, then NoteTab Pro may be the editor for you. Its many features and clip libraries make it an excellent choice for getting down and dirty in the midst of your code.
- Review: TopStyle Pro 3.11
- Of the many ways to create and edit web pages, TopStyle Pro is a (X)HTML/CSS editor; a combination which helps to save time in the editing process. If you like HomeSite, you'll love TopStyle Pro.
- CSS Check
- Check the syntax and style of your Cascading Style Sheets with this CSS lint. Just type in the URL online or upload the file from your computer.
- CSS Validator
- CSS Validation service from the W3C. You can download the Validator or upload your file or you can validate by URI also.
Find a programming school near you