Getting Started With CSS (Web Design Tips)
Published July 24th, 2004 in Web Design TipsGetting Started
Each style consists of a tag name and declarations. This determines how the
elements should be displayed. The declarations must have a property, colon,
and one or more value. Properties can be combined to save time and energy.
Here is an example of the proper layout of a style:
h3 { font-size: 16pt; color: red; }
Internal Style Sheets
Internal style sheets are great to use if you are only applying it to one
page of your web site. If you want it to apply to more than one page you should
just use an external style sheet.
To create an internal style sheet declare the <STYLE> tag within the <HEAD>
tag. Next, insert the name of the tag and the properties. Use the { to
declare the beginning of the tags properties. Now just insert your properties inside the bracket and
end with a closing }. Repeat the steps for each tag and then close with </STYLE>.
Below is an example of an internal style sheet:
<head>
<style>
h3 { color: yellow; font: Times New Roman; }
</style>
</head>
Local Style Sheets
Locally applying style sheets is a great way to learn how to use styles.
However, it is not recommended for large scale web sites with multiple pages.
Local style sheets do not allow for easy editing and updating of a web site as
a whole. But, they are great for beginners to test and try out so they can
achieve a greater understanding of style sheets.
When using styles locally apply STYLE=” to the tag that you want
to add attributes to. Then type in your properties as noted above and use a closing “to
end that tag. Below is an example of how to use local styles:
<body>
<h1 style="font: normal; color: green;">Example</h1>
External Style Sheets
External style sheets are usually the best option for providing all of
your web pages with consistent design. External style sheets allow you to
update each of your web pages by adjusting one style sheet. This will
save you a lot of time in the long run.
First start by creating a text document usually named style.css.
Next, type the name of each property you wish to add style to and also create
the properties within that style tag. Again use the { to mark the
beginning of the tag’s properties and type a } to end the properties.
Below is an example of how your style tags should look:
h1 { font: normal; color: green; background: yellow; }
p { text-align: left; font: Times New Roman; }
You can add as many tags and attributes as you need!
When your done creating your style sheet add a link to all web pages in the
<HEAD> section. Here is how it should look:
<head>
<link rel=stylesheet type="text/css" href="style.css">
</head>
Using Fonts in CSS
Because the FONT tag has been deprecated in the new HTML 4.01 standards it is important to learn how to
apply fonts within an HTML document using style sheets.
Font Families
With the font families you can specify a variety of fonts so that at least
one of them will be available on a viewers screen. Make sure to specify the fonts
within the tags of your style sheets. To apply this method do the following:
font-family: "Tahoma", "Times New Roman";
This will tell the browser to view the font in Tahoma. If Tahoma is not
available then Times New Roman will be viewed instead.
Applying Italics and Bold to Fonts
The <I> and the <B> tags have
also been deprecated. So to apply these attributes to a font you must do the
following:
Type font-style:italic for italic font and
font-weight:bold for a bold font. You can also use oblique
instead of italic and also lighter instead of bold.
Applying Font Sizes
To set a size of a font you can use points or pixels.
Type font-size: and then type in a pixel or point size such as
16pt or 18px. You can also use percentages
to apply font size such as 100%.
Manipulating Text in CSS
Style sheets allow you to apply text color, text background, align text,
and underline text.
To apply text color simply type color:blue where blue
can be any color or hexadecimal number.
To apply a text background color simply type background:green.
Where green can be any color you would like. You can also type transparent where
you would type color.
Aligning text is extremely easy to do as well. Just type text-align:center.
Where center could be left, right, or justify depending on your alignment issues.
To underline text in your web page simply type text-decoration:underline.
Where underline could be either overline or line-through.
Positioning in CSS
A lot of the time web designers use tables and/or graphics to position information
in a particular place on the screen. However, CSS positioning has proven to be faster
and easier than ever before. It is an extremely accurate way to place elements
in your web page anywhere you would like!
There are three types of ways to position your elements. They are static,
relative, and absolute positioning.
First, let’s take a look at absolute positioning. This allows you to
create a separate element within your HTML document. You can position the text or graphics
over another piece of text or to the left or right of the text. Here is an example of how you
can apply this:
#absElement { position: absolute; top: 34px; left: 64px; width: 250px; color: blue; }
Secondly, there is relative positioning. This method allows
you to flow information into place on the screen. It allows you to apply text in relation
to other text on the screen. Here’s how:
Type EM {position:relative; 20px; color:red}
now just type <EM>and </EM> tags around the word or phrase
that you want positioned.
Thirdly, there is static positioning which is actually the
default position unless you declare it otherwise. It can become useful to apply
when you want to use relative and absolute positioning to add contrast to the static
position. You code static the same as above except you must change absolute/relative to
static.
Margins and Borders
Margins and borders will greatly influence the final outcome of your web site
design. They allow you to organize the material in your web pages anyway you would like.
Setting margins allow you to space all elements in your window in relation
to the set position of that margin. You can set it in relation to the top, bottom,
left, right, or all sides together. To set the margins an example is provided below:
Type BODY {margin: 8em;} where 8em can be a length, percentage, or value.
You can add any other definitions inside the brackets as well.
You can also set padding to add space between the border and the element.
To do this simply type H2 {padding: 5px 2.5px 15% 30px;}. You can add up to four
values within the padding property.
To manipulate the width of a border on a page simply do the following:
p { border-width: 2px 4px 6px 8px; }
If you want to set the border on a side just add left or right to the border-width
just like this:
P { border-right-width: 2px 4px 6px 8px; }
The default color of the border is always black. You can simply change the
default though to accomodate your needs. Note that inset is just one border
style to chose from there are many others to choose from. Do the following to adjust color to a
border:
p { border-color: red; border: 10px inset; }
Please also note that you may add multiple layers to your borders by
just typing double or triple in the attribute tag.
Creating Custom Tags
Creating custom tags in CSS allows for better control over your
HTML. With the use of custom tags you are not limited to the basic tags
such as P and H1 tags. You can create your own unique
names to fit the content of your web pages.
To create your custom tags you will need to use either the
DIV or SPAN tag. DIV is
used for block-level elements such as the P, H1, or BODY tags and
SPAN is used for inline elements such as FONT or IMG.
To begin creating your custom tags type DIV.classname
within the <STYLE> section of your HTML document or in your
external style sheet. Classname can be any word that identifies your class. To add
attributes to that tag follow the layout of the example below:
DIV.classname { background: red; }
Now you can identify that tag within your HTML document by simply typing
<DIV CLASS=”classname”>. Now type in the information you want
to be effected by this tag and then type in a closing DIV tag.
To use the SPAN tag simply follow the same steps above. All
you will have to do differently is replace the DIV with
SPAN .
Applying Backgrounds and Colors
HTML will allow the use of colors and backgrounds but their use
is limited. It is impossible to use HTML to create colors and backgrounds
on certain places on a web document unless you use tables and cells. That
method can take up a lot of time and energy. Using style to take charge of your
display will provide the most efficient alternative to long coding.
Using Colors
If you use the color tag you can control the colors of horizontal rules, text,
and borders. To do this create an ID selector and its attributes within the
STYLE tag or in your external style sheet. An example of this is provided
below:
ID selector { color: blue; }
Using Background Colors
The background tag is really useful for setting colors behind text or images.
This can add contrast to your web page that can make important headings or
elements on your site stand out.
Within the STYLE tag identify the elements you wish to have effected
by the background tag. The example below shows you how to do this by using the BODY tag.
body { background-color: blue; }
Well that’s about it for today’s web design tip; CSS is just about the coolest thing since sliced bread if your a webmaster, Be sure to “Continue Reading” by clicking below, this tip’s got about 5 more pages to it, I just didn’t want to clutter up the frontpage. Well as always email me or post it in the forums, peace out-
-b
Resources:
CSS: Absoloute vs. Relative Positioning. Darcy, Mark. URL http://www.tcnj.edu/~darcy/paper.html.
Located on May 27, 2000.
A very informative review written by a college student.
It is about absoloute and relative positioning. Recommended for the
beginner who is seeking a better understanding of CSS.
Index DOT CSS: The Advanced CSS Resource. Wilson, Brian. URL http://www.eskimo.com/~bloo/indexdot/css/index.html.
Located on June 1, 2000.
An advanced guide to using and applying CSS. The CSS information provided here
covers properties, syntax, CSS support, and spec history.
Jans Guide to HTML and More: Style Sheets. Weijers, Jan. URL http://www.weijers.net/guide/stylesheets.html.
Located on June 1, 2000.
This site covers just about every issue that arises with stylesheets.
Not only are there explanations, but there are also a variety of examples.
I would recommend this site for the beginner.
NCD Stylesheet Guide. URL http://www.ncdesign.org/html/sindex.htm.
Located on June 1, 2000.
A very comprehensive list of all CSS tags and their uses. A great
reference for quickly looking up tags and their attributes. Recommended for any
web designer.
Page Resource: Cascading Style Sheets. Pollock, John. URL http://www.pageresource.com/dhtml/indexcss.htm.
Located on May 27, 2000.
This site is a great place for a beginner to start. Page Resource
covers all the basics to designing your first style sheet. This is a
tutorial site that walks you through each step in the creation process.
Style Master. URL http://www.westciv.com/style_master/index_dynamic.html.
Located on May 30, 2000.
You can download a shareware CSS editor here! This program will help
you get a grasp on using style sheets. The editor will aid you when you
create your style sheet. It offers drop down boxes with options, hints, and ideas
for the creation of your style sheet.
Style Master: Hands On CSS Tutorial. URL http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html.
Located on May 31, 2000.
This site offers a great hands on guide to developing and implementing
style sheets. A ten-hour lesson is provided on-line at no charge. The lesson
takes users on a tour and offers practice on the development of CSS.
TechWeb: CSS Review. Reilly, Mark and Adelaide Juguilon. URL http://www.webtools.com/story/html/TLS20000330S0001.
Located on May 27, 2000.
This site offers a review about cascading style sheets.
The review discusses why, when, and how to use CSS. The site
also tells readers the basics of creating a style sheet. Aimed for
the beginner.
UseIt: Effective Uses of Style Sheets. Nielsen, Jakob. URL http://www.useit.com/alertbox/9707a.html.
Located on May 27, 2000.
This is an in-depth resource regarding CSS. The site discusses
the effective ways to use and implement style sheets into your site.
There is information provided on different types of style sheets
and centralizing your design. This site is aimed to inform the novice.
Webmonkey: Mulders Style Sheet Tutorial. Mulder, Steve. URL http://hotwired.lycos.com/webmonkey/98/15/index0a.html.
Located on May 30, 2000.
This site acts as a tutorial guide about style sheets. It takes the
beginner through the “land of style”. The information here covers just
about everything. From implementing fonts, colors, and backgrounds to
creating your first style sheet.
Webreview: Controlling Layout With Dynamic Positioning. Falla, Rob. URL http://www.webreview.com/wr/pub/98/06/26/feature.
Located on June 1, 2000.
This is a review article that discusses cascading style sheets ability to
control the layout of web pages. Also discussed is the position property and the
values of it.
World Wide Web Consortium: Cascading Style Sheets, level 1. Lie, Hakon and Bert Bos. URL http://www.w3.org/TR/REC-CSS1-961217.html.
Located on May 27, 2000.
The w3 organization develops the standards over the Internet.
This site informs readers about the standards for creating
style sheets. It also provides various information pertaining to the
development of style sheets. If you can’t find it here, then you won’t
find it at all!
Writing CSS1 Style Sheets: A Short Guide to CSS. Fredriksson, Urban. URL http://www.canit.se/%7Egriffon/web/writing_stylesheets.html.
Located on May 27, 2000.
This guide teaches CSS through the use of concrete examples.
The author of this site is very upfront and to the point.
He discusses the pro’s and con’s of applying style sheets to a
web page. This site is recommended for an advanced audience.
W3: Adding a Touch of Style. Raggett, Dave. URL http://www.w3.org/Markup/Guide/Style.html.
Located on May 27, 2000.
A short guide that walks you through the basics of applying your style sheet
to your HTML document. This site discusses design issues that are extremely
important when using CSS to control the design concepts of your web page.
No Comments to “Getting Started With CSS (Web Design Tips)”
Please Wait
Leave a Reply