Home arrow Style Sheets arrow CSS for the Newbie
STYLE SHEETS

CSS for the Newbie


Although style sheets have technically been around in one form or another since the 1970s, it wasn't until around 1996 that they truly became an official part of the web. And although they had a rocky start with browser support, today they are widely used and offer designers a simple way to define style rules for their web pages, saving them from having to type in colors, fonts, and other layout properties over and over again.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
February 25, 2008
TABLE OF CONTENTS:
  1. · CSS for the Newbie
  2. · Putting it all Together
  3. · Selectors...Unite!
  4. · Applying a Style to an Element with an Attribute
  5. · Doing It In Style

print this article
SEARCH DEVARTICLES

CSS for the Newbie
(Page 1 of 5 )

CSS stands for Cascading Style Sheet by the way. The style part defines how the HTML elements will be displayed in the browser, the sheet is where you store the styles, and the cascading occurs when you use multiple style definitions. A little confusing? It'll be clear by the end of this tutorial.

Before we begin, I am going to make a few assumptions:

  • You know HTML

  • You know how to create basic websites

  • You have a text editor like Notepad

  • You have a pair of parachute pants like MC Hammer and will wear them as you read this tutorial (okay, that's optional)

Writing CSS

CSS syntax is made up of three different parts:

The Selector

The selector is typically whichever element or tag in HTML to which you wish to give a definition (such as the <body>, <h1>, <p>, <tables>, <lists>, etc.).

The Property

The property represents the attribute of the tag/element you wish to change. It is separated from the Selector by a semicolon. Some properties you can change are color, font, height, width, alignment, and so forth.

The Value

The value is what you want to change the property to. For instance, I might want to change the font color to red. I would do so by changing the value to red.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials