Introduction of CSS

Updated on     Kisan Patel

CSS (Cascading Style Sheet) is a style sheet language that allows us to attach styles (e.g., fonts, spacing, and colors etc.) to structured documents. By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance.

CSS works on the HTML element of the page when the element has completely loaded in the browser.

A CSS Style can be applied on the page in 3 ways.

  1. Inline style sheet
  2. Document level style sheet
  3. External level style sheet

CSS has mainly two parts

  • Selectors – used to select an element to apply style
  • Styles – the style that need to be applied on the elements

A single CSS style must end with “;” (semi-colon) character. The property and its value should be written separated by : (colon).

style-specific-format

You can specify Inline CSS Style using style attribute. For example,

<p style=”font-size: 30px ; font-family: Arial” >

You can specify Document level CSS style by writing style blocks in the content page. Remember that css style properties are written inside open and close curly braces.

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>CSS Demo</title>
   <style type="text/css">
    h1 {
     font-family: Arial;
     color: green
    }
    p {
     font-family: verdana;
     font-size: 14pt
    }
   </style>
 </head>
 <body>
   <h1>
      <center>
           This page is created using Document Level Style Sheet
      </center>
   </h1>
   <p>
       The embedded style sheet is the most commonly used style sheet.
       This paragraph is written in Verdana font size of 14.
   </p>
 <body>
</html>

You can specify external styleby creating a separate CSS file and linking it to the content page using link HTML tag.

<head>
  <title>Title</title>
  <link href="../styles/site.css" type="text/css" rel="Stylesheet" />
</head>

 


CSS

Leave a Reply