STEP 3

left arrow
To Step 2
Home page >> Step 3 >> CSS
Palette

Introduction to CSS

As we saw in the previous section, HTML is the place to start building your site. For further enhancements to your site regarding style and how to apply it globally, I will be talking about the combination of HTML with CSS.

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language (like HTML). Its most common application is to style web pages written in HTML and xHTML. In practise, with CSS you can change the appearance of hundreds of web pages which your site can have, by changing just one file!

CSS can be used locally by browsers to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of your document content (written in HTML or a similar markup language) from your document presentation (written in CSS). This separation can:

  • Improve content accessibility
  • Provide more flexibility and control in the specification of presentation characteristics
  • Reduce complexity and repetition in the structural content (such as by allowing for tableless web design)
  • make maintenance and visual consistency much simpler to handle (by avoiding inline style attributes)
  • Improve you search engine ranking

CSS can also allow the same HTML page to be presented differently for different rendering methods (like on screen, print, etc.).

In short, with CSS, you write once, use everywhere and for anyone!

Using CSS

As you have seen so far, the way you learned to set styles was through inline attributes (the style attribute) of certain tags. This, as we said in this section, with the use of CSS, should be avoiding and instead separate your HTML content with the style.

The suggested and most "clean" way (although there are other ways which I will not cover) to link your HTML document to its style rules (CSS file) is through the following tag which will reside in your head part of your HTML (between <head> ... </head>):

<link rel="stylesheet" href="stylesheet_filename.css" type="text/css" media="screen" />

where in the href attribute you denote the relative path and name for your css (i.e. if you have at directory A/ your example.html file and your example.css file is under A/css/ directory, then the href should be declared as "./css/example.css". Through the media attribute you declare which output will be affected by the stylesheet (the two values for the media attribute which you will need are "screen" for the computer screen, and "print" for the printer).

The CSS files have a .css extension and they too are plain and simple in their structure text files.

Your first HTML web page with CSS support

Before I tell you more on the structure and the rules of CSS, it is best if you write your first HTML file and your first CSS file and link them together to see the result. Are you ready? First open a new text file, write the following code and save the file as "cssexample.html" in your "C:" drive or your desktop:

cssexample.html:

<html>
    <head>
        <title>My first HTML with CSS support</title>
        <link rel="stylesheet" href="cssexample.css" type="text/css" media="screen" />
    </head>
    <body>
        <p>
            Paragraph in the body part
        </p>
        <div class="example">
            <p>
                Paragraph within the example class
            </p>
        </div>
    </body>
</html>

Now open a new, second, text file, write the following code and save the file as "cssexample.css" in the same directory you placed your HTML file in:

cssexample.css:

p {
   margin:10px 20px 30px 40px;
   font-family:Tahoma;
   font-size:10px;
   color:#FF0000; /* Red color */
}

.example {
   margin-left:50px;
   width:300px;
  background-color:#C9DEFD; /* Lighter blue color */
}

.example p {
   padding:10px;
   font-family:Trebuchet;
   font-size:15px;
   color:#000169; /* Darker blue color */
}

Indentation plays no role in css files as well, but by using it, you increase your code's readability and your work and life will become much simpler.

Opening the "cssexample.html" will result in the following screen:

CSS Example

By going through the CSS file in the next paragraph, I am sure that you will immediately get how CSS works and how simple it is (CSS can also get rather complex but for now and for building your first site, you will get everything you need from this section).

Basic CSS structure and rules

As you saw from the CSS example above, the CSS file is comprised of a bunch of statements enclosed in curly braces and something preceding them. That something is called a "selector". Any HTML element (paragraph as in our example, link, list, button, heading, etc.) is a possible CSS selector.

The first selector (p) characterizes how the paragraphs in our HTML file will be presented (they are going to have a margin (spacing in respect to the top, the right, the bottom and the left) of 10px (pixels), 20px, 30px and 40px respectively. All paragraph fonts are also going to be Tahoma, sized 10px (pixels) and red in color).

The selector which has a "." in front is a class selector. A class selector defines a group of style definitions that can be used by any element (in our case it is used by the div element) and as you probably figured out, one element can have multiple classes, thus allowing the same element to have different styles.

There are also selectors with a "#" in front of them, e.g:

#example2 {
   font-size:15px;
   color:#F3F3F3;
}

which are ID selectors. ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. You can call such selectory type from your HTML file using the attribute "id=", e.g.:

<p id="example2">

Therefore, in our example, the first paragraph receives its style from the first css "p" declaration, whereas the second from the paragraph declaration within the example class. And if you want to add comments to your style sheet file, just use /* Your Comment here */. Pretty simple, right?

Another important thing about CSS is inheritance. Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the "body" will also be applied to text in a paragraph. There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited, since intuitively, a paragraph would not have the same top margin as the document body for instance.

By now, you may also have seen one of the benefits of CSS in practise. If you didn't have just one, like in our example, but one thousand HTML web pages for your site and decided that you wanted to change the style for all paragraphs, then you would have to edit one thousand files, whereas now you edit just one!

In order to decrease repetitious statements within a style sheet, try and group selectors and declarations, e.g.:

h1, h2, h3, h4 {
   font-weight:normal;
   padding:20px;
}

Just below, I have put together a (not so small though...) list of the most useful properties for your elements in order to utilize them accordingly in building your site:

Property Description Values
Text
color Sets the color of a text color given usually in RGF formats #rrggbb or #rgb
letter-spacing Increase or decrease the space between characters normal or length (given usually in pixels - px - relative to the canvas)
text-align Aligns the text in an element left, right, center or justify
word-spacing Increase or decrease the space between words normal or length (given usually in pixels - px - relative to the canvas)
Fonts
font-family A prioritized list of font family names and/or generic family names for an element family-name or generic-family
font-size
Sets the size of a font xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger or length (given usually in pixels - px - relative to the canvas or ems, the height of the element's font - em -)or %
font-style Sets the style of the font normal, italic, oblique
font-weight Sets the weight of a font normal, bold, bolder lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Background
background-color Sets the background color of an element color-rgb, color-hex, color-name or transparent
background-image Sets an image as the background url(URL) or none
background-repeat Sets if/how a background image will be repeated repeat, repeat-x, repeat-y, no-repeat
Padding
padding A shorthand property for setting all of  the padding properties in one declaration padding-top, padding-right, padding-bottom, padding-left
padding-bottom Sets the bottom padding of an element length (given usually in pixels - px - relative to the canvas)or %
padding-left Sets the left padding of an element length (given usually in pixels - px - relative to the canvas)or %
padding-right Sets the right padding of an element length (given usually in pixels - px - relative to the canvas)or %
padding-top Sets the top padding of an element length (given usually in pixels - px - relative to the canvas)or %
Margin
margin A shorthand property for setting all of  the margin properties in one declaration margin-top, margin-right, margin-bottom, margin-left
margin-bottom Sets the bottom margin of an element length (given usually in pixels - px - relative to the canvas)or %
margin-left Sets the left margin of an element length (given usually in pixels - px - relative to the canvas)or %
margin-right Sets the right margin of an element length (given usually in pixels - px - relative to the canvas)or %
margin-top Sets the top margin of an element length (given usually in pixels - px - relative to the canvas)or %
Positioning
position Places an element in a static, relative, absolute or fixed position static, relative, absolute, fixed
vertical-align Sets the vertical alignment of an element baseline, Sub, Super, Top, text-top, middle, bottom, text-bottom, % or length (given usually in pixels - px - relative to the canvas)
z-index Sets the stack order of an element auto, number
Lists
list-style A shorthand property for setting all of the properties for a list in one declaration list-style-type, list-style-position, list-style-image
list-style-image Sets an image as the list-item marker none or url
list-style-position Sets where the list-item marker is placed in the list inside or outside
list-style-type Sets the type of the list-item marker none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew
Borders
border A shorthand property for setting all of the properties for the four borders in one declaration border-width, border-style, border-color
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width, border-style,
border-bottom-color Sets the color of the bottom border border-color
border-bottom-style Sets the style of the bottom border border-style
border-bottom-width Sets the width of the bottom border thin, medium, thick, length (given usually in pixels - px - relative to the canvas)
border-color Sets the color of the four borders, can have from one to four colors color (in RGB format #rrggbb or #rgb)
border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width
border-style, border-color
border-left-color Sets the color of the left border border-color (in RGB format #rrggbb or #rgb)
border-left-style Sets the style of the left border border-style
border-left-width Sets the width of the left border thin, medium, thick length
border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width, border-style, border-color
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style
border-right-width Sets the width of the right border thin, medium, thick, length
border-style Sets the style of the four borders, can have from one to four styles none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width, border-style, border-color
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border thin, medium, thick, length
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin, medium, thick, length
Classification
clear Sets the sides of an element where other floating elements are not allowed left, right, both, none
cursor Specifies the type of cursor to be displayed url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
display Sets how/if an element is displayed none, inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
float Sets where an image or a text will appear in another element left, right, none
position Places an element in a static, relative, absolute or fixed position static, relative, absolute, fixed
visibility Sets if an element should be visible or invisible visible, hidden, collapse
Dimension
height Sets the height of an element auto, length (given usually in pixels - px - relative to the canvas) or %
max-height Sets the maximum height of an element none, length (given usually in pixels - px - relative to the canvas) or %
max-width Sets the maximum width of an element none, Length (given usually in pixels - px - relative to the canvas) or %
min-height Sets the minimum height of an element length (given usually in pixels - px - relative to the canvas) or %
min-width Sets the minimum width of an element length (given usually in pixels - px - relative to the canvas) or %
width Sets the width of an element auto, % or length (given usually in pixels - px - relative to the canvas)

Let's put some hands-on work to apply some of the functionality mentioned in the list above.

Horizontal navigation bar example

An example which is going to elaborate more on the things you have learned from this section and at the same is going to prove useful to you (because it is widely being used in web design), is the creation of a horizontal navigation bar. The main CSS property that contributes to the creation of such menus is the "display:inline". More specifically:

HTML code (file cssmenu.html):

<html>
    <head>
        <title>My first CSS navigation bar</title>
        <link rel="stylesheet" href="cssmenu.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="nav2">
            <ul>
                <li><a href="#">item1</a></li>
                <li><a href="#">item2</a></li>
                <li><a href="#">item3</a></li>
                <li><a href="#">item4</a></li>
                <li><a href="#">item5</a></li>
            </ul>
        </div>
    </body>
</html>

CSS code (file cssmenu.css):

#nav2 {
   margin-top: 10px;
   margin-bottom: 5px;
}

#nav2 ul {
   background-color: #CCCCCC;
   text-align: center;
   margin-left: 0;
   padding-left: 0;
   border-bottom: 1px solid #CCCCCC;
}

#nav2 li {
   list-style-type: none;
   padding: 0.25em 1em;
   border-left: 1px solid white;
   display: inline
}

#nav2 li:first-child {
   border: none;
}

#nav2 a:link {
   text-decoration:none;
   color:#000169;
}

#nav2 a:visited {
   font-family:Verdana;
   text-decoration:none;
   color:#FF0000;
}

#nav2 a:active {
   font-family:Verdana;
   text-decoration:none;
   color:#000169;
}

#nav2 a:hover {
   font-family:Verdana;
   text-decoration:none;
   color:#FFFFFF;
}

If you then open the "cssmenu.html" file, you will get the following:

Apart from implementing such menus, CSS as I said before, should be used instead of tables for developing the layout of your page. This occurs by dividing your page into different sections through <div> tags.

CSS and browser compatibility

If you could say that CSS has a disadvantage, then CSS has an issue with browsers. Different browsers treat some CSS elements differently, which means that the appearance of a page might differ from browser to browser, but if you stick to what you have leraned so far, there won't be an issue. If there is, then there are hacks out there in the internet which will help you solve them. But for now, don't worry about them. Just have in the back of your mind that there might be cases (when testing your site before going live) where a page will appear slightly different when using different browsers.

CSS Reference

As I described also in the HTML section, makemyownsite.com is not intended to be a mere CSS tutorial or CSS reference guide. It provides end-to-end essential and invaluable information on how to start with the idea inception, proceed to design, implement, upload, track and monetize on your site, giving you a 360 complete view on making your own site (although I am also working on putting up a full CSS tutorial and reference on makemyownsite.com as well - still not ready yet though...).

This CSS section provides you with the most commonly used, day-to-day, HTML functionality that I believe should immediately be used by you to easily start creating your site.

For more CSS functionalities, I am suggesting w3school's CSS reference.

As I also said in the introduction of Step 3, the best way for you to learn building, is to start writing and experimenting yourself, as well as take ideas from other websites out there for your site.

Some examples of websites using CSS are the following:

Are you now ready to learn more on adding user interaction to your web pages?

left arrow Back to the HTML