Getting Started With CSS

By: Daniel Imbellino
Updated: March 14, 2013

This tutorial assumes you have read and studied our introductory guides to HTML or have previous experience with HTML before beginning with this section!

Cascading Style Sheets give web designers a way to add style and layout formatting to their web pages. There are several ways to define styles with CSS. You can define styles in the head section of an HTML document, inline (within HTML Markup itself), or in a separate ".css" file, etc.

In CSS we declare "selectors" which are used to reference a given HTML element within our webpage’s. CSS follows this standard:

CSS Ex: selector {property: value; property: value; property: value; }

For example, we could reference any HTML element with its corresponding selector in CSS:

h1 {font-family: “times new roman”, Helvetica, arial; font-size: 45px; text-align: center; }

p {font-family: “times new roman”, Helvetica, arial; font-size: 25px; text-align: center; }

Notice that both the “h1” (first heading) and “p” (paragraph) selectors have multiple properties associated with each declaration shown. Properties that contain more than one corresponding value are generally separated by commas, as is the case of the “font-family” values we’ve shown here. Each “font-family” declaration has three corresponding fonts associated with them, “times new roman”, helvetica, and arial. The last value is closed with a semi-colon to signify the end of property and the start of a new one. Also, properties that consist of more than one word should be encased with single or double quotes, which you can see we did here with the “times new roman” font family property. We declared three separate properties, “font-family”, “font-size”, and “text-align”, and closed each property with a semi-colon.

Each selector must be encased with opening and closing curly brackets in order to separate multiple styles for each selector, one at the beginning of the declaration, and one at the end.

Now we’re going to create a simple HTML document that houses our CSS styles in the head section of the document. You can use Notepad in windows, or you can download notepad++ through Google search in order to do so. To use windows Notepad, just click start, all programs, accessories, and Notepad to begin. A blank notepad document appears on the screen in which you are going to type the corresponding code exactly as shown:

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<style type=”text/css”>
h1 {font-size: 45px; font-family: “times new roman”, arial, Helvetia; text-align: center; }
p {font-size: 25px; font-family: “times new roman”, arial, Helvetica; text-align: center; }
</style>
</head>
<body>
<h1>Our Example Heading</h1>
<p>Our example paragraph</p>
</body>
</html>

Now save the document by clicking file, save as, and type a name for your HTML document, followed by the “.html” file extension without the quotes. So if you named your document “example-document”, you could save this file as “example-document.html”, again without the quotes!

Notice our CSS declaration is in the <head></head> of the document, and starts with a “<style type=”text/css”>” tag, and ends with a “</style>” tag. Also notice how we referenced our selectors in the body of the HTML document itself, nesting our “<h1>” and “<p>” tags withing the <body></body> tags. This concept of CSS we are showing follows a normal page flow, in which elements “cascade” (stack one on top of the other) down the page as they are declared.

We can also add style information to the body of the document by also declaring the body tag as a selector as well. Maybe we may want to add a background color or images to our webpages for example.

Body {background-color: red; } The “color” value is an attribute of our background property, and “red” is a value associated with “background-color”. We can specify a color by name, by hex value, or by an RGB guided value as well. RGB just means “red, green, and blue”, and we can specify color strengths by percentage or with a value between 0 and 255 for each corresponding color, with 0 being no color at all, and 255 being the full strength of the color:

Body {background-color: rgb(0, 255, 10); }

We specified to use 0 parts red, 255 parts green, and only 10 parts blue in our color variations. If we wanted to specify in percentages we can do this as well:

Body {background-color: rgb(10%, 60%, 45%); }

We can specify a background image for our page as well using the “background-image” property:

Body {background-image: url(“example-image.png”); }

This would assume the image file we are pointing to is local, and is located within the same directory as the HTML document.

We could also point to a forward directory that house the image file in question like so:

Body {background-image: url(“clip-art/your-example-image.jpg”); }

This declaration is pointing to a forward directory named “clip-art” that houses our image file.

We can also point back a directory from the current directory that houses our HTML document to point to another directory that houses the image file:

Body {background-image: url(“../clip-art/example-image-file.png”); }

Or we can point to an external resource somewhere on the internet that houses an image file we would like to embed as our webpage’s background image:

Body {background-image: url(“http://externalresource.com/external-graphic.jpg”); }

We can set additional properties for our background images as well. By default images don’t really scale proportionately depending on the size of the screen, aspect ratio, or resolution of the device that is rendering it. New developments with the CSS “background-size” property now give us the power to scale images in various ways depending on the factors we just stated.

The “background-size: contain;” property specifies to scale an image so that its width and height will fill the entire space of a corresponding element without going outside the elements boundaries. (would be good for a standalone graphic)

The “background-size: cover;” cover property specifies to scale an image as large as possible to fill in the background area. (would be good for a full webpage background image for instance)

The “background-size: contain” property would be best used with say, a banner image you use on multiple pages of your website, and you want that banner to scale to an appropriate size on multiple screens sizes, resolutions, aspect ratios, etc. In this next declaration we are going to specify height, width, and position properties for our fictitious banner selector, as well as specify how the image will scale:

First off, we are going to declare a custom selector that will house our banner image. We can define custom selectors easily using CSS ID’s and then reference those ID’s within our HTML document body using a <div></div> tag.

CSS ID’s start with a pound symbol and are then followed by the name of our corresponding custom selector:

#banner

Now that we’ve created our custom ID selector we need to specify the style information for it. Here we will be including the placement of the banner image on the webpage using percentages, as well as the width and height of the corresponding element as a whole:

#banner {width: 65%; height: 15%; position: absolute; left: 10%; top: 10%; background-image: url(“banner-image.png”); background-size: contain; }

Because we specified our height and width dimensions using percentages, our banner element will attempt to scale to 65% of the screen horizontally, and 15% of the screen vertically, regardless of the screen size or resolution of the device or monitor rendering the element, which is exactly what we want! But so far this only specifies the size of the containing element, however it does not specify the placement of the banner element on the screen, and this is where the position properties of CSS come into play. We used “absolute” positioning to determine the placement of our custom banner element on the screen. The way absolute positioning works is, measurements are made from the top-left corner of the screen cascading down and towards the right of the screen. Using absolute positioning we can place an object anywhere on the screen just by specifying placement from the top-left corner of the browser window.

In the case of our banner selector we specified for its corresponding HTML element to be placed a distance of 10% from the far left of the screen, and 10% from the top of the screen respectively. So we are effectively moving the element 10% towards the right, and 10% towards the bottom of the screen from the top-left corner of the screen:

“position: absolute; left: 10%; top: 10%;”

Now, remember how we stated that the “background-contain” property would scale an image to fill the entire elements width and height? We specified for the width to be 65% and the height to be 15% of the screen respectively. So our background image for our banner element will now attempt to fill this entire space, while remaining confined to this space, and not passing over its boundaries because of the “background-size: contain” property we specified for the banner selector.

Now let’s put this banner selector to work! We specified how to create the custom banner selector, but now we are going to show how to reference this selector in our HTML document body:

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<style type=”text/css”>
Body { }
#banner {width: 65%; height: 15%; position: absolute; left: 10%; top: 10%; background-image: url(“banner-image.png”); background-size: contain; }
</style>
</head>
<body>
<div id=”banner”>
</div>
</body>
</html>

In the example above we placed a <div> tag that references our custom selector in the form of a corresponding HTML element. CSS ID’s always follow the <div id=”selector”></div> syntax! Because we placed the image in CSS we have effectively created what appears to be an empty element, and this was because the graphic image we specified to be placed within this element was already declared in our CSS.

We could also specify height, width, and placement of our selectors using pixel values instead. Although you should do this sparingly since elements measured out in pixel values don’t tend to scale as well as elements that are measured out in percentages:

#banner {width: 800px; height: 120px; position: absolute; left: 45px; top: 20px; background-image: url(“example-banner.png”); background-size: contain; }

We can also specify the background size properties using percentage or pixel values if we choose to do so:

{background-size: 250px 200px; }(This would specify the width of background image to be 250 pixels wide, and for the height of the image to be 200 pixels in height.)

Or percentages:

{background-size: 35% 75%; } (This would specify the width of the background image to fill 35% of the available width, and 75% of the available height of the corresponding element to which it is contained within. )

We can also set the height or width of an element as “auto”, meaning the element will fill the entire available space horizontally or vertically, or both:

{background-image: url(“banner-image.png”); background-size: 800px; auto; } (This declaration specifies that the size of this particular image would have a width of 800px, and a height of auto, meaning the height would take up whatever amount of space is available for use.

CSS Positioning Properties:

Elements are set to a position of “static” by default, in which each element stacks one on top the other, flowing evenly down the page, hence “cascading” style sheets!

Absolute Positioning: Positions an element on the screen at an exact set of coordinates from the top-left, or bottom-right corner of the screen in a standalone fashion, making the element independent of any other element.

Relative Positioning: Positions an element relative to its position in a normal page flow. Basically it positions an element relative to another element. This is a preferred method of positioning since this form of positioning ties elements together within a page flow. Its best to start your CSS declarations off by setting a base starting point for your styles to begin, and it’s a best practice being as you would want your webpage’s to render their content in the same fashion on all major browsers and devices:

Setting a base starting point for the first element in your CSS declaration: #header {position: relative; left: 0%; top: 1%; }

This could be the base starting point for all your elements. Use relative positioning and margins whenever possible to place new elements in your pages, since both methods tend to tie elements together like magnets on the screen. Having one elements placement dependent on another helps to ensure that your content will render evenly across a multitude of devices regardless of their aspect ratio, screen size, etc.

Fixed Positioning: Positions an element within a fixed placement on the screen outside of the normal page flow. This works very similarly to absolute positioning. Elements positioned in this manner cannot move from their position on the page.

#header {position: fixed; left: 45px; top: 10px; } (Not my first choice for positioning elements.)

Stack Order of Elements:

With the use of “Absolute” or “Fixed” positioning you can change the stack order of elements, causing one element to overlap another element. This could be used to create cool designs in your pages, although not very practical in my opinion, I would stick with positioning elements relatively or by margins.

You can specify the stack order of an element using the “z-index” property. An element with a higher stack order always appears on top of an element with a lower stack order.

#element-one {position: fixed; left: 45px; top: 85px; background-image: url(“image-one.png”); z-index: 2; }

#element-two {position: fixed; left: 45px; top: 85px; background-image: url(“image-two.png”); z-index: 1; }

In this case, if both elements shared the exact same dimensions in width and height, element one would be visible, and element two would be hidden since element one has a higher stack order than element two.

Positioning with margins:

Margins work by clearing space around a given element, or so we’re told. Yes, they do clear space around a given element, but they also position elements relative to one another just like relative positioning tends to do. For this reason they are a preferred method of positioning.

Here we will create a starting element with a base position using relative positioning, then create a secondary element that will be placed using margins, effectively tying both elements together in normal page flow.

#banner {width: 99%; height: 15%; position: relative; left: 0%; top: 0%; background-image: url(“our-banner-image.png”); background-size: contain; }

#nav-menu {width: 99%; height: auto; margin-left: 0%; margin-top: 2%; font-family: “times new roman”; font-size: 40px; text-align: left; }

The “#banner” is our webpage’s banner image, which is also the starting element in our page flow, followed by our navigation menu “#nav-menu”, which is positioned 2% from the top of the banner image, and resides at the same baseline from the left of the screen as the banner itself.

We can position elements with margins as follows:
margin-top: 30px;
margin-bottom: 10%;
margin-left: 15px;
margin-right: 5%

We can also set margins by shorthand, although I recommend not specifying styles using shorthand properties:

“margin: 55px;” This would set all four margins to 55px.

“margin: 50px; 40px;” This would set the top and bottom margins both to 50px, and the left and right margins to 40px.

Padding:

Unlike margins, which clear an area around the outside of content, padding clears the area from within the borders of an element itself. We can specify padding using percentages or pixels:

padding-top: 5px; padding-bottom: 5px padding-left: 5px; padding-right: 5%;

Inline CSS with Span:

You can specify styles inline in an HTML document by using the <span></span> tag. You can use <span> along with an internal or external style sheet to add additional style information when you feel it’s necessary.

You use span within an element itself like so:

<h1><span style=”font-family: times new roman; color: red;”>This sentence has additional style information that will take precedence over styles placed in the head section of the document</span> </h1>

Span can be useful in a number of situations, such as when you are embedding a font into your webpage’s, but the font in question doesn’t support special characters that you need in order to write out your documents properly.

More Examples and a Little Recap:

Here’s an example HTML file with CSS style information embedded in the head section of the document:
<html>
<head>
<title>css example</title>
<style type="text/css">
body {background-color: blue; background-attachment: fixed; }
h1 {font-size: 45px; font-family: times new roman; color: blue; text-align: center; }
h2 {font-size: 35px; font-family: times new roman; color: blue; text-align: center; }
p {font-size: 35px; font-family: times new roman; color: black; text-align: justify; }
</style>
</head>
<body>
<h1>This is the first heading</h1>
<h2>This is the second heading</h2>
<p>This is a paragraph</p>
</body>
</html>

What we've shown is a simple web page that uses CSS in the head section of an HTML document to style a web page. First we declared the use of CSS using the <style type="text/css"> tag. This informs the browser of our embedded formatting information and that this code should be parsed (executed). Notice the h1, h2, and p tags used as a prefix in our css styles, they are called "selectors" and are used to point to the same HTML elements represented in the HTML file itself. Following each selector is a css "declaration". We are declaring property attributes and values for each selector (element). For instance the "font-size:" tag is a property attribute of each selector we assigned it too, while the "45px" is a value of the property attribute. So, property attribute + value = CSS declaration. Also, notice that each declaration has not only a selector, but an opening and closing set of "curly brackets" {}. As well, notice that each attribute/value pair has a semi-colon after it. The semi-colon signifies the end of a particular style and the beginning of a new one within each declaration.

If you plan on including your CSS styles to be embedded in the head section of your XHTML document, and you plan on using any of these characters: <, >, &, --, or ], then you will need to include a "CDATA" (character data) section that encapsulates your style information. The reason why is because these characters are specific to HTML markup, meaning they are used in the document body, and are therefore illegal in CSS.

Heres an example CDATA section added to a web pages CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
/*<![CDATA[*/ CSS style information here
/*]]>*/
</style>
</head>

We used the "/*<![CDATA[*/" and "/*]]>*/" to escape our style declaration from our page. If your not using illegal characters then you can display your CSS as normal, without the CDATA section.

Another way to set style information in your web pages is with "inline styles" such as this: <body style="background-image: url(example-image.jpg); background-repeat: no-repeat; background-attachment: fixed;">

We talk more extensively about inline styles in our introduction to HTML tutorial.

Although it’s a bad idea to mix content with presentation because you wouldn't be able to easily make changes to the content without changing a pages overall layout. Nonetheless you should learn all ways to style webpages!

Yet another way to add style information to a web page is by linkng to an external CSS file from your web page like this:



<title>Example of linking to an external css style sheet</title>
<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />

In this instance, it’s worth noting that the file you are linking too must end with a .css file extension. Now, there’s been a major argument for years on which methods of CSS implementation are the best, and which aren't. Sure you could set your styles directly inside of HTML using inline styles, but if you needed to change the content later on you wouldn't be able to do so easily. Also, with inlne styles, you can't create a template for a web page's layout to be used say for an entire section of a web site consisting of multiple pages with the same formatting. If the content changes with inline styles, you may have to change style information as well. The biggest myth that has roamed the web design industry for years is that you should always produce your css in an external file. Why? Because many professionals argue that if you need to change the layout for an entire section of a website, it’s much easier to make those changes in one place, making updating layout and style information simple.

Unfortunately, many web designers will create several external style sheets for a single page! This makes no sense and is a horrible practice at best. Instead remain consistent and create as few style sheets for your website as possible. It makes no sense linking to 3 external CSS files from each webpage, when one CSS file can do the same job!

You can also use "Media Queries" to provide layout and style information for your web pages. Information on how to implement Media Queries is located from the CSS Reference main page.

This guide to CSS does not cover everything, there’s a lot more involved to designing webpage’s than what’s specified here, and web design techniques can be done a great number of ways, in fact, when it comes to HTML and CSS, there’s probably a million different ways you could do one thing! The nature of today’s web design standards shows us that the art of web design is now becoming a process of modularity in which the web designer themselves can literally create and design new methods for doing just about anything they can think of with a webpage. Learning web design is not an easy process, and other closely related technologies such as the technical aspects on the server side of things, embedded and internally coded applications, etc, now share as much importance as the design process itself. Unfortunately many of the technologies that make up many of the innovative features of the internet today, are in fact very proprietary in nature. Honestly, the only true “standards” when it comes to the “World Wide Web” are HTML and CSS, everything else is a proprietary technology and is a supplement to these true standards. The newly developed features of HTML and CSS attempt to overcome many of the short falls of proprietary technology, such as making the use of multimedia like video and music have the ability to work independently in a browser, without the need and reliance on third party applications to make them function.