Lesson 2: Style it using CSS - Kodhus

Lesson 2: Style it using CSS

Introduction

In this lesson we will dive into styling the html page we built in the last chapter. Please check that out if you haven’t.

Link to the html page we made last chapter: Chapter one sample

CSS which stands for Cascading Style Sheets, is there to make your webpage a great looking one.

Think of it this way: Html is like making the prototype of a car including how it is shaped and the structure of it and css is there to color it and position things more nicely in it and generally making it look nice!

CSS AND HTML

We change the look and feel of an html page using CSS rules. We have 2 types of CSS definitions, Properties and Selectors.

  • Selector is there to select the html elements that we want to apply the properties to, for example I want to change the color or width or height of all of my paragraphs or all of my H1 tags in my page.
  • Property is something like color or width or height, etc which affect how that element that we selected should look like. e.g width 50% of it’s parent.

Let’s start making the html page we developed in the last chapter and make it nicer.

If you haven’t seen the html page here is the link: Chapter one code

Now Let’s add some styling to our first chapter code using css.

Selectors using html tag

body {
  margin: 0;
}
header {
  background: tomato;
  height: 30px;
  padding: 20px;
}
main {
  padding: 20px;
}
footer {
  padding: 10px;
  background: #333;
  color: #fff;
  font-size: 12px;
}

So here is the updated code of our course with css rules: Second chapter code

As you can see we have following selectors in our css. body, header, main and footer.
We basically used the html tag names and then added the properties we want to change in between paranthesis.

So to summarize:

selector {
    property-name: property-value;
}

For the comprehensive list of css properties and their permitted values click here: www3schools css references

Selector using class attribute

There are other ways of selecting html elements, not just by using their tag name. In order to do that we need to add something called class attribute to our html tag. The syntax is as follow:

<html-tag attribute="value"></html-tag>

For example:

<p class="main-text">During this course, I want to build this website and learn the basics of web development! How cool can it be!</p>

As you can see in the example we assigned “my-text” to the class attribute of the p tag. Now we can use my-text in our css as the selector to style our p.

.main-text {
    font-size: 12px;
    color: #666;
}

Note the . before my-text. It basically says that my-text is the class that is assigned to our p element.

Selector using id attribute

Another way is to use id attribute. let’s take a look at an example:

<h1 id="main-head-title">Welcome to my website</h1>

and following is the css rule:

#main-head-title {
    font-weight: normal;
}

Checkout the new updated code sample for this chapter. You can see that our html page has already become much nicer than in first chapter.

You can see we used # instead of . and that is because we are selecting our html element using it’s id attribute.

Read more about html attributes here: HTML attribute

Alright! That’s about this chapter. Please go ahead and experiment with different css properties and see how they look.

In the next tutorial, we will work on our html and css knowledge a bit more and try to make a much nicer page. So, stay tuned!




Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *