You are currently viewing Introduction to CSS

Introduction to CSS

This article explains CSS and other sub topics related to CSS like cascading order, CSS syntax and How to style HTML elements using internal style sheets and external style sheets and many more.

CSS stands for Cascading Style Sheets. We use CSS to describe the presentation of a document written in markup languages like HTML and XHTML.

CSS describes how HTML elements in your web site are to be presented on the web browser. It also allows us to control styling of the entire web site using a single external CSS file which is really easy to maintain.

CSS Syntax

Selector {
          Property: value;
}

There are two parts to be considered. They are Selector and Declaration Block.

As an example we are going to analyze the following.

p   { font-family: arial; font-size:20px; }

Selector – p

Declaration Block – { font-family: arial; font-size:20px; }

Declaration – font-size:20px;

Property – font-size

Value – 20px

Selector – Selector is the HTML element that we want to style. We can refer the HTML element by its element name, class, id or attributes.

Declaration Block – Declaration block consists of one or more declarations.

Declaration – Declaration includes CSS Property name and the Value.

The methods of using CSS to styles your web site

External style sheets

This method allows us to control the styling of an entire web site by using a single external style sheet. All we have to do is link external style sheet by adding following piece of code inside the <head> tag.

<head>
      <link rel="stylesheet" type="text/css" href="/css/main.css">
</head>

Note that we should link every web page to the external CSS file by using <link> tag inside the<head> tag.

Internal style sheet

CSS styling can also be done inside the HTML page that you want to style. To do this we have to include <style> tag inside the <head> tag and keep our styling inside the <style> tag

<head>
  <title>test
  </title>
     <style>
          p   {
              font-family: arial;
              font-size:50px;
            }
       </style>
</head>

Inline style

This method allows us to style html elements by using style attribute in the html tag

Style attribute may consist of several CSS properties and this method is more important when we need to add a unique style for a single HTML element 

<p style="font-family: arial;font-size:50px;"> Test paragraph </p>

Cascading order

Cascading order defines how HTML elements should be displayed when using more than one specified styles under various styling methods.

CSS will give highest priority to the last method in the cascading order when styling HTML element

Cascading order as follows

  • Priority 4 – Browser default
  • Priority 3 – External style sheet
  • Priority 2 – Internal style sheet
  • Priority 1 – Inline style

CSS Selectors

Class Selector

The developer defines the name of the class. Using class selector we can define various styles for same types of HTML elements. The Class selector selects elements with a specific class attribute.

<!DOCTYPE html>
<head>
  <title>test
  </title>
  <style>
   .testclass {
      background-color:#a9effc ;
      padding: 10px;
      width:200px;
   }
  </style> 
</head>
 <body>
   <div class="testclass">
       <p>Test paragraph</p>
   </div>
</body>
</html>

ID Selector 

Here we can give a specified ID inside the HTML tag to refer html elements to style. The name of the ID can be given by the developer and should be a unique name for that particular document.

<!DOCTYPE html>
<head>
  <title>test
  </title>
  <style>
   #testid {
      background-color:#a9effc ;
      padding: 10px;
      width:200px;
   }
  </style>
</head>
 
<body>
   <div id="testid">
       <p>Test paragraph</p>
   </div>
</body> 
</html>

Element Type Selector

Element type selector is used to select all the same type of HTML elements

<!DOCTYPE html>
<head>
  <title>test
  </title>
  <style>
   p {
      background-color:#a9effc ;
      padding: 10px;
      width:200px;
   }
  </style>
</head>
 
<body>
   <div>
       <p>Test paragraph</p>
   </div>
</body>
</html>

*selector

*selector is used to select all the html elements in a web page

<!DOCTYPE html>
<head>
  <title>test
  </title> 
  <style>
   *{
      background-color:#a9effc ;
    }
  </style> 
</head>
 
<body>
   <div>
       <p>Test paragraph</p>
   </div>
</body>
</html>

Leave a Reply