SMA

Technology Blog

Introduction to Web Design – CSS and CSS3

Introduction to Web Design – CSS and CSS3

Introduction to CSS

We use HTML to describe contents of our web pages and not to format this content, to overcome this limitation W3C designed a new language known as CSS (Cascading stylesheet).

Understanding CSS Syntax

CSS is composed of rulesets, to understand CSS ruleset let’s first see an example.

p {
    color: blue;
}

Let’s understand the parts of css syntax one by one.

Selector

Selector in css is used to refer html element, in above example p is the selector which will point to all paragraph or p elements in html document.

Declaration

Declaration is the body of css block, in above example { color: blue; } is the declaration. CSS declaration is composed of one or more pairs of property and value. In above example color is the property with an assigned value of blue. Each pair of property and value in CSS declaration is separated or closed with a semicolon ;.

Understanding CSS Selectors

As described above, CSS Selectors are used to refer or select html elements and this selection can be made using different approached, in following section we will explore different methods to use CSS selectors.

Element Selector

Element selectors are based on HTML element name.

Examples

Following CSS snippet defines an element selector for all h1 elements.

h1 {
 color: red;
}

Following CSS snippet defines an element selector for all div elements.

div {
 color: red;
}

Following CSS snippet defines an element selector for all p elements.

p {
 color: red;
}

Id Selector

Id selectors are used to select HTML elements with a specific id attribute.

Examples

Following CSS snippet defines an id selector to select all HTML elements having value my1 for id attribute.

#my1 {
 color: red;
}

This css block / style will be applied to elements like.

<p id="my1"> Para 1 </p>

Class Selector

Class selector is used to select elements with a specific class attribute.

Examples

Following CSS snippet defines an id selector to select all HTML elements having value red for class attribute.

.red {
 color: red;
}

This css block / style will be applied to elements like.

<p class="red"> Para 1 </p>

You can also apply multiple CSS class style blocks on a single element.

.big {
    font-size: 24pt;
}

Both style blocks red and big will be applied to p element used in following code snippet.

<p class="red big"> Para 1 </p>

Using CSS

You can use css styles using following three methods.

Inline style

Inline style can be applied directly to an html element using style attribute.

<p style="color:red;">Hello World</p>

Internal style

Inline styles are enclosed in <style> ... </style> block within an html document. You can add <style> ... </style> block anywhere in html document, however usually it is defined in <head> ... </head> block.

<!DOCTYPE html>

<html>
    <head>
        <style>
            p {
                color: green;
            }        
        </style>
    </head>
    <body>
        <p>Hello how are you</p>
    </body>
</html>

or

<!DOCTYPE html>

<html>
    <head>
        <style>
            p {
                color: green;
            }        
        </style>
    </head>
    <body>
        <p>Hello how are you</p>

        <style>
            .mystyle {
                color: red;
                font-size: 22pt;
            }        
        </style>

        <p class="mystyle" > This is with my style </p>

    </body>
</html>

External style

Instead of writing the CSS style directly in html file, you can define you css stylesin a seprate text file and then include this css file in your html as an external style.

style.css

.mystyle {
    color: red;
    font-size: 22pt;
}        

.greeny {
    color: green;
}

index.html

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p class="greeny">Hello how are you</p>

        <p class="mystyle" > This is with my style </p>

    </body>
</html>

CSS Cascading Order

CSS styles are cascaded in following order, having one the highest and 3 with lowest priority.

  1. Inline style.
  2. Internal and external style.
  3. Default style of Web Browser.

That’s it, hope you enjoyed it. You like this article, have any questions or suggestions please let us know in the comments section.

Thanks and Happy Learning!

This article is part of Web Design and Development series.

Prev post Learning Web Design and Development series
Next post Learn web design and development | Introduction to HTML / HTML5

Shoket Mahmood Ahmed

Related Posts

60 thoughts on “Introduction to Web Design – CSS and CSS3”

  29. naturally like your web site however you need to test the spelling on several of your posts. A number of them are rife with spelling issues and I find it very bothersome to inform the truth however I will definitely come again again. Brenn Crosby Yasmin

  30. Thank you for some other fantastic post. Where else could anyone get that type of information in such a perfect manner of writing? I have a presentation subsequent week, and I am at the look for such info. Anthiathia Leonidas Magree

  36. I together with my guys were found to be viewing the good information and facts on your web page then unexpectedly came up with an awful suspicion I never expressed respect to the site owner for those strategies. All the guys are actually for this reason stimulated to learn them and now have without a doubt been enjoying these things. Many thanks for genuinely quite accommodating and also for deciding on this form of remarkable topics millions of individuals are really desperate to learn about. Our own honest apologies for not expressing appreciation to you sooner. Aurlie Griz Demetra

  37. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Bev Burl Aphra

  38. I blog frequently and I seriously appreciate your content. This great article has truly peaked my interest. I will take a note of your website and keep checking for new information about once a week. I opted in for your RSS feed too. Julie Irving Pahl

  39. After I originally left a comment I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on each time a comment is added I get four emails with the exact same comment. Is there a means you are able to remove me from that service? Many thanks. Gabbey Guglielmo Pond

  42. Can I simply say what a relief to uncover somebody who actually understands what they are talking about online. You definitely realize how to bring a problem to light and make it important. More and more people really need to read this and understand this side of the story. I was surprised you are not more popular since you most certainly have the gift. Kai Waite Dyke

  45. Great Article, being an outdoor enthusiast I have found that the best equipment is often something custom made to survive and thrive in rough situations and the competitive world. From my collection of Gibson Les Pauls, my pro Nikon camera to my custom precision rifles, the best tools are in my bag!! Add to that New Breed bows used in field archery and the 3D circuit are my personal selection to give me the competitive edge. Their attention to detail and customer service are definitely Pro Class!! Casandra Shayne Fennelly

Leave a Reply

Back to top