Basic Knowledge about Cascading Style Sheets

Hi, In this tutorial we will discuss about the basic information of CSS. This tutorial is entirely theoretic. So, you may feeling some boring, but wish you will get some useful information about CSS.

What is CSS?

CSS (short for Cascading Style Sheet), enables web designer to get the creative control over the layout & design of your web pages. You should in mind that a style is simply a rule describing how to format a particular portion of a web page and a style sheet is a set of these styles.

CSS works with HTML, but it’s not HTML. It’s a different language altogether. While HTML(Short for Hyper Text Markup Language) provides structure to a document by organizing information into headers, paragraphs, bulleted lists, and so on, CSS works hand-in-hand with the web browser to make HTML look good. CSS is all about changing and improving the appearance of the HTML.

 

Types of CSS?

A style can be one of the two types: internal or external, depending on whether the style information is located in the web page itself or in a separate file linked to the web page. One can override both the internal CSS and external CSS using style in inline. In this case you can add a new type of CSS  with previous two types.

  • Internal Style Sheets:  Internal Styles always appears between opening and closing HTML <style> tags in a web page. for example-

<style type=”text/css”>

h1 {

color: #121212;

font-size: 1.8em;

}

p {

color: black;

font-family: Arial;

}

</style>

 

It is good practice to add/write CSS in the HTML <head> tag (after HTML <title> tag and before adding java scrips). Because many JavaScripts programs rely on CSS, so by adding your CSS first, you can make sure the JavaScript program has all the information it needs to get its job done.

  • External Style Sheets:  An external style is nothing more than a text file containing all your CSS rules and the file saved as CSS format(.css file). It never contains any HTML-so don’t include the HTML <style> tag. The most common method of adding an external style sheets to a web page is to use the HTML <link> tag. For example here’s HTML:

<link rel=”stylesheet” type=”text/css” href=”folder_location/style.css”>

Here’s example for XHTML:

<link rel=”stylesheet” type=”text/css” href=”folder_location/style.css” />

 

CSS includes a built-in way to add external style sheets. The @import directive will allow you add a CSS file in within any CSS file. You need to write the @import directive within the HTML <style> tag in ant web page. for example –

<style type=”text/css”>

@import url(folder_location/template.css);

</style>

 

  • Inline Style:  When you type a CSS rule directly into the HTML tag, you’re creating an inline style. for example:

<h1 style=”font-size:2em;  color:#999999;”>Style attribute contain inline style</h1>

 

Author Info