Domesticated Brain

Introduction to CSS

In this article about CSS we are going to find out what is CSS and other sub topics related to CSS like cascading order, CSS syntax, Grouping and How to style HTML elements using internal style sheet and external style sheet and many more.

What is CSS stands for?  Cascading Style Sheets

CSS is used to describe the presentation of the 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 and makes your web site loved by everyone. Also it allows us to control styling of the entire web site or a web application using one single external css file which is really easy to maintain.

 

CSS Syntax

Selector {

          Property: value;

}

 

There are two parts to be considered. That is: 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 simply is the HTML element that we want to style. We can reference HTML element that we want to apply styles by its element name, class, id or attributes.

Declaration Block

Inside the declaration block can consist 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

Using External style sheet method we can control styling of an entire web site by one 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

We can style a html element by using style attribute in the html tag that we need to apply styles for

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 thorough various styling methods.

CSS maintains few rules to priorities the styling order

Cascading order as follows

  • Browser default
  • External style sheet
  • Internal style sheet
  • Inline style

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

 

CSS Selectors

 

Class Selector

The name of the class also defines by the developer. Using class selector we can define various styles for same types of HTML element. Class selector selects all the html elements with selected class attributes to style.

<!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 

In css we can give a specified ID inside the HTML tag to reference a html element 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>

 

If you have found  what you expected please comment and like on our facebook page