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 }
Display:
Please Wait While this Web Page
Loads
How
May I Help You?
Stick
Your Hands in the Air!
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. <b>, <body>, <a>, 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.
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 CSSProperties 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.
Display:
Remember, relative positioning moves
stuff from where it would normally be. So if you had a paragraph in the middle
of a page and you made both the top and left values negative 50, then the
paragraph would move up and to the left 50 pixels from its normal location.
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 parent element (that's the HTML element
that it is inside of), so be sure you are measuring from that point. For
example, if you had a bold tag inside of a paragraph tag, the parent of the
bold tag would be the paragraph
Since the paragraph tag is our
parent element, we need to decide where want our bold tag to appear in regards
to the top left of the paragraph. Let's have it appear 10 pixels down and 30
pixels to the right.
CSS
Code:
b{
position: absolute;
top: 10px;
left: 30px;
}
Display:
Specifying a direction with absolute
positioning works the same as with relative positioning.
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;
}
display:
Header
Z-Index = 2
You probably can't read this part,
so I will fill it in with useless text for the time being. This paragraph has a
z-index of 1, which is less than the header. As you can see, the header has
been moved down, using positioning, and is now resting on top of this
paragraph. If we had not defined the z-index, by default the paragraph would
have been on top of the header because it appears later in our HTML code.
Other ways to utilize layers might
be to place a few images on top of each other to create a beautiful collage,
have your menu slightly overlap you content pane, or anything your imagination
can come up with. Just remember to keep your web site user-friendly!
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;
}
HTML
Code:
<body>
<img
src="sunset.gif" class="floatLeft">
<p>The
images are contained with...</p>
<img
src="sunset.gif" class="floatRight">
<p>This
second paragraph has an...</p>
</body>
The images are contained within the
paragraph tag. The image has floated to the left, and also to the right because
we have used both types of image floating in this example. Notice how the text
wraps around the images quite nicely. The images are contained within the
paragraph tag. The image has floated to the left, and also to the right because
we have used both types of image floating in this example. Notice how the text
wraps around the images quite nicely.
This second paragraph has an image
that is floated to the right. It should be noted that a margin should be added
to images so that the text does not get too close to the image. There should
always be a few pixels between words and borders, images, and other content.
This second paragraph has an image that is floated to the right. It should be
noted that a margin should be added to images so that the text does not get too
close to the image. There should always be a few pixels between words and
borders, images, and other content.
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:
<body>
<img
src="sunset.gif" class="floatRightClear">
<img
src="sunset.gif" class="floatRightClear">
<p>The
images are appearing...</p>
<p>If
we had specified...</p>
<p>The
number of paragraphs...</p>
</body>
The images are appearing below one
another because the CSS clear attribute was used with the value of
"right". This forces all right floating items to appear below any
previous right floating items.
If we had specified clear:left in
our CSS code, then there would be no effect on the images, and they would
appear in their default pattern, next to each other, all on one line.
The number of paragraphs, and the
size of the paragraphs, will not effect how these images will appear.
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:
<p
id="ExampleID1">This paragraph has an ID name of
"exampleID1" and has a white CSS
defined background</p>
<p
id="ExampleID2">This paragraph has an ID name of
"exampleID2" and has had its text
transformed to uppercase letters. </p>
Display:
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!
When to Use Classes?
A class can be used several times,
while an ID can only be used once, so you should use classes for items that you
know you're going to use a lot. An example would be if you wanted to give all
the paragraphs on your webpage the same styling, you would use classes.
CSS
Code:
p.exampleID3
{ background-color: #013370; color: white;}
HTML
Code:
<p
class='exampleID3'>These paragraphs all have the same styling applied to
them and we used classes because we wanted to reuse our styling!</p>
<p
class='exampleID3'>These paragraphs all have the same styling applied to
them and we used classes because we wanted to reuse our styling!</p>
<p
class='exampleID3'>These paragraphs all have the same styling applied to
them and we used classes because we wanted to reuse our styling!</p>
Display:
These paragraphs all have the same
styling applied to them and we used classes because we wanted to reuse our
styling!
These paragraphs all have the same
styling applied to them and we used classes because we wanted to reuse our
styling!
These paragraphs all have the same
styling applied to them and we used classes because we wanted to reuse our
styling!
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.
- 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 <br /> 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).
All these issues and more are
addressed with the display property. In this lesson you will find a brief
overview and example for the most commonly used CSS Display values.
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:
<a
href="http://www.tizag.com/" target="_blank">Tizag.com -
Learn to Whip the Web
</a>
...
<a
href="http://www.tizag.com/" target="_blank">Tizag.com -
Learn to Whip the Web
</a>
<br
/>
<p>These
paragraph </p>
<p>elements</p>
<p>have
been </p>
<p>inlined.</p>
Display:
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 collapsible menus. This topic is beyond the scope of
this lesson, but feel free to check out O'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:
<p
class="show">This paragraph is displayed correctly because
it
has a display value of "block".</p>
<p
class="hide">This paragraph is hidden because
it
has a display value of "none".
Why am I even
writing
anything in here?</p>
Display:
This paragraph is displayed
correctly because it has a display value of "block".
Using display correctly is key to
CSS-heavy website designs and once you've mastered using it in your HTML your
websites will be much more flexible than you ever imagined!
No comments:
Post a Comment