New Blog Address: http://blog.grayjunior.com/

Back to top ↑

Introduction

I intended to release it during the halloween period, but guess I didn’t make it on time. As the title says, this tutorial was meant for beginners and people who wish to learn some basic CSS. As you might have guessed, there are tons of tutorials and demos out there that goes deeper into CSS. The purpose of this tutorial is not to replaced any others, but simply serves as an additional information for people who are picking up and learning as beginners.

Setting Up A CSS Stylesheet

I believe most of us are equipped with the basic knowledge of setting up a website or a page. But at the same time, there are also many out there who are new yet keen to learn. And as this tutorial is catered to this group, I shall briefly walkthrough this part.

In order for a website or a page to be have beautiful layouts, visuals and effects, you need a stylesheet, also mostly referred to CSS (Cascading Style Sheet). To do this, there are 2 main methods: 1) Inline styling, and 2) Attaching an external stylesheet with the extension “.css”. For the first method:

    The Code: 

  • <head><style type="text/css">
  • <!--- Your CSS Styling here -->
  • </head></style>

And as you can see, the styling should be contained within the “<head>” element, and closed before the “</head>” closes. Another form of inline styling could also be used, as shown below:

    The Code: 

  • <p style="background: #222; color: #fff;">You texts here.</p>

This is rarely used as most people would perform it within the stylesheet. It is also considered a bad practice for a couple of reasons such as, older screen readers are unable to see these styles, making your page size larger, not separating design from contents and maintaining it could cause headaches.

But there are also situations where such methods could be better than others. For example, if you only need to change a particular portion of your content, you might consider using this method. Or when used together with javascripts, small alterations are made using such inline styles as they are easier. But if a particular set of styles will be repeatedly used, creating an extra class  for it is the most ideal instead.

For the second method:

    The Code: 

  • <style rel="stylesheet" href="stylesheet.css" media="screen" />

This method is the most commonly used, considered the best practices and standard across all platforms. Media refers to the targeted devices or platforms, with values such as projectors, print, screen. Unless otherwise stated, the default for the media attribute will be set to “all”.

Now, I believe you are ready to get started on your CSS stylesheet! So, let’s get the ball rolling.

CSS Reset

CSS Stylesheet

Why do you need to reset? Well, by default, certain elements came along with its own style in different browsers, such as margins, paddings, etc. In order to gain control of every elements and to reduce inconsistencies, most people would use a CSS reset, to set all elements style back to 0 or none. If you know that you need to style up most of the elements, a reset is suggested so that you may not stumble upon some deforms later.

Here’s the code for CSS reset(Eric Meyer’s CSS Reset):

    The Code: 

  • html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, figure, footer, header,hgroup, menu, nav, section, menu,time, mark, audio, video {
  • margin: 0;
  • padding: 0;
  • border0;
  • outline0;
  • font-size100%;
  • vertical-alignbaseline;
  • backgroundtransparent;
  • }

In most cases, such resets suffice most projects, and used by majority. Alternatively, you may also use YUI’s Base CSS. No matter whose or which version you use, it does the same thing altogether. To reset and reduce inconsistency.

CSS3: Webkit, Moz, O, Khtml

Basically, I meant different browsers. “webkit” refers to Safari and Chrome, while “moz” refers to mozilla firefox, “Khtml” refers to Konqueror Browsers, and lastly, “O” refers to Opera. Why use short-forms then? When CSS3 was introduced, different browser vendors have adapted their prefix into it, as most of the new features are still under-going testing and developments. So, if a CSS property has the vendor prefix, e.g. “-webkit-border-radius”, it means they are still under testing for that particular browser, and such are still not under CSS’s specifications. Note: Using such extension will not pass the CSS validation.

Basic format of a vendor prefix:

    The Code: 

  • '-' + vendor prefix + '-' + CSS property: value;

Examples of different vendor prefix:

    The Code: 

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px;
  • -khtml-border-radius: 10px;
  • -o-border-radius: 10px;

CSS3 Commonly Used Features

Since the day CSS3 was released, many bloggers and designers have adopted the use of its new features. Although they are still under development and testing, nonetheless they still work in most major browsers.

Box shadow

As the name indicates, it casts a shadow onto any elements such as “<p>”, “<span>”, “<div>”, etc. To enable box shadow on your content element, just initiate the vendor prefix + box-shadow: x-offset y-offset blur radius #color, as shown below:

    The Code: 

  • -webkit-box-shadow: 1px 1px 2px #333;
  • -moz-box-shadow: 1px 1px 2px #333;
  • box-shadow: 1px 1px 2px #333;

The “x-offset” and “y-offset” simply means how many pixels should the shadow cast from the element. Color could be indicated either in hexadecimal form, the color’s name or in rgba( CSS3 new property). An example of the 3 methods are shown below:

    The Code: 

  • -webkit-box-shadow: 1px 1px 2px #333;
  • -moz-box-shadow: 1px 1px 2px lightblue;
  • box-shadow: 1px 1px 2px rgba(33,33,33, 0.5);

You first input the color in R-G-B form which is only numerical sets like the above, then declare the amount of transparency, between 0 to 1, you wish to have for that color. Of course, its optional to be declared. If it is not stated, it shall be default value of “1”.

To cast an inner shadow on an element, you may have to add an additional value in front, as shown below:

    The Code: 

  • -webkit-box-shadow: inset 1px 1px 2px #333;
  • -moz-box-shadow: inset 1px 1px 2px lightblue;
  • box-shadow: inset 1px 1px 2px rgba(33,33,33, 0.5);

Yes that’s it. Just one word “inset”, your box-shadow shall now be inner shadow instead. Of course, “x-offset” and “y-offset” can be of value “0” while having a blur radius value of more than 1, the shadow will still appear.

html5-css3 and future of our web

Border Radius

Seen these beautiful boxes across the web? Before CSS3 came out, people used various methods to mimic the way an actual rounded box or container looked like with huge chunk of CSS and HTML elements nesting, image replacement in png, etc. Now, its easier than ever to get one of these beautiful feature appear on your pages. Here’s how to do it:

    The Code: 

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px
  • border-radius: 10px;

Easy? Yeah, of course! With just 3 lines of code, you can execute the rounded-corner effect to your elements. Why include the last one though? Well, it simply serves like a prevention measure. Should the CSS properties be included into CSS specifications, or that the vendor had removed their prefixes, the last line of code will be used instead, thus not losing the effect.

Multiple Background

This is also another fabulous feature added, which could significantly have an impact on designing for websites. instead of using multiple “<img>” elements within a container, or declaring multiple “<div>” elements with their background set within a container, this additional feature solves it all.

    The Code: 

  • background: #222 top left no-repeat; /* Fall back */
  • background: #333 top 11px no-repeat;
  • background: #111 bottom left no-repeat;
  • background: #444 left repeat-y;
  • /* Combining the above 4 background property into 1 below. */
  • background: #222 top left no-repeat, #333 top 11px no-repeat, #111 bottom left no-repeat, #444 left repeat-y;

As you can see, it is basically combining 4 sets of background property value into 1 single background property. Nothing difficult nor any changes to the way a background is declared as before. Simple and neat. But do note though, like the sample I’ve shown above, it is really good practice to have fall-back preventive measures. Think of “What if..?” situation, and you will understand why.

Text Shadow

Reduce the work load of the browser from rendering a lot of images. Save the trouble of doing it in photoshop and saving as png for the text shadow effect. You need none of those now, cause CSS have finally include this feature in CSS3. Just like box shadow, the values are the same way of declaring, with “x-offset” “y-offset” “blur-radius” “color”. Simple huh? Yup, that’s it. On top of that, it works in all major browser except IE 7 and below, I believe.

    The Code: 

  • text-shadow: 0px 1px 2px #333; /* Fall back */
  • text-shadow: 0px 1px 2px rgba(33,33,33, 0.5);

Web Fonts

create beautiful web with css3

Well, if you did follow my blog and some of the simple tutorials I made, I believe this is familiar. In this case, I shall not touch on it much, except to put a sample up here. If you really are interested in this, take a look at my tutorial: “The Beauty Of Typography.” By the way, yes it is really beautiful. One of the important element that a design won’t miss out. I’m pretty sure you wouldn’t want too, since everyone loves to beautify their own websites.

    The Code: 

  • @font-face { font-family: "Chunkfive"; src: url('chunkfive.otf'); }

Gradient Backgrounds, Colors

Yes, you may now have gradient colors across your website, pages, elements, wherever you want. Only problem is, different vendor has a different way of implementing it. There are tools out there that can assist you in generating a gradient color, but I believe it is in general good for anyone to know. This is the standard declaration of the gradient effect:

    The Code: 

  • /* Webkit Radial and Linear */
  • background: -webkit-gradient( radial, point1, radius1, point2, radius2, from(color), to(color));
  • background: -webkit-gradient( linear, point1, point2, from(color), to(color));
  • /* Mozilla Radial and Linear */
  • background: -moz-radial-gradient( point1, radius1, point2, radius2, from(color), to(color));
  • background: -moz-linear-gradient( point1, point2, color, color);

In the radial type, point1 and radius1 defines the effect of the inner circle, while point2 and radius2 defines the effect of the outer circle of the gradient. Simply put, point1 with radius1 will apply the “from(color)” to point2 with radius2 “to(color)”. Sounds confusing? Well, imagine you are dragging your mouse from one point to another. The 2 points you made with your mouse, are exactly like point1 and point2 in this situation. The points may be represented in pixels, position or percentage. Below is an example of a gradient in “webkit” and “moz”:

    The Code: 

  • #content #main .post {
  • background: #23adad; /* Fall back */
  • /* Webkit Gradient Background */
  • background: -webkit-gradientlinear,left bottom,left top,color-stop(0.06, rgb(119,158,18)),color-stop(0.53, rgb(155,190,45)));
  • /* Mozilla Gradient Background */
  • background: -moz-linear-gradient( center bottom,rgb(119,158,18) 6%,rgb(155,190,45) 53%);
  • }

As you can see, “webkit” and “moz” has a different way of implementing a gradient color. Not a lot of difference, but could be confusing for anyone on first few tries. Notice that there’s an additional “background” property declared on the first line? Well, this serves as a fall-back scenario.

In every piece of design, scripts and layout, we need to consider and ask ourselves this question “What if…?”. In this case, What if users browse your pages with an old browser that doesn’t recognize gradient property? Then, CSS shall take the value of the first line of the same property, as page rendering reads from the first line to the last. Therefore, whichever property’s value placed closest to the last line, shall replace the ones declared on top.

So, what’s with the multiple ID selector doing there? Well, I shall be covering on this in the next topic.

Grouping And Nesting Selectors

When it comes to grouping and nesting, it is about organizing a set of selectors that belong to a group or section like “headers”, “footers”, etc, specifically targeting a class or ID that exist within the declared parent selectors, or modifying a group of selectors in which you wish to apply same styles and positioning.

grouping and nesting selectors

As I mentioned before, page renders from the first line to the last. CSS does the same. Except that when it comes to the selectors, it is not from left to right. It is from right to left, which means descendent selectors to ancestor selectors. Whichever placed on the left is considered the outer most container.

Nesting Selectors

    The Code: 

  • #content #main .post { background: #222; }
  • #content #main .post p span { color: lightblue; }

It is generally a good practice to do this as it is easy to trace back to its parent element, without having to worry about over-ridding each other. Imagine this, you want lightblue for this first paragraph in “#content #main”, and red for the second paragraph in “#content #main .post”.

    The Code: 

  • #content #main p { color: lightblue; }
  • #content #main .post p { color: red; }

If you were to settle yourself with just the first set of style, you will see that whatever paragraph texts inside “#main”, will all rendered as lightblue. But if you include the second piece of styling, you will notice that whatever paragraph texts inside “.post” will turn red, but paragraphs oustide “.post” will still be blue.

Try doing this yourself, by copy pasting this set of code. You will see the differences:

    The Code: 

  • <div id=”content”>
  • <div id=”main”>
  • <p>test</p> <!– Paragraph inside ‘#main’ is lightblue –>
  • <div class=”post”><p>test</p></div> <!– Paragraph inside ‘.post’ is red –>
  • </div>
  • </div>

Grouping Selectors

    The Code: 

  • #content #main .post, #content #main .date { background: #222; }
  • #content #main .post a, #content #main .comment a { color: lightblue; }

Notice the comma between 2 sets of selectors? That is a grouping method. Why use grouping then? Here’s why:

    The Code: 

  • #content #main .post { background: #222; }
  • #content #main .date { background: #222; }

Aren’t they the same styling? By declaring it twice, CSS has to render extra lines. Imagine if you had a lot of styling to do for each elements, but are the same. Grouping is as simple as that. It helps you get organized without repeating yourself, reduce extra work for the browsers, smaller size of your file and maintaining of the stylesheet easier.

IE Conditional Stylesheet

Yeah, apparently Internet Explorer needs our unconditional love before it is willing to display whatever we want. A common practice is to include conditional commenting that only Internet Explorer would recognize.

For All IE Versions

    The Code: 

  • <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->

For IE Version 7 & Below

    The Code: 

  • <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie-7.css" />
    <![endif]-->

For IE Version 6 & Below

    The Code: 

  • <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-6.css" />
    <![endif]-->

For IE Version 8 & Above

    The Code: 

  • <!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-8.css" />
    <![endif]-->

As shown, these methods are called conditional commenting that should be located within “head” section of a HTML page. “lt” simply means “less than” and “gt” means “greater than”, but you don’t have to include all of them though. As more and more people use latest technology to present information online, users have to follow the lead and upgrade their browsers. And problem only arise when users used IE 7 and below, so targeting IE 7 and below should do just fine.

Resources

If you wish to step  into the depth of CSS, you may wish to take a look at these articles.

Smashing Magazinehttp://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

Tutorial Zine – http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/

Web Designer Wall – http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/

Gradient is confusing at times. And it is times like that, a simple tool is the hero. Here’s one of the many out there I would use for simple gradient effects.

CSS3 Gradient Generator – http://gradients.glrzad.com/

Having trouble picking colors to use on CSS? These tools could help.

Adobe’s Flash Kuler – kuler – Online Color Manager

Color Scheme Designer 3 – Color Scheme Designer 3

I hope you enjoy this simple tutorial I’ve compiled, and certainly hope you learn at least something from this tutorial. I would of course, appreciate if you would share this with others who are also interested by using the social icons located below. Thank You! Cheers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: