Introduction: My overview and memory lane

Ahhh css, in today’s online environment with web development we all must know at-least some CSS. Getting by as a developer today is on one hand easier with all the WYSIWYG editors, CMS and pre-made template websites but what if your want custom development? What if you want to get into the know of creating really well formatted websites? This is where i believe it is now 10 times harder than that of say 8yrs ago!

We now have to have a varied toolbox of such items as Style-sheets, JavaScript, Xhtml and other frameworks to name just a few of the things a good web developer must have a grasp on, today lesson we’ll begin sifting through some CSS or also know cascading style sheets (CSS).

The first time i laid my eyes on CSS was way back around 2000 or HTML 4.0 days, a friend had heard about css and we grabbed the latest copy of PC User and walked through a tutorial of how to change text styles with CSS. Just two lines of css and the text on my HTML web-page changed! I couldn’t believe my eyes, at the time development methods saw images, font tags and 1pixel spacers all done in windows or alike notepad editor.

What is CSS (Cascading style sheets)?

Well enough memory lane, lets begin the lesson before i talk your ears red, CSS is designed primarily to enable the separation of a documents content from document presentation (written in HTML or a similar markup language), including elements such as the layout, colors, and fonts. Its most common application is to style web pages written in the likes of HTML and XHTML, but the language can also be applied to many kinds of XML document, including SVG and XUL.

A Style-sheet is included in the head of any web-page, usually either imported/linked in or the actual style code written inline with the HTML. What does this mean? lets take a look.

  1. Importing/linking  a style-sheet into your document allows you to create a .css file full of styles that you can apply to any web-page in your site, change at your will without having to come back and change each item on your page individually. Almost always found in the <head> of your HTML document via <link> or @import statement tags.
  2. Inline styles are written inside of a html elements tag as an attribute, these styles are also applied once the page is rendered by the web browser. This meaning if you wanted to set all divs to have a blue background you would then have to go through the html and apply it manually.

If this is confusing now, don’t panic! Lets Today look at adding styles to a HTML document via a <link> element in the <head> section of our document and following CSS sessions look at the other methods. 1 step at a time my friends.

NOTE: i’m not the greatest at explaining things and you may notice i like to just jump right into the hands-on stuff? This is because i learned everything i know by doing just that, jump in change bits and pieces and then see the effect, this way i believe you learn the real way things work.

What Is a CSS style?

When you attach a css style-sheet to any web-page it tells the document that we now have an additional item which will be styling the document, CSS defines how any HTML elements are to be displayed with additional attributes, HTML was never intended to contain tags for formatting a document only, HTML was intended to define the base content of a document only like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Once HTML tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for us web developers. Development of large web sites, where fonts and color information were added to every single page, became a long tedious and time expensive process. To solve this problem, the World Wide Web Consortium (W3C) created the all new Cascading Style-sheet.

As good practice of standards and keeping all items of a web project organized, Styles are written separately and normally saved in external .css file, each External style sheet enables you to then change the appearance and layout of all the pages in the website, by simply editing that one single css file!

To know what you plan to achieve and how a document is built allows you to then see what each part of an html document does and then how the css is placed on each to give it a said style. Lets take a quick look at them both to get the visual side and also so those that are now scratching their heads, can put 2 and 2 together.

How a HTML document is built?

To get a grip on things a HTML document is built with tags, there is a base that makes up every web-page you see on the web today. This base is then taken to new heights by adding many other tags as the creator likes e.g images, links, text, and so-on, the base of a HTML page looks like this

<html>
<head>File:HTML.svg
<title><!--your page title in here--></title>

<!--your scripts and css styles in here-->
</head>
<body>
<!--your page contents in here-->
</body>

</html>


How does CSS effect HTML tags?

Css on the other hand is only compiled up of classes and IDs which each have attributes that create a style. Each class or id is usually unique in some way allowing you to specify what you want that style to look like on the page, e.g: a single style might in layman terms say this “I want this paragraph element on my page to have red text, a light red background and a 1pixel border”. A css document is compiled of the following elements and can have as little or as many as the creator wishes like so.

body{File:CSS.svg

font-size: 0.9em;
font-family: sans, serif, arial;

}

p.error{

color: #red
background-color: #990000;
border: 1px solid #dd0000;
padding: 8px 8px;

}

In-depth CSS styling guide

Firstly in your favorite editor or notepad create a file called mystyle.css, in this document we are going to create a couple of simple css selectors. CSS syntax is made up of three parts, a selector, a property and its value like this:

  • selector {property:value}

The selector is normally the HTML tag you wish to define, the property is the attribute you wish to change, and each property has a value. So lets add this to your document.

body {background:  # 333333;font-size: small;}

If you have ever looked at the source code of some web-pages or css files before you may have seen these? There is many beliefs of how css should be formatted and the above can also be written like this.

body {
background:  #333333;
font-size: small;
}

Is there a difference? NO! both are exactly the same so the formatting is up to yourself really. Now explaining this is very simple what we have done is say that we are addressing the <body> of our document and want the background of our page to be almost black using the RGB color code #333333 and the default font size of our page is now small. As explained above we are addressing the html element to style  BODY followed by an opening and closing { } set of brackets, now if you think about it how would we address styling paragraphs? or the HTML equivalent <p> ………… correct !! Use a P, what this would do is style ALL paragraphs on the page the style-sheet is attached to.

Now Lets Write some CSS?

Not so hard really is it? i like to think of HTML as a blank coloring book & style-sheets as the box of pencils you use to color it in with. To finish up here is some more code for our document, notice these items /* blah blah */ this allows me or anyone to add comments to css for reminders and so-on.

p{ /* selecting all paragraphs */
font-size: small;
color: #333;
}
h3{ /* selecting all heading 3 */
font-size: large;
color: #000099;
border-bottom: 1px dashed #000000;
}
.info{  /* selecting items with class info */
 border: 1px solid orange;
 background-color: #fafad2;
 padding: 10px;
}
#note{
 background-color: #ebebeb;
 font-family: "MS Serif", "New York", serif;
 margin: 12px auto;
 background-image: url(delete.png);
 background-repeat: no-repeat;
 padding-left: 18px;
}

We have now added some standard styling to a range of elements on our soon to be HTML document, you still maybe wondering what this looks like? Before we add the actual HTML to our page I’ll cheat a little and quickly show you what each of theses styles will look like once rendered by the browser.

Our Paragraphs:
simple CSS paragraph

Our H3 headings:
simple CSS H3 headings

Our elements with class info:
simple CSS class info

Our css element with ID note:
simple CSS ID note

Now that’s cheating big time !! Hahaha i never ever could figure out what something would look like before i had loaded the page in a browser and had a look at it so im a good teacher yes? Anyhow we now have our styles laid out. To finally attach all this into our page we need to add the HTML to the page itself, lets do it, again notepad or your favorite developing environment add the following html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple CSS stylesheets survival guide by Digitalkreations</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen">
</head>
<body>
<div>
<h3>Welcome to our CSS styling survival guide introduction</h3>
<p class="info">this text will all be orange as our stylesheet item <xmp><p></xmp> is set to do so. All this style information is just the tip of the iceberg, as there is many many items in the CSS syntax that we haven't even thought about yet.
<div id="note">We will cover alot more CSS selectors and syntax in the following tutorials to come soon.</div>
  <p/>
<div id="note">Did you know that Digitalkreations lead developer is an all self taught web developer?? He is also greating a great weblog on coding that we will feature some time soon.</div>
</div>
</body>
</html>

NOTE: See how we have linked our stylesheet in the <head> section of our document via this line of code:

  • <link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”screen” />

That imports our style-sheet to our web-page once our browser renders it.Finally to finish it all off, save the HTML doc as csstutorial1.html put both the your mystyle.css and csstutorial1.html files in the same folder and open the html document with your web browser, you’ll then see your creation.

I really hope you all enjoyed this tutorial? We have barely touched the surface of CSS, there is many selectors and syntax yet to go and i look forward to going through these with you. Please feel free to leave comments and suggestions, i like to hear from you always and and suggestions on tutorials are welcomed.

Kind regards

Related Posts

  1. Why Does my website rank well in One Search Engine, but Not in Another? Why Does my website rank well in One Search Engine, but Not in Another?