Adding Background Images with CSS

March 27th, 2010

In this CSS Tutorial, you will learn how to apply a background image to the <body> element. You will also learn how to apply the background-repeat and background-position properties. The goal is to create a gradient image that repeats down the right edge of the page. Setting up the HTML Code The HTML code for this tutorial will be comprised of three paragraphs of text Read More...

How To, Get great looking Transparencies with RGBa

January 22nd, 2010

CSS 3.0 has a great new features called RGBa. You can now make a transparent background, transparent text, or just about anything else transparent with RGBa. .myClass { background-color:rgba(255,255,255,0.5) } The above tag will color your area with a white background that is 50% transparent. The only issue with RGBa at this time is that IE doesn't support it Read More...

CSS, How to work with content areas.

October 3rd, 2009

The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents. p { width: 100pt ;} p { width: 20pc;} p { width: 300px;} p { width: 40em;} p { width: 50ex;} p { width: 600mm;} p { width: 8in;} p { width: 50%;} The color property can be used to style the text color Read More...

CSS, How To tweak css for only Safari?

August 13th, 2009

If you have spent anytime dealing with CSS you have run into issues with a browser rendering code incorrectly. You may even have gone as far as to make several style sheets and use a browser check to tell the browser which one to use. Most of my websites dont need more then one style sheet. I have come to realize that if I am more then a few pixels of then my code is somehow incorrect Read More...

CSS, How to use @import styles

August 12th, 2009

@import Styles? Header and external style sheets also can import other style sheets using the @import rule. The @import rule must be placed before all other rules in the header or external style sheet. @import "advanced.css"; p { font-family: arial, helvetica, san-serif; margin: 1em; padding: 1em; background-color: black; } Imported styles can be used to link to multiple CSS files as well as to hide styles from older browers.

CSS, How to use External Style Sheets!

August 11th, 2009

The third method of applying styles to  document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages. To change the header style to an external style, move the rule set to a new CSS file Read More...

CSS, How to Apply Inline Styles.

August 10th, 2009

CSS, Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets Read More...

CSS, How To use advanced selectors.

August 6th, 2009

Child selectors Child selectors are used to selected an element that is a direct child of another elements parent. Child selectors will not selected all descendants, only direct children. For example, you might want to target an <em> that is a direct child of a <div>, but not other <em> elements that are descendants of the <div> *Child selectors are not supported by IE 5, 5 Read More...

CSS, How to use Universal Selectors

August 6th, 2009

Universal selectors are used to select any element. For example , to set the margins and padding on every element to 0, * can be used. *{ margin: 0; padding: 0; } Universal selectors also can be used to select all elements within another elements. The code below will select any element inside the <p> element Read More...

CSS, How to use Descendant Selectors

August 5th, 2009

Sample HTML <body> <div id="content"> <h1> Heading Here </h1> <p> Lorem ipsum dolor sit amet. </p> <p>Lorem ipsum dolor <a href="#">sit</a> amet.</p> <div> <div id="nav"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </div> <div id="footer"> Lorem ipsum dolor <a href="#">sit</a> amet Read More...