css - freeyourdesign.com

archived posts: css

CSS Global Reset Styles

in css by fyd on 30 Apr 2008

For me, one of the best parts of running this blog is that I am always learning something new. Doing research for new posts and finding new resources and sites helps me expand my knowledge and pass it on to the readers. With all the CSS I have written and learned, I never really knew about global resets. I have seen them before in other peoples code, but didn't pay much attention to them.

I recently came across a great article over at perishablepress.com that explains what they are used for and gives a long list of different types of resets. I have unknowingly used resets before when setting padding and margin to 0 for different elements and then adjusting it to my liking.

It's important to design sites with cross-browser compatibility in mind. With the different ways that browsers handle CSS and the fact that each browser has it's own default setup for things like margins and padding, adding these global resets can really help the design process. I plan on implementing some of these resets in future design projects.

Here is an example of a CSS reset. To find a lot more check out this Killer Collection of Global Reset Styles.

* {
     padding: 0;
     margin: 0;
}

The * is called a wildcard symbol. Here it is used as a wildcard selector which means that these properties are applied to every element. So, all the padding and margins are reset to 0.

You can add other properties to the wildcard selector. Some people will add border: 0; and outline: 0;. The above, with padding: 0; and margin: 0;, is one of the most popular CSS resets used.

The post at perishablepress is worth a read, and they have a lot more reset options.

Popularity: 12% [?]

CSS Tip - Using Link Anchor Pseudo Classes

in css by fyd on 28 Apr 2008

Let's take a look at styling anchor tags, or links, using CSS. We will be going over the CSS pseudo-classes that are used with links - link, visited, hover, and active. First, let's take a look at the link pseudo-class in CSS.

:link - this pseudo-class is used to style a normal unvisited link. When you are styling links you should put this pseudo-class first.

a:link
{
color: #339966;
}

Notice that we use the HTML tag, or selector, a because that is how a link is represented in HTML. The :link represents the pseudo-class. Then you set your properties between the curly braces. This CSS will change all the unvisited links to a green color.

:visited - this pseudo-class is used to style a visited link. When you are styling links you should put this pseudo-class second.

a:visited
{
color: #00ffff;
}

You will see that most sites will set the visited link color to the same color as the normal a:link color.

:hover - this pseudo-class is used to style the mouse over effect of a link. When you are styling links you MUST put this after a:link and a:visited.

a:hover
{
color: #FF0000;
}

:active - this pseudo-class is used to style an activated link element. When you are styling links you MUST put this after a:hover.

a:active
{
color: #FF00FF;
}

This effect is seen while clicking the link. You will find the a lot of sites will style a:hover and a:active the same.

Putting it together in the HTML.

<html>
<head>

<title>Link and pseudo-classes</title>

<!– Embedded Styles –>
<style type="text/css">
a:link
{
color: #339966;
}

a:visited
{
color: #00FFFF;
}

a:hover
{
color: #FF0000;
}

a:active
{
color: #FF00FF;
}

</style>

</head>

<body>
<p>
<a href="#">A Link</a> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed <a href="#">diam nonummy
nibh</a> euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
</p>

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

You can see how the styles effect the links. You can also combine these anchor CSS pseudo-classes with regular CSS classes. This can help you style links differently throughout the page.

a.className:link, a.className:visited
{
color: #ff0000;
text-decoration: none;
}

a.className:hover, a.className:active
{
color: #00ff00;
text-decoration: underline;
}

The above CSS shows you how to add a class name to the pseudo-classes and how to style multiple elements at the same time. className can be whatever you want to name your class. You can put the :link and :visited pseudo-classes together by adding a comma between declarations. The HTML would look like this:

<p>
<a class="className" href="#">A Link</a> Lorem ipsum
dolor sit amet, consectetuer adipiscing elit,
sed <a class="className" href="#">diam nonummy nibh</a> 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

All you need to do is add class="className" to the anchor tag.

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Styling links using CSS is easy - just remember to put the pseudo-classes in the correct order - :link, :visited, :hover, :active.

The HTML

Popularity: 17% [?]

CSS Tip - Different Color Borders

in css by fyd on 25 Apr 2008

A quick CSS tip. Don't want your css border to have the same color for every side. Well, you can make each side have a different color - it's easy.

.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}

Some text in the box

Let's take a closer look at the css border properties. We start off by creating a border: that has a 3px 'stroke' that is solid and the color black. The next property we use is border-color:. The format here is TOP, RIGHT, BOTTOM, LEFT - or clockwise around the square starting from the top. Even though we set a color in the border: property, we put border-color below it which gives it precedence - or it 'overwrites' the border's color.

Need the HTML - I used an embedded stylesheet here, but this will work the same in an external stylesheet.

<html>
<head>
<title>CSS Different Colored Border</title>

<style type="text/css">
.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}
</style>
</head>

<body>

<div class="box">
<p>
Some text in the the box
</p>
</div>

</body>
</html>

Popularity: 7% [?]

CSS Custom Search Field or Textfield

in css by fyd on 10 Apr 2008

Tired of those normal old text field boxes? Well, we are going to create our own custom text field. You can use it on a form or for your search field on your blog. We will start out by simply using CSS to customize the color of the text field's background and border. It's simple, but it can make a big difference and help your search field or form fit in with the design of your site.
(more…)

Popularity: 67% [?]

CSS Gradient Background Fade

in css by fyd on 02 Apr 2008

A quick and simple way to use a gradient background for you web site. Make the gradient look like it is fading out with no weird lines - just smoothness. It's really quite easy to do using CSS to edit the body property of the HTML document.

We will start off with the HTML. So, open a new document - I'll be saving mine as fade.html. Get the basic HTML shell written out and go ahead and add a link to a stylesheet - style.css. Now here is how we will layout the page for presentation purposes.

<html>
<head>
<title>Gradient Background Fade</title>
link to stylesheet
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="main"> main container
<p>Place holder text</p>

<div id="leftSide">left demonstration 
</div>

<div id="rightSide">  right demonstration 
<h1>Right Section</h1>
</div>
</div>
</body>
</html>

Note: if you copy and paste this you need to take out the 'main container', 'left demonstration', 'right demonstration' text - they are not to be in the code they are just comments I made.

Just a quick layout to show a couple uses of the gradient fade. Before we get to the CSS we need to make(or get) an image for the background. You can use Photoshop to create a simple gradient

In Photoshop create a new file - I'll make mine 10px wide by 400px high.
Pick the colors you want to use for your gradient - Take note of whatever the bottom color of the gradient is - we will need it later. If you double click on the color in the Tools pallet you can copy the hexadecimal number (# followed by six digits). Fill your file with the gradient and save it. Or right-click and save the images I used.

Now to the CSS

body
{
/*the color here #2c2721 was the bottom color
of my gradient image - a seamless fade*/
background: #2c2721 url(img/bg3.gif) repeat-x;
}

/*just a container to hold things*/
#main
{
	margin: auto;
	width: 700px;
	height: 600px;
	background: #ffffff;
}

#main p
{
	padding: 10px;
}

/*the area to the right with a gradient fade*/
#rightSide
{
	float: right;
	margin-right: 10px;
	height: 500px;
	width: 200px;
        /*#ffffff is the bottom color in gradient*/
	background: #ffffff url(img/rightbg.gif) repeat-x;
}

#rightSide h1
{
	color: #fff;
	margin-left: 5px;
}

/*left area with fade example*/
#leftSide
{
	float: left;
	height: 500px;
	width: 200px;
        /*#ffffff is bottom color in gradient*/
	background: #ffffff url(img/bg.gif) repeat-x;
	margin-left: 10px;
}

All the extra CSS is just formatting to show the examples. The background: is the property we need to worry about to make the gradient fade work. Use repeat-x to make it show up all the way across the page, but not repeat down the page.

The HTML
The CSS

Download HTML, CSS, and Images