CSS- cascading style sheets
codes
css introduction
It is time to take your web designing
skills to the next level with CascadingStyle Sheets (CSS). They are a way to control the look and feel of your
HTML documents in an organized and efficient manner. With CSS you will be able
to:
- Add new looks to your old HTML
- Completely restyle a web site with only a few changes to your CSS code
- Use the "style" you create on any webpage you wish!
css selector
CSS selectors are the heart and soul of CSS. They define which
HTML elements you are going to be manipulating with CSS code and you should
have a solid understanding of them when you are finished with this tutorial.
Luckily for you, they are pretty simple to comprehend!
css selector: where it fits in
In a typical CSS statement you have the
following:
- SELECTOR { PROPERTY: VALUE }
"Property" is the CSS element
you wish to manipulate and "VALUE" represents the value of the
specified property.
css selector name
The selector name creates a direct
relationship with the HTML tag you want to edit. If you wanted to change the
way a paragraph tag behaved, the CSS code would look like:
- p { PROPERTY: VALUE }
The above example is a template that
you can use whenever you are manipulating the paragraph HTML element. In the
next lessons, we will not only teach where to place your CSS, but why and where
you should use CSS as well.
internal css
Cascading Style Sheets come in three flavors: internal, external,
and inline. We will cover internal and external, as they are the only flavors a
designer should utilize. In this lesson, we cover the basics of the easier
type, internal. When using internal CSS, you must add a new tag,
<style>.
, inside the tag. The HTML code below contains an
example of <style>.
's usage.CSS Code:
<html>
<head>
<style
type="text/css">
</style>
</head>
<body>
<p>Your page's
content!</p>
</body>
</html>
This doesn't actually do anything visually. The code style tag
just tells the browser that we will be defining some CSS to be used on this
page.
creating internal css code
CSS code is not written the same way as HTML code is. This makes
sense because CSS is not HTML, but rather a way of manipulating existing HTML.
Below is an example of some simple, yet fully functional, CSS code.
CSS Code:
<html>
<head>
<style
type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black You probably noticed that in our CSS code we were altering the
General CSS Format:
<body>
and HTML tags. The great thing about CSS is that it is an intuitive language.
Once you understand the general format for CSS code, you are pretty much set. General CSS Format:
- "HTML tag" { "CSS Property" : "Value" ; }
Back in our code example, we
manipulated and
<body>, both
well known HTML tags. To clarify, here is a step-by-step process of what is
going on in that first line of CSS code where we played around with
"p".- We chose the HTML element we wanted to manipulate. - p{ : ; }
- Then we chose the CSS attribute color. - p { color: ; }
- Next we choose the font color to be white. - p { color: white; }
Now all text within a paragraph tag
will show up as white! Now an explanation of the CSS code that altered the
<body>'s
background:
• We
choose the HTML element Body - body { : ; }
• Then
we chose the CSS attribute. - body { background-color: ; }
• Next
we chose the background color to be black. - body { background-color:black;
}
</html>
Until you become accustomed to using CSS code, you will probably find your CSS code not working as you expected. A leading cause of this might be an out of place :, ;, {, or } or it might be that you forgot to use a :, ;, {, or } when it was required. Be sure to check back here if you ever have issues with the correct format for CSS.
external css
When using CSS it is preferable to keep the CSS separate from your
HTML. Placing CSS in a separate file allows the web designer to completely
differentiate between content (HTML) and design (CSS). External CSS is a file
that contains only CSS code and is saved with a "
instead of .css"
file extension. This CSS file is then referenced in your HTML using the
<style>.
. If you're confused, don't worry. We are going to walk you through
the whole process.
<style>.
file creation
Let us get started by making that external CSS file. Open up
notepad.exe, or any other plain text editor and type the following CSS code.
CSS Code:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
.css)
file. Make sure that you are not saving it as a text (.txt) file, as notepad
likes to do by default. Name the file "test.css"
(without the quotes). Now create a new HTML file and fill it with the following
code.
HTML Code:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="test<code>.css</code>"
/>
</head>
<body>
<h3> A White Header
</h3>
<p> This paragraph has a blue
font.
The background color of this page is gray
because
we changed it with CSS!
</p>
</body>
</html>
css inline
Thus far, we have only shown you how to use CSS the way it was
meant to be used -- separated from the HTML. However, it is possible to place
CSS right in the thick of your HTML code, and this method of CSS usage is
referred to as inline css.
Inline CSS has the highest priority out of external, internal, and
inline CSS. This means that you can override styles that are defined in
external or internal by using inline CSS. However, inline CSS detracts from the
true purpose of CSS, so use it sparingly.
css inline - an html attribute
Believe it or not, CSS is built in to every HTML tag. If you want
to add a style inside an HTML element all you have to do is specify the desired
CSS properties with the style HTML attribute. Let's add some style
to a paragraph tag.
CSS Code:
<p style="background: blue;
color: white;">A new background and
font
color with inline CSS</p>
common inline css mistakes
When using CSS inline you must be sure not to use quotations
within your inline CSS. If you use quotations the browser will interpret this
as the end of your style value. Instead, copy our form as we have displayed
below.
CSS Code:
<p
style="background: url("yellow_rock.gif");">
This is
broken</p>
<p
style="background: url(yellow_rock.gif);">
This is
workin'</p>
css classes
You may be wondering if it is possible
to give an HTML element multiple looks with CSS. Say for example that sometimes
you want the font to be large and white, while other times you would prefer the
font to be small and black. CSS would not be very useful if it did not allow
you to have many different types of formats for a single HTML tag. Well, you
are in luck! CSS allows you to do just that with the use of classes.
the format of classes
Using classes is simple. You just need to add an extension to the
typical CSS code and make sure you specify this extension in your HTML. Let's
try this with an example of making two paragraphs that behave differently.
First, we begin with the CSS code, note the red text.
CSS Code:
p.first{ color: blue; }
p.second{ color: red; }
HTML Code:
<html>
<code></code>
<p>This is a normal
paragraph.</p>
<p class="first">This
is a paragraph that uses the p.first CSS code!</p>
<p
class="second">This is a paragraph that uses the p.second CSS
code!</p>
...
Well, when this happens the CSS class for any tag will
override the default CSS. If the CSS class uses a CSS attribute
already defined by the default CSS, then the formatting defined by the class
will be the value that is used.
It may be easier to imagine that the CSS for a generic HTML
element is the starting point and the only way to change that look is to
overwrite the attributes using CSS classes. Please see the example below for a
visual of this tricky topic.
CSS Code:
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
...
HTML Code:
<html>
<body>
<p>This
is a normal paragraph.</p>
<p
class="test1">This is a paragraph that uses the p.test1 CSS
code!</p>
<p
class="test2">This is a paragraph that uses the p.test2 CSS
code!</p>
...
css background
The background of your website is very
important, so please spend some time with this tutorial. If you are aiming for
a professional website, a good rule of thumb is to use a light background with
dark text. However, if you're just making a website for pleasure, then any kind
of color combination is acceptable.
With CSS, you are able to set the background color or image of any
CSS element. In addition, you have control over how the background image is
displayed. You may choose to have it repeat horizontally, vertically, or in
neither direction. You may also choose to have the background remain in a fixed
position, or have it scroll as it does normally. The following examples will
show you how to implement all of these options.
css background color
As you have seen throughout 4bizindia Tutorials, many different
background colors are present. These varying backgrounds were obtained without
using tables! Below are a couple examples of CSS backgrounds.
CSS Code:
h4 { background-color: white; }
p { background-color:
#1078E1; }
ul { background-color: rgb( 149, 206, 145); }
css background image
Need an image to repeat left-to-right, like the gradient
background that appears at the top of 4bizindia.com? Or maybe you would like to
have an image that remains fixed when the user scrolls down your page. This can
be done quite easily with CSS and more, including:
- choosing if a background will repeat and which directions to repeat in.
- precision positioning
- scrolling/static images
Let's begin with a default CSS background image.
CSS Code:
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://http://youneedhelpinghands.blogspot.in//pics/cssT/smallPic.jpg); }
background image repeat
You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
CSS Code:
p {
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y;}
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat;}
You may choose to have your background scroll naturally, or to
have it in a fixed position. Note: This feature does not work properly in most
browsers when placed within a
textarea
CSS Code:
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;}
If you would like to define where exactly an image appears within
an HTML element, you may use CSS's background-position. Please take note that
there are three different ways of defining position: length, percentages, and
keywords. We recommending using lengths -- specifically, pixels.
CSS Code:
p {
background-image:
url(smallPic.jpg);
background-position:
20px 10px;
}
h4 {
background-image:
url(smallPic.jpg);
background-position:
30% 30%;
}
ol {
background-image:
url(smallPic.jpg);
background-position:
top center;
}
css gradient background
If you would like to create a gradient
background like the one that appears at the top of 4bizindia.com, you must first
create an image inside a painting program (Photoshop, Draw, etc) like the one
you see below.
Notice that the image is very slim. We are going to be tiling the
image horizontally, so you can make the image skinny as possible. As long as
the image is 1 pixel or wider, you will be fine.
Using the repeat attribute, we set the value to repeat-x which
causes the image to span left to right across the specified element. This
example adds a gradient background to the paragraph element.
CSS Code:
p {
background-image:
url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}
CSS gives you great control over the
way your text is displayed. You can change the text size, color, style, and
more. You probably already knew how to make text bold or underlined, but did
you know you could resize your font using percentages? Let us begin the lesson
with an easy and important font attribute, color!
css font color
Although the color of the text seems like it would be part of CSS
Font, it actually is a standalone attribute in CSS. This could be for many
reasons, including the fact that it will be used a great deal, so why make the
coder type out "font-color", when they could just type out
"color" instead? Here's an example of changing the color of your
font.
CSS Code:
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
Example form: rgb(Red, Green, Blue); with the range of 0-255 for
each value.
css font family
Font families can be divided into two groups: serif and
sans-serif. A sans-serif font does not include the small lines at the end of
characters, while a serif font does include these small lines. When choosing
which kind you prefer, remember that studies have shown that sans-serif fonts
are much easier to read on a computer monitor than serif fonts.
CSS Code:
h4 { font-family: sans-serif; }
h5 { font-family: serif; }
h6 { font-family: arial; }
css font size
You can manipulate the size of your fonts by using values,
percentages, or key terms. Using values are useful if you do not want the user
to be able to increase the size of the font because your site will look
incorrect if they did so. Percentages are great when you want to change the
default font, but do not want to set a static value.
CSS Code:
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
Though key terms are not very useful, the common terms are:
xx-large, x-large, large, medium, small, x-small, and xx-small.
css font style
CSS Font-Style is where you define if your font will be italic or
not. Possible key terms are the following: italic, oblique, and normal.
CSS Code:
p { font-style: italic; }
h4{ font-style: oblique; }
css font weight
If you want to control the weight of your font (its thickness),
using font weight is the best way to go about it. We suggest that you only use
font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you
probably will not see any difference. The values range from 100 (thin)-900
(thick).
CSS Code:
p { font-weight: 100; }
ul{ font-weight: bolder; }
Available key terms for font-weight: bold, bolder, and normal.
css font variant
CSS Font Variant allows you to convert your font to all small
caps. Note: not every font supports CSS Font Variant, so be sure to test before
you publish.
CSS Code:
p { font-variant: small-caps; }
css text
While CSS Font covers most of the
traditional ways to format your text, CSS Text allows you to control the
spacing, decoration, and alignment of your text.
text decoration
Have you ever wondered how a website removed the underline that
usually accompanies a link's text? This is done by removing text-decoration
from the link. To learn how to create these types of links, please check out
our CSS Links tutorial. Besides
the utility with links, text-decoration allows you to add horizontal lines
above, below, or through your text.
CSS Code:
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }
text indent
CSS text-indent is a great way to indent your paragraphs without
having to use preformatted HTML tags, (
), or inserting spaces
manually ( ). You may define your indentation with exact values or
percentages. We recommend using exact values.
CSS Code:
p { text-indent: 20px; }
h5 { text-indent: 30%; }
text align
By default, text on your website is aligned to the left, like most
literature and other forms of media you read. However, sometimes you may
require a different alignment and it can be specified using the text-align
attribute.
CSS Code:
p { text-align: right; }
h5{ text-align: justify; }
text transform
Text-transform is a quick way to modify the capitalization of your
text.
CSS Code:
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
Note: All sentences below originally were, "Hi, I am happy to
see you." With the use of the text-transform CSS attribute we were able to
modify the capitalization.
css white space
The white-space attribute allows you to prevent text from wrapping
until you place a break
into your text.
into your text.
CSS Code:
p { white-space: nowrap; }
In the above paragraph the page break occurred after "...
page look", which caused the text to resume on the following line.
Note: We set a CSS overflow property, above,
so that the example could be shown more readily.
css word spacing
With the CSS attribute word-spacing you are able to specify the
exact value of the spacing between your words. Word-spacing should be defined
with exact values.
CSS Code:
p { word-spacing: 10px; }
css letter spacing
With the CSS attribute letter-spacing you are able to specify the
exact value of the spacing between your letters. Letter-spacing should be
defined with exact values.
CSS Code:
p { letter-spacing: 3px; }
css padding
With CSS Padding you will be able to
change the default padding that appears inside various HTML elements
(paragraphs, tables, etc). But first, let us make sure we understand the
definition of padding. A padding is the space between an element's border and
the content within it.
Please see the example below for a visual representation. Note: The border has been made visible, for
each element, so you may more readily see the effects of padding.
CSS Code:
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
There are several ways to go about defining the CSS Padding
attribute. We will show you every possible way and let you know which ways are
the best.
css padding: 1 value
As you saw in the example above, padding can be uniform inside an
element. Specifying one value will create a uniform padding on all sides: top,
right, bottom, left. In addition to using exact values, you may also define the
padding with the use of percentages.
CSS Code:
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
css padding: padding-(direction):
Each HTML element actually has 4 different paddings: top, right,
bottom, and left. It is possible to define these individual paddings simply by
adding a direction suffix to the padding attribute. Example form:
padding-(direction). Defining only one direction will leave the other 3 default
paddings untouched.
CSS Code:
p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}
Four padding values can be declared at once by either specifying
two or four values. When only using two values, the first will define the
padding on the top and bottom, while the second will define the padding on the
left and right.
When using the four value padding specification, the corresponding
directions are: top, right, bottom, left. To help you remember what the order
is, just remember that it starts at the top and then moves clockwise until it
reaches the left. The examples below shows partial (2) and complete (4) padding
usage.
CSS Code:
p {
padding:
5px 15px;
border:
1px solid black;
}
h5{
padding:
0px 5px 10px 3px;
border:
1px solid red;
}
CSS Margins are nearly identical to the
CSS Padding attribute except for one important difference: a margin defines the
white space around an HTML element's border, while padding refers to the white
space within the border. Setting the actual value of margin is just the same as
with padding, so you can probably zip right through this lesson.
Please see the example below for a visual representation. Note: A border has been added to each
element so you that you may see the effects of the margin attribute.
CSS Code:
p {margin: 5px; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
There are several ways to go about defining the CSS Margin
attribute. We will show you every possible way and let you know which methods
are the best.
css margin: 1 value
As you saw in the example above, margin can be uniform outside an
element. Specifying one value will create a uniform margin on all sides: top,
right, bottom, left. In addition to using exact values, you may also define the
margin with the use of percentages.
CSS Code:
p {margin: 2%; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
css margin: margin-(direction):
Each HTML element actually has four different margins: top, right,
bottom, and left. It is possible to define these individual margins simply by
adding a direction suffix to the margin attribute. Example form:
margin-(direction). Defining only one direction will leave the other 3 margins
untouched.
CSS Code:
p { margin-left: 5px; border: 1px solid black; }
h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; }
css margin: 4 values
Four margin values can be declared at once by either specifying
two or four values. When only using two values, the first will define the
margin on the top and bottom, while the second value will define the margin on
the left and right.
When using the four value margin specification, the corresponding
directions are: top, right, bottom, left. To help you remember what the order
is, just remember that it starts at the top and then moves clockwise until it
reaches the left. The examples below show partial (2) and complete (4) margin
usage.
CSS Code:
p {margin: 5px
15px;
border: 1px
solid black; }
h5{margin: 0px
5px 10px 3px;
border: 1px solid red;}
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; }
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; }
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; }
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:
<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>
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. ,
<body>,
, 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:
<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>
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).
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
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:
<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>
Comments
Post a Comment
Thank you for your Comment