freeyourdesign » html

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 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 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

Resources – HTML Block Level Elements

fyd — Mon, 21 Jan 2008 19:50:27 +0000

HTML Block-Level Elements

Here is a quick run down of some HTML block-level elements – some are linked to previous articles here at freeyourdesign.com

Used for contact information - italicizes text

Used for long quotation - indents text left and right

definition in definition list

Used to create generic block-level element

definition list

term in definition list Headings - # is 1 through 6

Element in an ordered or unordered list

Ordered List

Paragraph

Unordered List

The Basics – List Creation

fyd — Mon, 21 Jan 2008 18:11:34 +0000

Another block-level element that is used often is the list. We will be going over three types of lists. Ordered Lists are used for items that you want to appear in sequential order – each item will have a number before it. Unordered Lists are used when the order of items isn't as important – each item will have a bullet in front of it. Finally, Definition Lists which are used when defining a term. Let's get started.

Ordered Lists

Here is the code to create an ordered list:



<span class="text">Ordered List</span>



 - starting ordered list
List Item 1
 - list element
List Item 2
List Item 3
Last List Item
 - ending ordered list

results

So as you can see, we start an ordered list with

. Each item you want to be in the list is surrounded by

and

. And like I said earlier there is a number in front of each item in the list.

Unordered Lists

Here is the code to create an unordered list:



<span class="text">Unordered List</span>



 - starting unordered list
List Item 1
 - list element
List Item 2
List Item 3
Last List Item
 - ending unordered list

results

The setup is very similar to the ordered list except here we start with

. Again, each item you want to be in the list is surrounded by

and

. And like I said earlier there is a bullet in front of each item in the list.

Definition Lists

Here is the code to create a definition list:



<span class="text">Definition List</span>



 - starting definition list
Term 1
 - term to define
The definition of term 1
Term 2
The definition of term 2
 - ending definition list

results

Definition lists are started similarly to the other two – we start with

and end it with . The rest is a little different though. The term you would like to define is surrounded by

and

. Then the next thing you do is place the definition of that term between

and

. As you can see in the results, the definition is indented.

There you have it. Lists are pretty easy, but are used quite often. The best thing to do is to practice them. You can even nest lists within each other. I'll leave you with a nested list example.



<span class="text">Nested Lists</span>


 - starting ordered list
Numbered Item 1 - open first ordered list element
	 - starting unordered list
		nested bullet 1
		nested bullet 2
	
 - ending unordered list
 - close first ordered list element
Numbered Item 2
	
		nested bullet 1
		nested bullet 2
	

 - ending ordered list

results

It's a lot easier to indent your code when doing lists – it just makes it easier to read and follow, and remember it won't show up that way in the browser. When doing a nested list just remember to watch when you close your

tags.

The Basics – HTML Headings

fyd — Fri, 18 Jan 2008 17:33:50 +0000

So, we've learned how to setup the basic shell for an HTML document and add a little text. Now we can get into a little more of the formatting for our site's content. I briefly mentioned block-level elements in the previous basics post when we used the

tag. Specifically, a block-level element displays our content in a separate section within the page. So, basically it's just setting it off from other items or blocks. The elements we will be using today just happen to be block-level elements. You will see how they separate from other sections of content. Enough with the chit-chat let's get going.

Heading Elements!

As you can see the heading elements will make your text really stand out from the normal content. We use content to create headings – where # is a number 1 through 6.

is the largest heading while

is the smallest. So let's make some headings:

<span class="text">Some Headings</span>

Some placeholder text to show how block-level elements separate

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Some placeholder text to show how block-level elements separate

My results
So, there they are – a little more diversity to your normal text. Notice how they separate from each other. There is extra room between each heading and each one starts on its own line. Which brings me to a side note:

HTML ignores white space. What's white space? It's just like it sounds – empty spaces between text, elements, tags, etc. For example, if you hold down the space bar between say the H and the e it will only read one space. So, just hitting the enter button at the end of a line does not mean it will look the same in the browser.

<span class="text">Some Headings</span>

Some placeholder text to show how block-level elements separate

h1 Heading

h2 He ading

h3 Heading

Some placeholder text to show how block-level elements separate

results
Even with all those extra spaces and returns HTML only counts one of the spaces and doesn't pay attention to the line returns.

Another word on block-level elements – You are not suppose to place block-level elements inside other block-level elements. For example,

Hello

is not valid. Yes, it will still show up in an Internet browser but it is still not good practice and won't validate(will learn more about validation in the future).

That's it for now…

The Basics – HTML Hello World

fyd — Mon, 14 Jan 2008 23:32:52 +0000

If you're looking to get started learning HTML the good old 'Hello World' is a fine place to start. I'll take you through the simple steps of setting up a very basic HTML web page. We will just display a simple line of text saying… Hello World!

So, let's get started. Here is what you need:

Text Editor – I'll be using NotePad
Internet Browser – Firefox for me, but Internet Explorer is fine

You don't need much – here we go…

File setup

First of all, open up NotePad
Goto File->Save As… Pick where you want to save your file and in the File name: box type in the name you want and a .html – I'm using hello.html
The .html tells the computer the file will be used in an Internet browser other wise it would just be a text file.

Some HTML

Now we'll get started into the HTML. First, we are going to create the basic shell that you need for a web page. Here is the code just type it into NotePad(just the blue text) – I'll explain it next:

 - marks the start of an HTML document
 - contains info about the document
 - page title shows in browsers title bar
 - head section has ended
 - where the content is displayed
 - body section has ended
 - end of HTML document

So, that is the basic shell for any HTML page (technically the title doesn't have to be there). Of course, if you look at it in your browser you aren't going to see anything yet. But before we get into our content lets talk a little bit more about that code we just typed in.

Those 'things' you just typed in are tags. Now a days tags in HTML will always be closed because that is the standard(more on that in the future). There are two-sided tags. What two-sided means is that each tag has an opening tag and a closing tag. <> The / indicates the second or closing tag. And there are one-sided tags which close inside itself. It looks like this < /> – the / shows that the one-sided tag has been closed. We don't have to worry about that just yet.

We call what the word inside the tag an element. So it's – Then there are empty elements which are basically one-sided tags

Let's do two more things to our code – add a title and output some text – so we can finally see the results of our work.



<span class="text">My First HTML Page</span>


Hello World!
  - our text in a paragraph tag

Alright – after you save the file – the title 'My First HTML Page' will show up in the bar at the very top of your web browser and you should see the text 'Hello World!' in your browser. My results

The new tag we used here was the

tag or the paragraph tag. It is what we call a block-level element. The paragraph tag tells the browser to start a new line with a blank space above it – so it helps separate blocks of text. Notice we put the text inside the tag. This is where we will put anything we want to display in the browser window.

I think that's a good place to stop for now. In the future we will get into headings, images, color, css properties, and code needed for things like validation.