CSS Tutorial
Tired of looking at boring, black, plain text on a white background? Then you need CSS! This
paper will help you to transform your boring website into something exciting, colorful and professional.
CSS helps to not only make your site more reader friendly, but also helps to distinguish your site from
others. Can you imagine if every single site you visited looked the same? You would not enjoy web
surfing, would you? By the time you finish reading this paper, you will be able to create and use your
own custom CSS file on your website.
CSS (Cascading Style Sheets) is a file that is used to determine how a website is presented to a
visitor. Its main function is to separate the content (text) on a website from various web site elements
(tabs, divs, tables, etc.). Thus, a CSS file is essentially a list of rules on how a site should be rendered, or
shown, to the visitor. The syntax of CSS is very simple and consists of a selector and a declaration block.
A selector is essentially a unique identifier that determines what rules, or properties, applies to a specific
item. Inside of the declaration block, there is a property, a semi-colon and a value that applies to that
property.
Here Declaration block is shown in orange, selector is shown in blue, property in red, property value in
green.
In CSS, there are also pseudo-classes. Pseudo-classes are used by CSS to identify markup
elements and any actions that may apply to them. An example of pseudo-classes is :hover. Pseudo-
classes also have pseudo-elements which makes a selection of partial elements, such as :first-line, :first-
letter.
Prior to CSS, any style related declarations were implemented in HTML. These declarations had
to be explicitly done and done repeatedly. This often led to very complex, long and hard to read HTML
files. CSS allows all of this information to be placed into a separate file and then referenced by a
particular web page (External Style Sheets). This simplifies HTML code and offers reusability and easier
maintenance to a developer. CSS information can also be placed in blocks at the top of a web page
(embedded style) or can manage single elements using the “style” attribute (inline style). For the sake
of brevity, this paper will only focus on external style sheets.
Now, that we discussed some of the history and syntax of CSS, we can start to code some
examples. To start, you will need a blank html file and any text editor or IDE to help you build the CSS
file, I am using Netbeans in this example. In Netbeans, create a new CSS file and name it (Right click
current project -> other -> Web -> Cascading Style Sheets). Netbeans automatically creates a CSS file
with some sample code.
Dummy text is generated for a CSS file.
In order to use the CSS file, your .html,. jsp, etc., file must link to the stylesheet, if the CSS is in a
separate file.
This is what is generated with a default CSS file that contains nothing more than an empty ‘body’
selector. The ‘body’ selector controls how text is presented in the body section of a web page.
Font Weight
The font weight property determines how thick or thin text appears on screen.
List of font weight values.
Here we attempt to set the text to bold. If all goes well, from now on, whatever text is in the ‘body’
tag on our web page will appear in bold.
Aside: “font-family” determines which fonts are preferred to be used when shown to the visitor. If the
browser is not capable of using those fonts, then a system default is selected based on the visitors
device.
Font weight set to bold. Success!
Color Selections
In CSS, color selections can be made using either color names, such as ‘red’, ‘blue’, etc., or by assigning
hex values.
Font color set to red.
Font Color set to red and background color set to blue.
Font Size
In order to make text more readable, the option to change size is very important. CSS has a huge set of
preset size values as well as the choice of a custom size also.
List of font size values.
Larger text
Very large text
Images:
CSS can allow the use of images, as well as, control their position and other attributes. Images
further help to distinguish web sites from one another and add further visual color and excitement. The
next example will show the proper to use a background image in a CSS file.
“Background-image” provides a relative link to the image file that you wish to use. Relative links are
based off the web site’s “index” file. Relative linking provides more flexibility should one decide to move
images or other files to different locations on a server. In this case, the path would be “site
root/pics/smiley_face.jpeg”. “Background-repeat” determines if and how an image repeats in the
background of a page. In this example, the image does not repeat. “Background-position” determines
where the image will appear on a page. The position can be absolute, such as “top left”, or can be
relative based on pixels or percentages. Based on the above code, a single instance of a smiley face
should appear in the top left of our test page.
Success!
Conclusion
Before
After
This ends the very basic CSS tutorial. There are many more attributes and properties to be
tweaked and changed in a CSS file than could be covered in this condensed tutorial. However, with even
this relatively brief lesson, one can see how much of an improvement can be made to a boring web site
to give it more color and to make it more attractive to visitors. I hope that this tutorial will help you
create a more attractive site for your own personal use.