CSS (Cascading Style Sheets)

0

Cascading Style Sheets (CSS)




Cascading Style Sheets most commonly known as CSS, forms one of the most interesting concepts of HTML as it specifies the rules for organizing elements of a given web document. It not only extends its features in controlling colors and sizes of fonts, but also controls spaces between various elements, the color and width of a given line etc CSS is used to decorate HTML Page.

Types of Cascading Style Sheets

  • Inline Style Sheets
  • Internal or Embedded Style Sheets
  • External Style Sheets

Inline Style Sheets : In this type of style sheet, the configuration of current web document (with respect to CSS) is declared in the body region of the HTML code and the rules are applied to only on those elements of selection where the given configuration has been declared. Moreover, here the configuration is rendered with the help of “STYLE” keyword as an attribute of the selector.

Example : <p style=”color:red”>I am in red color</p>

  • p is SELECTOR (Definition of Selector : Selector points to element to which you want to apply styles)
  • <p> is paragraph tag (Want to know more about HTML Tags Click here)
  • style=”color:red” is DECLARATION (Every declaration consists of Property and Value. A declaration can have multiple properties and declaration each of them must be separated with semi colon)
  • color is PROPERTY
  • red is value.
  • Scope of Inline Style Sheet will be between start tag and end tag.

Internal Style Sheets : In this type of style sheet, the properties depending upon our requirement are declared in the <HEAD> region of the HTML code along with their selectors.In the next instance, the elements (which are required to be affected by the CSS properties specified in <head> region) are declared in <body> region of the code accordingly.

Example : Using Element Selector

<html>

<head>

<title> Internal Style Sheets </title>

<style type=”text/css”>

h1 color: red; text-align: center; }

</style>

</head>

<body>

<h1> I am in center of the screen and I have RED color</h1>

</body>

</html>

Snippet for id, class, group selectors :

<style>

#p1 { text-align: center; color: red; } /* ID selector. Always begin with # followed by character not number */

.tloger { color : yellow; } /* Class Selector. It is always preceded with . (dot) and It must begin with character */

h1, h2, h3, p { color : blue; } /* Group Selector, commonly used to reduce the length of the code */ 

</style>


<body>

<p id=”p1″>Love</p>

<p class=”tloger”>TLOGER</p>  <!– Output will be in YELLOW COLOR –>

<h1>Sanjeev</h1> <!– Output in Blue Color –>

</body>

 To practice above snippets. Click here.


External Style Sheets : Unlike Inline and Internal Style Sheets, external style sheets allows a designer to use the same design pattern multiple webpages. This is possible with by dumping all the design rules under a file and save that file with extension ” .css “. This file can be accessed in any webpage using <link> tag.

Example




tloger.css

 

p { font-size: 15pt; color: blue; }


tloger.html

<html>

<head>

<title> External Style Sheets </title>

<head>

<link rel=“stylesheet” type=“text/css” href=“tloger.css”>

</head>

<body>

<p> External CSS</p>

</body>

</html>

In-depth explanation of CSS can be found at Wikipedia.

Share.

Leave A Reply