Why CSS ?

Cascading style sheet

If you do not know how to create an html page please go HERE and learn it out first, which out html, CSS has nothing to do.

On earlier html versions pure attributes were decorating any html element. The CSS2 was good and did a lot of job, decorating the html element and made a web page light weight. Now CSS3 is doing an awesome work with LESS and SASS.

Let’s learn LESS and SASS later, lets see what CSS does first and how.

How css works

Css can be defined in three methods :

  1. inline
  2. internal
  3. external

INLINE :

<p style=”color: red”>Hello World</p>

Here style is the inline attribute used to define css styling in the “P” element itself. “Color” is a css property to which the valuered” is assigned. Now the “Hello World” will be in red colour. There are a lot of css property that you will need to master, you can find good tutorial links at the end of this blog for references.

INTERNAL :

The following code when defined within the head tag is said as internal styling.

<style>
p {
color: yellow;
}
</style>

Remember to use the style tag.

EXTERNAL :

Save the following code in a style.css file and include this in your head with a link tag. Remember you will not be using style tag here.

p {
color : blue;
}
use this link tag within your head tag : 
<link rel="stylesheet" href="path-to-filename/style.css">

Assume I have done all the three methods in html file and you can see I have given different colours for the same “p” tag.

Now my question what color will the “Hello World” be ?

Answer is : red

Why ? Because styling has a hierarchy priority built from inline to internal then to external.

Meaning : the external style overwritten by internal and that is again over written by inline styling.

View the changes

Open your html file in any browser and it should show you the output.

Tutorials Guides

Learn most of the css property at

w3schools

csstricks

Conclusion :

  • You have learnt how to work with CSS.
  • You got some splendid guide on the tutorials to follow.

Follow more of my blog posts, and become a perfect web developer.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Published by

abilash arjunan

Web Architect