archived posts: css

CSS Two Classes for one Item

Apr 14, 2009 | css | fyd

css tips and tricksUsing Two Classes on one item in CSS.

Here's a quick CSS Tip you can use if you need to style an item with two(or more) classes.

Sometime you might need to make something stand out a little more than the rest of the elements using the same CSS Class. You could throw a span tag around it or you can uses a second CSS Class. This way if you need to use this style again you aren't constantly having to type out the whole span tag.

It's actually pretty simple…
The HTML

<div class="one two">This text has TWO classes.</div>

The CSS
.one
{
color: #ff0000;
}
.two
{
font-size: 1.5em;
}

and here is the result:

This text has TWO classes.

A simple but very useful CSS Tip.

Popularity: 11% [?]

0
comments

CSS Global Reset Styles

Apr 30, 2008 | css | fyd

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: 21% [?]

0
comments

CSS Tip – Using Link Anchor Pseudo Classes

Apr 28, 2008 | css | fyd

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: 32% [?]

7
comments

CSS Tip – Different Color Borders

Apr 25, 2008 | css | fyd

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: 10% [?]

0
comments

CSS Custom Search Field or Textfield

Apr 10, 2008 | css | fyd

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: 88% [?]

38
comments

Next Page »