Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Types of CSS (Cascading Style Sheets )

Hi Guys,

In this tutorial, I am going to tell you about  cascading Style sheets (CSS) which is very common on the World Wide Web. We will briefly go over the types and uses of CSS in our web pages with appropriate examples.

What Is CSS?

Most of the web pages are made of HTML ( hypertext markup language) It is the standard way to decorate plain web pages with text, fonts, colors, images, and hyperlinks. CSS is the only way to decorate the website easily

CSS is a kind of computer dress code. CSS mainly does just one thing: it describes how web pages should look. Even better, CSS can be easily separated from HTML, so that the dress code is easy to find, easy to modify, and can rapidly change the entire look of your web site.

Three Types of CSS

CSS comes in three types:

  • External ( In a separate file )
  • Internal  ( At the head section of a web page )
  • Inline  ( Inside the tag which you want to decorate )

External :  Style sheets are separate files full of CSS code instructions (with the file extension .css). When any web page includes an External stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using inline CSS ). This is how you change a whole website at once

Internal : Styles are placed at the head section of each web page, before any of the content is listed. This is the next best thing to external, because they’re easy to find, yet allow you to ‘override’ an external style sheet.

Inline : Styles are placed inside the tag which you want to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element.

CSS Instructions

Before we introduce CSS, let’s briefly review HTML. A simple web page is made of tags. Everything must go between the opening and closing tags. The

section contains invisible directions called meta information. The section is where we put all the visible stuff. Here’s a super simple HTML example:

Basic html tag | Allinonetuts

External CSS :
Now here is a short, simple example of CSS using an external file (we’ll call it ‘style.css’). We’re going to call our web page to be white and to make our h1 heading, noted in our simple HTML example as ‘Hi All In One Tuts’, appear in red color and font size of 24 px:

external css | Allinonetuts

Now, to include this external CSS file (‘stylish.css’), we have to include a link for it within the section of our blank web page, as shown on screen:In the sample file, the top line is a comment and doesn’t do anything. The next part (called body) tells the web page what background color to use for the body section. Right after that, the h1 part says we want our largest heading (h1) to be the color red and its font size to be 24 units high.

link external css | Allinonetuts

Internal CSS :
We don’t need to include an external CSS file just to decorate one web page. We can just define our styles at the top of the page, in the section. Here’s a quick example in which we’re making our heading (h1) red at a font size of 24 px:

internal css | Allinonetuts

Inline CSS :
We can just define our styles inside the tag which you wish to decorate.Here’s a quick example in which we’re making our heading (h1) red at a font size of 24 px:

inline css | Allinonetuts

The post Types of CSS (Cascading Style Sheets ) appeared first on All In One Tuts.

This post first appeared on All In One Tuts | Tech Tutorials And Videos | Tech, please read the originial post: here

Share the post

Types of CSS (Cascading Style Sheets )


Subscribe to All In One Tuts | Tech Tutorials And Videos | Tech

Get updates delivered right to your inbox!

Thank you for your subscription