Introduction - CSS3 #1.1

After you get acquainted with HTML, you should learn about CSS to learn to style your webpage. The goal of the HTML is to specify the content of your webpage while the goal of CSS is to style your web page.

CSS stands for Cascading Style Sheets. The full form gives an idea about it. A CSS file is a style sheet that specifies the style used by different elements. Some examples of properties of the elements that can be changed are margin, padding, color, font, and background-image.

A look at some sample CSS code:

See the Pen CSS_Series_1.1 (External CSS) by Harsh Agrawal (@itsharshag) on CodePen.

The word cascading has been used to tell that an HTML element may have multiple styles applied to it but the final style will be the style that is the most recent or the one that has the highest priority.

CSS can be applied/added to an HTML page by the following three ways (descending order of priority):

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS

When you specify CSS code for an element using the style attribute then you are using Inline CSS. The first paragraph is using inline CSS to specify its color.

See the Pen CSS_Series_1.1 (Inline CSS) by Harsh Agrawal (@itsharshag) on CodePen.

2. Internal CSS

A style element is defined inside the head element. You can write the required CSS code there to specify the style of your elements. The second paragraph's color has been changed using it.

See the Pen CSS_Series_1.1 (Internal CSS) by Harsh Agrawal (@itsharshag) on CodePen.

 


 

3. External CSS

When you create a separate .css file and include it on your webpage then you are using External CSS.

The advantage of doing this is that you can apply that same CSS code to any webpage by just specifying the CSS file to be included using the link element.

See the Pen CSS_Series_1.1 (External CSS) by Harsh Agrawal (@itsharshag) on CodePen.