freeyourdesign » css

CSS Two Classes for one Item

fyd — Tue, 14 Apr 2009 20:20:03 +0000

Using 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

This text has TWO classes.

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.

CSS Global Reset Styles

fyd — Wed, 30 Apr 2008 11:33:36 +0000

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.

CSS Tip – Using Link Anchor Pseudo Classes

fyd — Mon, 28 Apr 2008 13:32:35 +0000

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.




<span class="text">Link and pseudo-classes</span>

<!-- Embedded Styles -->






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

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:

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

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

CSS Tip – Different Color Borders

fyd — Fri, 25 Apr 2008 11:50:45 +0000

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.



<span class="text">CSS Different Colored Border</span>








Some text in the the box

Free Download Custom Textfield Search Field Backgrounds

fyd — Wed, 16 Apr 2008 11:40:59 +0000

We got an idea on how to implement custom textfields in CSS and HTML in an earlier post. So, I went ahead and put together a few free textfield or search field background images. These are just some examples to give you an idea of what you can create. I made them in Illustrator and they are free. I have also included the HTML and CSS for each image as a reference. The download below comes with png files, gif files, the CSS, the HTML, and the Illustrator file. Everything you need to get started.

HTML EXAMPLE

Download Files

CSS Custom Search Field or Textfield

fyd — Thu, 10 Apr 2008 11:47:42 +0000

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.

Simple Text Field Styling with CSS

We will start with the HTML. Setup you basic shell for a HTML file and add the form and input tags in between the body tags.




<span class="text">CSS Custom Text Field</span>

style.css" type="text/css" rel="stylesheet" />





text" name="field" class="textInput" />

Notice that in the input tag we are using a type of field – which creates a text field. The name can be whatever you would like. Then we add class="textInput". This connects us to the class .textInput in our CSS file. The name of the class can be whatever you want.

Now for the CSS.

/* CSS Document */
.textInput
{
border: 1px solid #ff0000;
background: #555555;
color: #ffffff;
font-size: 1.1em;
}

border – used to change the style of the border around the text field. Here I changed it to a red color. You can use border to change the thickness, border style (like dashed or dotted), and the color.

background – changes the background color of the text field (we will use an image later). The default background is white.

color – changes the color of the font. The default is black. I changed it to white.

font-size – changes the size of the font which will increase/decrease the size of the text field.

Obviously, you can use other properties to customize the text field. These are some of the more commonly used.

The HTML
The CSS

CSS with Image Text Field Customization

For even more customization you can add a background image behind the text field. We need to add a div and class around the input tag in the HTML.


fieldHolder">
text" name="field" class="textInput" />

This new class fieldHolder will hold the text field and the background image we want to use. We will also be changing up textInput.

.fieldHolder
{
	width: 182px;
	height: 27px;
	background: url(tfbg2.gif) no-repeat;
	float: left;
}

.textInput2
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	color: #000000;
	margin-top: 5px;
	margin-left: 5px;
}

First off, here is the image I am using – it needs to be saved to the same folder as you HTML and CSS file.

(right-click save as/save image as)

Back to the CSS.
.fieldHolder
width – this is the width of the image we are using.
height – this is the height of the image we are using.
background – linking to the background image and no-repeat.
float – left, this is optional. It is needed if you want to line up forms side by side (if you do this you might need to add margin-right to space out the fields).

.textInput – styles for the text field
width – width of our text field.
height – height of our text field.
background – no background – we want to use the .fileHolder background.
border – no border.
color – color of our font/text.
margin-top – this is important and deals with getting the cursor to show up inside the 'text field' area in our background image. Because we just made an image we need to tell the cursor were to go. This could be different depending on the image you use.
margin-left – same as above – only position the cursor left or right.

The HTML
The CSS

The good thing about encasing the text field inside of fieldHolder is that you can adjust the position of the text field by changing the margins inside of fieldHolder and not have to worry about the cursor position. Once it is set within .textInput you shouldn't have to mess with it.

You can pretty much use whatever background image you can come up with. You will just have to adjust the margin-top and margin-left inside of the .textInput class to position the cursor correctly.

CSS Gradient Background Fade

fyd — Wed, 02 Apr 2008 11:41:22 +0000

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.



<span class="text">Gradient Background Fade</span>
link to stylesheet




 main container
Place holder text

left demonstration 


  right demonstration 
Right Section

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

Not the prettiest example, but you get the idea – pick the colors you want and make it look good.

CSS – Make Text Wrap Around Image Using Float

fyd — Wed, 05 Mar 2008 12:39:09 +0000

Using CSS we will add a class to the img tag so that our text will wrap nicely around our image. This can be done fairly quickly and can really make your content look better. I recommend adding these classes to every CSS file – or if you have a base CSS file that you always use put these in it.

The HTML

First, we are going to set up our HTML – I'm just using placeholder text and a random image. You can copy my text or search Google for placeholder text.

<span class="text">CSS Image Wrap</span>

Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Notice the class="left" inside the img tag. That's what we will create in our CSS file.

The CSS File

Make a new .css file – you can just use Notepad and save as .css instead of .txt

Name it style.css

/*float left*/
.left
{
        float: left; /*left in our text*/
        margin: 3px; /*space around the image*/
}

/*float right*/
.right
{
         float: right; /*right in our text*/
         margin: 3px; /*space around the image*/
}

That's all we need for our css file. If you use class="left" in the img tag the image will be aligned to the left within the text and using class="right" will align the image to the right. Pretty easy and you'll use it all the time.

Download: (right-click save as)
The HTML
The CSS

No Float Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Float Left Example

Float Right Example

CSS Horizontal Menu

fyd — Thu, 21 Feb 2008 12:51:56 +0000

Let's use CSS to make a Horizontal Menu. We will be using and styling an unordered list for our menu. There's not a lot to it and the code has comments by each line – so just follow along and you'll have your own menu in no time.
So, make a new .css file and name it style.css – You can use notepad and save the file as .css instead of .txt

Main Container

We start off with our main styling container. In it we will setup styles like the width of our menu – the background color – font size – and tell it we don't want any bullets next to our list items.

/* main container - ul id="menu" */
#menu
{
	margin: 0; /* reset the margins */
	padding: 0; /* reset the padding */
	width: auto; /* this size depends on your menu */
	float: left; /* line things up */
	font-size: 1.4em; /* increase the font size a bit */
	background: #656565; /* any background color you want */
	list-style: none; /* no bullets on our list items */
}

The List Items

Now we will style the list items. If you have items in your menu that aren't linked then this is where you would add any extra formatting for those. Most of the time everything in a menu is linked so all we need to do for our menu is tell it to display our items horizontally.

/* list elements */
#menu li
{
	display: inline; /* make it horizontal */
}

Our Links

Let's style our links. This is where we put in formatting like the color of our links – text decorations – and anything else you want. The padding here is important and is used to give extra space around the words – without it the menu would take the height of just slightly more than the text. The a:visited is added to make the links stay the same color even if the user has already visited a link.

/* style our links */
#menu li a:link, #menu li a:visited
{
	float: left; /* line things up */
	color: #ffffff; /* the color of our linked items */
	padding: 10px 10px; /* spread it out */
	text-decoration: none; /* no underline *//* white border to the right of link
	*/
	border-right: 1px solid #ffffff;
}

Link Hover

Now we format how the link will look when our mouse hovers over it.

/* style link hover */
/* .active_link class - optional -
styles the current pages link */
#menu li a:hover, #menu li a:active, #menu .active_link
{
	text-decoration: none; /* no underline */
	/* color to change to when we hover over link */
	background: #009900;
}

Clear The Left Margin

We had float: left above so we need to clear out the left margin so the rest of our page items will fall under our menu instead of to the right of it.

/* optional - but a good class to have in every stylesheet */
/* we had float:left; above so in order to clear out the
left margin and allow elements on our page to start under
our menu we should clear the left margin after we creat the menu
*/
.clearLeft
{
	clear: left;
}

The HTML

Open a new HTML file and add a link to our style sheet somewhere within the tags.

Within the tags we will setup our menu. Remember we are using an unordered list for our menu.



	
	
	
	Home
	About Us
	Link 3
	Link 4

<-- clear out left margin -
       see stylesheet for more info -->

There you have it – customize it to your liking and add it to your site. Here are the files for download (right-click save as)
THE HTML
THE CSS

The Basics – Learning CSS – Where Styles Go

fyd — Mon, 04 Feb 2008 17:57:40 +0000

CSS – Cascading Style Sheets – it's what you use these days to 'style' your Web pages. CSS is used to change font colors, and backgrounds, borders, format lists, links, etc. It is also used to arrange elements on the page and form certain page layouts.

It use to be that Tables or Frames were used when making a layout for a Web page, but now CSS is the way to go. Tables really are no longer the accepted way to create web layouts. Every thing can be done with CSS and with cleaner and less code. Plus, CSS makes it very easy to format all the pages in your site. Actually, that's the main purpose of CSS.

Where Does CSS Go

There are three ways to add CSS to your Web page.

CSS can be put into a separate, or external .css file, and be linked to via a statement in the head section of your HTML page



Learning CSS



...

You can also have an embedded, or internal, style sheet which is put right into the head section of the HTML page



Learning CSS



...

Or you can use inline styles. These are used inside the body of HTML to style a single element.

Learning CSS

Some paragraph text

We will learn what color and border do later.

You can actually use all three of these methods in a single page. Sometimes you will have elements on a page that you want to be styled differently than all the other pages. That's where the embedded and inline styles can come into play. If you are using all three, you have to pay attention to the order you set things up. So, usually you put in your external style sheet link first. Then you do your embedded style sheet. Finally, you can add inline styles to elements. Basically, the inline style will have the highest priority – or it will override anything in the external or embedded style sheet. The embedded style sheet will have priority over the external style sheet as long as it is after the link to the external style sheet.

So, now we know where the styles go – next time we will learn about the syntax of CSS.