CSS(Cascading Style Sheet) was first developed in 1997, as some way for internet developers to outline the design and feel of their websites.CSS is a style language that defines layout of hypertext mark-up language documents. As an example CSS covers font’s family, size, colors, margins, line-height, height, width, background pictures, advanced positions and plenty of alternative things. CSS is one among the foremost powerful tools an internet designer will learn as a result of with it you’ll have an effect on the complete mood and tone of an internet website. CSS is supported by all browsers nowadays.

CSS Syntax

A CSS rule set consists of a selector and a declaration block, A property and value combine is termed a declaration, and any CSS engine calculates that declarations apply to each single element of a page so as to befittingly lay it out, and to style it.Both properties and values are case-sensitive in CSS.

Declarations are classified in blocks, that’s in an exceedingly structure delimited by an opening with left curly brackets brace, and a closing with right curly brackets brace. Blocks generally may be nested, thus opening and shutting (closing) braces should be matched. A declaration block is also empty, that’s containing null declaration. White areas around declarations area unit unnoticed. The last declaration of a block does not have to be compelled to be terminated by a semi-colon. The declaration block contains one or a lot of declarations separated by semicolons.

We insert the stylesheet with three ways:

a) Inline Style
b) Internal stylesheet
c) External stylesheet

A) Inline style: Inline styles are simple and fast to add. Inline styling is helpful for applying a novel style to one markup language part. Because of the cascade, inline Style have the best precedence. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves. The style is include inside the HTML element using style attribute.

// Font Color
<h1 style="color: green">This is a Blue Heading</h1> 

B) Internal stylesheet(Embedding Css into html): Internal styles are defined within the <style> element, inside the head section of an HTML page.

  <style media="screen" type="text/css" >
   body {background-color:lightgrey}
   h1 {color:blue}
   p {color:green}

C) External style sheet: If we applied the same styles on the multiple pages, than external stylesheet is a better option.

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

Leave a Comment.