Web Designing

The best part about Web Dev! ;)


Content Styling Sheets

What is CSS?

  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • Amazing layouts, consistency and appealing sites 

What happened in HTML 4.0?

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

Differences of pages with CSS and without it!

Let's get to the code

A CSS rule set consists of a selector and a declaration block:

For example,

p {
    color: red;
    text-align: center;

What does the P mean?

  • This is called an Element Selector
  • Style applies to all the <p> elements

The id selector

What if you want just one paragraph to follow a particular style?

#para1 {
    text-align: center;
    color: red;

The class selector

.center {
    text-align: center;
    color: red;

A HTML class is basically a grouping technique so that similar type and group of elements can be given the same style.

The CSS box model

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

And the code goes here,

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;

Total element width = width + left padding + right padding + left border + right border + left margin + right margin


Let's add a Navbar

Step 1: Add the list items

<ul id="nav">
        <li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Login</a></li>

Step 2: Make it horizontal

#nav {

Style the list:

Style the list items: 

ul#nav li {

Step 3: Styling the hyperlinks inside the list items

ul#nav li a {
 padding:5px 0;

Step 4: Finishing touches

//Adds seperators
ul#list-nav li a {
  border-left:1px solid #fff;

//Changes color on hover
ul#list-nav li a:hover {

And you're done!

The CSS color palette

External Style Sheet

<link rel="stylesheet" type="text/css" href="mystyle.css">

That's all for now! :) 

Get in touch:

Just the beginning.

Much more to learn, much more fun.


By Abhiram Ravikumar


  • 1,142
Loading comments...

More from Abhiram Ravikumar