Introduction to CSS
I. Introduction
This tutorial is intended to be more informative than instructive, detailing
a number of key terms and concepts that are crucial to the understanding of
CSS. This article is presented as a starting point for those just entering
the realm of web design or for those who are just now wishing to enlighten
themselves.
At this point CSS (Cascading Style Sheets) have become the accepted practice
for styling web pages by the web design community and the W3C. The W3C (World
Wide Web Consortium) sets the standards for the development of the Internet,
including HTML, XML, CSS, and much more. As HTML (HyperText Markup Language)
has developed in XHTML, it has become more reliant upon CSS for style and
format. So, if you plan to design websites that are standards compliant and up
to date, learning CSS is crucial.
II. Why use CSS?
You will save a lot of time and frustration by learning to create websites
that integrate stylesheets. An external stylesheet can be applied to any page
that links to it. That means that you only have to write the styles one time
and, that, any time you need to make a change, you only have to make it once and
it is applied to the whole site.
Another reason that must be considered is browser compatibility. Many of
the old styling elements and attributes of HTML 4.01 (such
been deemed deprecated by the W3C and are no longer supported by many modern
browsers.
III. Implementing styles
CSS can be added to a website in three ways: externally, internally, and
inline. You can use any and all of the methods to style a website, but there
is an hierarchy that is followed natively. An internal style will override any
external style applied to the same element. Likewise, and inline style will
override any internal style applied to the same element.
External styles:
An external stylesheet is a CSS document (such as style.css) that is called
between the <head> tags in an HTML document. The styles described
in this external document can be applied to any HTML document that links to it.
Here is what should be placed in your HTML document:
or you can also write it as so:
import ’style.css’;
</style>
Either way should work fine, so it is your preference for the most part.
Internal styles:
Internal styles are those that are defined between opening and closing
<style> tags within the <head> section of an HTML document. These styles
will only apply to elements within that document. These styles are written in
exactly the same format as external styles, except within the HTML document.
Example:
p { color: green; }
</style>
Inline styles:
Inline styles are applied directly to specific elements within an HTML
document. The style is only applied to the element within which it is defined
and to no other elements in the document. These styles are written much the
same way as the previous, but the element identification is left off for lack
of need. You call define multiple styles by separating them with a semicolon (;).
Example:
There are many ways in which you may call and define styles because there
are many different potential needs, but defining as many styles as possible
within an external stylesheet will be the most efficient and save you the most
time.
IV. Applying Styles
CSS allows you to style or format any element of an HTML document. There are
three ways in which an element can be styled: by assigning styles to an element
with a specific id attribute, by assigning styles to all elements with a
specific class attribute, or by assigning styles to all of one element. Note
that these techniques are only used for internal and external styles.
ID
Any unique elemental body that needs to take on specific styles should be
given a unique ID. That ID is given by using the id attribute within the
elements tag.
ID attributes look like this in:
CSS: #green { color: green; }
Class
The class identifier should be used on repeated elements. Use it if you want to
apply the same styles on more than one element.
Class attributes look like this in:
CSS: .green { color: green; }
Basic elements
You can apply styles to any HTML element (<body>, <p>, <table>)
and it can be extremely useful to do so because those styles will be applied to
any instance of that element. So if you know that you want all text within <p>
to be green, then you don’t need to give them all a class, you can style the
basic element instead.
Basic HTML elements look like this in:
CSS: p { color: green; }
V. Recap
This article has given very basic instructions about the integration of CSS
into a website. This article has not given much instruction of CSS, but an
introduction that should give you a basic understanding of its uses and prepare
you for the next step. Now that all the formalities out of the way, my next
article will be more instructive and detailed with plenty of examples.