Home arrow Style Sheets arrow Page 4 - 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 / 6
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

TOOLS YOU CAN USE

advertisement
CSS for the Newbie - Applying a Style to an Element with an Attribute
(Page 4 of 5 )

If you want to apply your style to elements with certain attributes, you can do so in the following manner:


input[type=”textarea”] {background-color: yellow}

This will give every textarea in your page a background color of yellow.

Using the id Selector

The Id Selector allows you to apply styles to HTML elements that have a specific id value. Here is an example:


#fred {text-family: Verdana; color: orange}

The above code will apply the style to any HTML element with an ID value of “fred,” whether it's a table, a paragraph, a header, etc.

If we wanted to apply the style to a specific element type with an ID value, we would do so like this:


h1#bigguns

{

text-family:Impact;

color: purple

}

This rule would be applied to an H1 tag that had the id of “bigguns.”

Just a reminder regarding the ID of elements: you may not have two elements with the same id value in the same document, and value must begin with a letter from the alphabet. The value is case-sensitive and may contain letters, numbers, hyphens, underscores, colons, and periods.

Leaving a Comment

Everyone likes to put their two cents in, and even nerdy programmers are no exception. In fact, they probably comment more than anyone else. Leaving comments in your code is a good way to tell future programmers, who may have to work on your code, what exactly it was you were trying to accomplish. It is also a useful reminder for yourself when you look back upon it months later and wonder what the heck you were doing.

In CSS you leave comments like so:


/* Look at me I am a comment! The browser does not see me tee-hee! */


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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