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:
This is a normal paragraph.
class="first">This is a paragraph that uses the p.first CSS code!
class="second">This is a paragraph that uses the p.second CSS code!
...
You can use CSS classes with any
HTML element! However, what happens if we had already defined a value for the
default tag, would this cause any problems for classes of the
paragraph tag?
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:
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
HTML Code:
This is a normal paragraph.
class="test1">This is a paragraph that uses the p.test1 CSS code!
class="test2">This is a paragraph that uses the p.test2 CSS code!
...
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); }
In the above example we used
three different formats for defining a color: a color name, hexadecimal values,
and RGB. Check out the the list of supported
color names. Hexadecimal form is a pound sign (#) followed by, at
most, 6 hex values (0-F). RGB defines the individual values for Red, Green, and
Blue. Example form: rgb(Red, Green, Blue); with the range of 0-255 for each
value.
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://www.4bizindia.com/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;}
css fixed background image
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,
except Internet Explorer 6.0, which displays it correctly.
CSS Code:
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;}
css background image positioning
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;
}
Note: When using pixels, the location of the image will be (A)px from
the left of the screen and (B)px from the top of the screen, where A and B are
integers.Note: When
using percentages, the location of the image will be (A)% from the left of the
screen and (B)% from the top of the screen, where A and B are integers.Note: Available positioning keywords are: top, right,
bottom, left, and 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
font
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); }
In the above example we used
three different formats for defining a color: a color name, hexadecimal values,
and RGB. Check out the list of supported
color names. Hexadecimal form is a pound sign (#) followed by at
most 6 hex values (0-F). RGB defines the individual values for Red, Green, and
Blue.
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; }
As you probably noticed
throughout 4bizindia.com, we do not use serif fonts, except in special cases,
like for the titles of the Code and Display boxes.
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;
}
css padding: 2 & 4 values
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
margin
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.
Comments
Post a Comment
Thank you for your Comment