CSS- BORDER,FLOAT,DISPLAY,COLOR

css border

CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders let you create crisp, customized border styles with very little work, compared to the antiquated methods of HTML.

border style types

There are numerous types of border styles at your disposal. We recommend that you experiment with many color/border-style combinations to get an idea of all the different looks you can create. Note: We have used CSS Classes below, so check out the CSS Classes lesson if you do not understand.

CSS Code:

p.solid {border-style: solid; } 

p.double {border-style: double; } 

p.groove {border-style: groove; } 

p.dotted {border-style: dotted; } 

p.dashed {border-style: dashed; } 

p.inset {border-style: inset; } 

p.outset {border-style: outset; } 

p.ridge {border-style: ridge; } 

p.hidden {border-style: hidden; }

This is probably obvious, but the default border-style setting for an element is hidden.

border width

To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must define a border-style for the border to show up. Available terms: thin, medium, thick.

CSS Code:

table { border-width: 7px; 

border-style: outset; } 

td { border-width: medium; 

border-style: outset; }

p { border-width: thick;

border-style: solid; }

border color

Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.

CSS Code:

table { border-color: rgb( 100, 100, 255); 

border-style: dashed; } 

td { border-color: #FFBD32; 

border-style: ridge; }

p { border-color: blue;

border-style: solid; }

border: border-(direction)

If you would like to place a border on only one side of an HTML element, or maybe have a unique look for each side of the border, then use border-(direction). The direction choices are of course: top, right, bottom, and left. CSS allows you to treat each side of a border separately from the other three sides. Each side can have its own color, width, and style set, as shown below.

CSS Code:

p { border-bottom-style: dashed ; 

border-bottom-color: yellow; 

border-bottom-width: 5px; }

h4 { border-top-style: double; 

border-top-color: purple; 

border-top-width: thick; }

h5 { border-left-style: groove; 

border-left-color: green; 

border-left-width: 15px; 

border-bottom-style: ridge; 

border-bottom-color: yellow; 

border-bottom-width: 25px; }

border: all in one

While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code. Most of the borders you see on 4bizindia are created in this manner.

CSS Code:

p { border: 20px outset blue ;} 

h4{ border: 5px solid; } 

h5{ border: dotted; }

css lists

Lists come in two basic flavors: unordered and ordered. However, CSS allows for more list customization than HTML -- to the extent that even images can be used as bullet points for unordered lists!.

css list style type

If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes.

• Unordered list styles: square, circle, disc (default), and none
• Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none

CSS Code:

ol { list-style-type: upper-roman; }

ul { list-style-type: circle; } 

css lists with images

As we stated in the introduction, CSS lists allow you to insert an image in place of the normal bullets. A good choice for a bullet image would one that is smaller than the height of your text and is a relatively simple/plain graphic.

CSS Code:

ul { list-style-image: url("listArrow.gif"); } 

ol { list-style-image: url("listArrow2.gif"); }

As you can see, it does not matter if the lists are

or
when using images. Nevertheless, it is a good coding practice to only use images for an unordered list. Ordered lists usually have an incremented (growing) value that appears next to each list item and you can't do this with just one image.

css list position

With CSS, it is possible to alter the indentation that takes place with your list items. See the example below for the trick of indenting your lists.

CSS Code:

ul { list-style-position: inside; } 

ol { list-style-position: outside; }

list: all in one

It is possible to combine the above CSS techniques into one line of CSS. This is useful if you would like to have a list-style-type take the place of your list image, if the image is not able to be loaded.

CSS Code:

ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}

css links ( pseudo-classes )

Probably the coolest thing about CSS is that it gives you the ability to add effects to your anchor tags, otherwise known as links. In HTML, the only way to add this effect would be to use JavaScript, but with the addition of CSS, JavaScript links can be forgotten.

css anchor/link states

You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

• link - this is a link that has not been used, nor is a mouse pointer hovering over it
• visited - this is a link that has been used before, but has no mouse on it
• hover - this is a link currently has a mouse pointer hovering over it/on it
• active - this is a link that is in the process of being clicked

Using CSS you can make a different look for each one of these states, but at the end of this lesson we will suggest a good practice for CSS Links.

css pseudo-classes

The format for CSS Links is a little different from what you've seen in this tutorial so far. To modify these four states, you have to use the following CSS code formatting:

CSS Code:

a:(STATE'S NAME) { attribute: value; }

The state's name is the "pseudo class" that defines how the HTML element should appear, depending on which state it is in. Below is an example of changing the "link", "visited", and "hover" state. Note the order that they are defined, as it is the proper ordering to make a functioning CSS link.

CSS Code:

a:link { color: red; }

a:visited { color: red; } 

a:hover { color: blue; } 

The states must be defined in the correct order. Here is the order, starting with the one you must define first:

1.      link

2.      visited

3.      hover

4.      active

removing the default underline

Throughout 4bizindia.com you probably have noticed the different styles that we have for certain links. Our menu's do not have an underline, unless you are hovering, while the links in our main content do have underlines. To remove the underline from certain states of a link, use text-decoration: none.

CSS Code:

a:link { color: red; text-decoration: none; }

a:visited { color: red; text-decoration: none; } 

a:hover { color: blue; } 

Be careful when removing the underline from your links. Sometimes, the removal of the underline may cause the link to be indistinguishable from normal text. There is a very small chance the common visitor will be able to notice that it is a link, if this is the case. So if you choose to remove the underline, be sure you do something else to the link to make it stand out.

a couple examples

Below are two examples that use many forms of CSS to manipulate the states of a hyperlink.

CSS Code:

a:link { 

color: white; 

background-color: black;

text-decoration: none;

border: 2px solid white; 

}

a:visited { 

color: white; 

background-color: black;

text-decoration: none;

border: 2px solid white; 

}

a:hover {

color: black; 

background-color: white;

text-decoration: none;

border: 2px solid black; 

} 

a:link {

color: blue;

background-color: red;

font-size: 26px;

border: 10px outset blue;

font-family: sans-serif;

text-transform: lowercase;

text-decoration: none;

}

a:visited {

color: blue;

background-color: red;

font-size: 26px;

border: 10px outset blue;

font-family: sans-serif;

text-transform: lowercase;

text-decoration: none;

}

a:hover{

color: blue;

background-color: red;

font-size: 27px;

border: 10px inset blue;

font-family: serif;

text-transform: uppercase;

text-decoration: line-through;

letter-spacing: 3px;

word-spacing: 6px;

font-weight: normal;

}

css mouse cursor

When using Windows, Linux, or a Macintosh you will have undoubtedly seen many different mouse cursor icons. There is the normal mouse cursor icon that looks like a skewed arrow; the "I" looking icon when selecting text, and some sort of animated logo when the computer is thinking (usually an hourglass).

With CSS you can make it so different mouse icons appear when people visit your site. NOTE: You should know that some people find web pages that change mouse cursor icons annoying, so consider that when playing around with this CSS property!

css cursor icons

In this lesson we will show how to change the mouse cursor icon for a few different HTML elements. Below is a list of the most commonly accepted cursors:

• default - Display the normal mouse cursor icon
• wait - The mouse icon to represent the computer "thinking"
• crosshair - A cross hair reticle
• text - An "I" shaped icon that is displayed when selecting text
• pointer - A hand icon that you see when you hover over an HTML link
• help - A question mark (usually)

css cursor code

Now let's try these puppies out. Here are a few cursor code examples that should help you customize your site.

CSS Code:

p { cursor: wait }

h4 { cursor: help }

h5 { cursor: crosshair }

Mouse over the lines of text and see which icon your cursor changes to! Sometimes you can add a little bit of excitement to a web page with a well-placed cursor icon change. However, if you make the icons confusing, or change them too often, people will probably leave your site with a poor impression of your web design talent!

css properties

In HTML, the tags (i.e. , , , etc) are the meat and potatoes of the HTML language. In CSS, there are many properties (i.e. Font, Text, Box, and Color) that you have probably seen if you've read through this tutorial.

CSS has grouped all the CSS properties into logical groups to give the massive amount of properties some order, unlike HTML. This lesson will review these areas and give a brief description of what they are for. For a quick reference, check out our CSS Properties Reference.

css font properties

The CSS font properties control all aspects of your text graphical representation. From the thickness of your font (font-weight) to font type (font-family) of your choice. Here are all the font properties at your disposal:

• font
• font-family
• font-size
• font-style
• font-weight
• font-variant

css text properties

The CSS text properties control the spacing, alignment, decoration, and other miscellaneous aspects of the text. Here is a list of all the CSS text properties. Remember to check out our CSS Properties Reference for a description and example of all of the properties mentioned in this lesson.

• letter-spacing
• word-spacing
• text-decoration
• vertical-align
• text-transform
• text-align
• text-indent
• line-height

css box properties

The CSS box properties are used to define the spacing in and around HTML elements, their borders, and other positioning aspects. Border, Margin, and Padding all have four properties each: top, right, bottom, and left.

• Margin
• Padding
• Border
• Border-width
• Border-color
• Border-style
• Width
• Height
• Float
• Clear

css color properties

The CSS color property defines what color the text inside the specified HTML element will have. Use classes or identifiers to have multiple colors for one type of HTML element.

• Color

css background properties

The CSS background properties control things like if the background is a single color or maybe an image. If it's an image you can set the position of the image and tell it whether or not you want the image to repeat left-to-right and/or top-to-bottom.

• Background
• Background Color
• Background Image
• Background Repeat
• Background Attachment
• Background Position

css classification properties

We think of the classification properties as having the list element and all the leftover elements that would not fit into any other category. Check out our CSS Properties Reference for a an example of all the properties mentioned here.

• Display
• Whitespace
• List Style
• List Style Type
• List Style Image
• List Style Position

css position

With the knowledge of CSS Positioning you will be able to manipulate the exact position of your HTML elements. Designs that previously required the use of JavaScript or HTML image maps may now be done entirely in CSS. Not only is it easier to code, but it also loads much quicker!

position relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we could use relative positioning to move it a bit to the right and down a couple of pixels. Below is an example.

CSS Code:

h3 { 

                     position: relative; 

                    top: 15px;

                    left: 150px;

}

p { 

                     position: relative; 

                    left: -10px;

}

You probably noticed that you define the four possible directions (left, right, up, and down) using only two (left and top). Here's a quick reference when moving HTML elements in CSS.

• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

position absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the browser's viewable area, so be sure you are measuring from that point.

Note: Firefox does not currently interpret absolute positioning correctly. However both IE 6.0+ and Opera 8.0+ do.

CSS Code:

h3 { 

                    position: absolute; 

                    top: 50px;

                    left: 45px;

}

p{ 

                    position: absolute; 

                    top: 75px;

                    left: 75px;

}

css layers

After learning how to position HTML elements, you may have noticed how this can lead to HTML elements being on top of one another. CSS allows you to control which item will appear on top with the use of layers.

In CSS, each element is given a priority. HTML elements that appear later in the source code than others will have a higher priority by default. If there are two overlapping CSS positioned elements, the element with the higher priority will appear on top of the other.

To manually define a priority, set the z-index value. The larger the value, the higher the priority the element will have.

CSS Code:

h4{ 

                     position: relative; 

                    top: 30px;

                    left: 50px;

                    z-index: 2;

                    background-color: #336699;

                    }

p {  

                      position: relative; 

                    z-index: 1; 

                    background-color: #FFCCCC;

                    } 

css float

Floating is often used to push an image to one side or another, while having the text of a paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes.

float image

Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph.

CSS Code:

img.floatLeft { 

    float: left; 

    margin: 4px; 

}

img.floatRight { 

    float: right; 

    margin: 4px; 

}

floating multiple images

If you were to simply float three images to the right, they would appear alongside one another. If you wish to have the next image start below the end of the previous image, then use the CSS Clear attribute.

CSS Code:

img.floatRightClear { 

    float: right; 

    clear: right; 

    margin: 4px; 

}

HTML Code:

The images are appearing...

If we had specified...

The number of paragraphs...

css classes vs id

There is often confusion about when it is appropriate to use CSS IDs and when CSS Classes should be used instead. This lesson is geared to display the differences, as well as provide more information about CSS IDs.

what is an id selector?

The W3C defines class ID as "a unique identifier to an element". But what does that actually mean? Hopefully you have already read our CSS Classes lesson, if not, we recommend that you do so.

CSS IDs are similar to classes in that they define a special case for an element. Below is an example of a CSS ID.

CSS Code:

p#exampleID1 { background-color: white; } 

p#exampleID2 { text-transform: uppercase; } 

HTML Code:

This paragraph has an ID name of

 "exampleID1" and has a white CSS defined background

This paragraph has an ID name of

 "exampleID2" and has had its text transformed to uppercase letters. 

Notice that an ID's CSS is an HTML element, followed by a "#", and finally ID's name. The end result looks something like "element#idname". Also, be sure to absorb the fact that when an ID is used in HTML, we must use "id=name" instead of "class=name" to reference it!

why did they choose those names??

• ID = A person's Identification (ID) is unique to one person.
• Class = There are many people in a class.

id for layout and uniqueness

Standards specify that any given ID name can only be referenced once within a page or document. From our experience, IDs are most commonly used correctly in CSS layouts. This makes sense because there are usually only one menu per page, one banner, and usually only one content pane.

In 4bizindia.com CSS Layout Examples we have used IDs for the unique items mentioned above. View the CSS Code for our first layout example. Below are the unique IDs in our code.

• Menu - div#menuPane
• Content - div#content

answer: classes vs ids

• Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

css display

One of the most difficult aspects of creating a page without the use of tables is learning how to control the line breaks. Up to this point we haven't taught you how to use CSS to simulate a
after the use of an element. Additionally, we have not shown how to remove line breaks that automatically occur with some elements (headers, list elements, paragraphs, etc).

display block and inline

As you have seen in our CSS Examples, we were able to create many looks for our menus. A few of the examples have no line breaks in the HTML, but we made each anchor tag have a break on specific examples. These line breaks are created with the block value.

CSS Code:

a { display: block; }

p { display: inline; }

HTML Code:

4bizindia.com - Learn to Whip the Web

...

4bizindia.com - Learn to Whip the Web

These paragraph 

elements

have been 

inlined.

display none (hidden)

At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of JavaScript, you can create collapseable menus. This topic is beyond the scope of this lesson, but feel freevto check outO'Reilly's - Hierarchical Menus. Below is a simple example of how to hide an element.

CSS Code:

p.show { display: block }

p.hide { display: none; }

HTML Code:

This paragraph is displayed correctly because 

it has a display value of "block".

This paragraph is hidden because 

it has a display value of "none".  Why am I even

writing anything in here?

Using display correctly is key to CSS-heavy website designs and once you you've mastered using it on your HTML your websites will be much more flexible than you ever imagined!