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...
Tags: background-attachment, background-color, background-image, background-image property, background-position, background-repeat, CSS, div, How To, selectors
Posted in CSS Adding Background Images |
No Comments »
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...
Tags: background, background-color, background-image, background-image property, CSS, How To, id, RGBa, selectors, transparent, Tutorials
Posted in Uncategorized |
1 Comment »
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...
Tags: class, color, content, CSS, How To, id, padding, selectors, Tutorials, width
Posted in CSS Box Model |
No Comments »
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...
Tags: CSS, fix, How To, rules, Safari, selectors, tags, trick, Tutorials, tweak
Posted in CSS Tips and Tricks |
No Comments »
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.
Tags: combine, CSS, How To, id, import, selectors, Tutorials
Posted in CSS Applying Styles |
No Comments »
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...
Tags: CSS, external, How To, id, link, padding, selectors, stylesheet, Tutorials
Posted in CSS Applying Styles |
No Comments »
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...
Tags: CSS, How To, html, id, inline, selectors, style, styles, Tutorials
Posted in CSS Applying Styles |
No Comments »
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...
Tags: adjacent, attributes, child, class, CSS, How To, id, pseudo, Pseudo-classes, Pseudo-elements, selector, selectors, Tutorials
Posted in CSS Selectors |
1 Comment »
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...
Tags: CSS, How To, id, margin, padding, select al, selectors, Tutorials, universal
Posted in CSS Selectors |
1 Comment »
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...
Tags: CSS, descendant, h1, h2, How To, id, rules, selectors, tags, Tutorials
Posted in CSS Selectors |
1 Comment »