ddsingh@infomatics.info +91 9760014754

Need of css

In the early days the text was formatted using plain HTML tags

But Designer realized that they needed more power to format their pages, so CSS was created to address some of HTML’s styling Shortcomings(Limitation).

In html tags we have a limited set of options to style our page, another problem with it that it is harder to reuse or change the design later.

Problems with HTML

Data and presentation are mixed within the same file

The required formatting tags and attributes make our pages larger and thus slower to load and display the webpage

Fortunately, css allows us to overcome all of these problems. 

Introduction And What is CSS

  • CSS stands for Cascading Style Sheets and is a specification by W3C.
  •  CSS is a simple design language used to describing the look and formatting of a structured document written in a markup language like HTML and XHTML webpages. It can also be used in XML
  •  CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.
  • CSS provides powerful control over the presentation of an HTML document.
  • Most commonly, CSS is combined with the markup languages HTML or XHTML and it defines how to display HTML elements.
  • Styles were added to HTML 4.0 to solve a set of problems

 

    What is CSS:-

  • CSS is a cascading style sheet which is used to add
  • styles to web pages.
  • CSS is a Web Language which is used for adding formatting to web pages and applications.
  • CSS was developed by W3C(World Wide Web Consortium)

Intro of css

What is the role of CSS:-

  • CSS defines how to display HTML Elements
  • CSS is widely known by the most of the browsers now a days.
  • css files defines that how we want to display a web pages.
  • css is case sensitive language.

Advantage of CSS

  • CSS saves design time as it can be reused in many HTML Pages.
  •  Number of Tags used are less because we don’t have to use tags like <strong>, <font>
  •  Pages load faster because same styles can be applied to multiple tags.
  •  Site-wide consistency and Very Easy maintenance because changing at one place will automatically reflect at multiple places.
  •  Multiple Device Compatibility.
  •  Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS.
  •  CSS can be used to make responsive webpages which are compatible on multiple devices. It can be used to allow the web page to display differently depending on the screen size or device on which it is being viewed

 CSS Versions History

  • CSS, level 1 (CSS1) has been published by W3C as a recommendation in December 1996.
  • Features Supported:-
  • Font properties such as typeface and emphasis
  • Color of text, backgrounds, and other elements
  • Text attributes such as spacing between words,  letters, and lines of text
  • lignment of text, images, tables and other elements
  • Margin, border, padding, and positioning for most elements
  •  Unique identification and generic classification of groups of attributes
  •  The CSS 1 specification was completed in 1996. Microsoft's Internet Explorer 3 was released in that year, featuring some limited support for CSS. But it was more than three years before any web browser achieved near-full implementation of the specification. Internet Explorer 5.0 for the Macintosh, shipped in March 2000, was the first browser to have full (better than 99 percent) CSS 1 support.
  • CSS 2 has become a W3C recommendation in May 1998 and builds on CSS1.
  • CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.
  • CSS 2.1 - CSS level 2 revision 1
  • Fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already-implemented browser extensions to the specification.
  •  Between 2005 and 2010, multiple times it went back and forth between Working Draft and Candidate Recommendation.
  •  12th April 2011 - Proposed Recommendation was released by W3C.
  •  7th June 2011 – Finally published as Recommendation by W3C.

CSS Syntax:-

 

    Element Selector

      {

         PropertyName:Property Value;

         PropertyName:Property Value;

         PropertyName:Property Value;

      }

 

Intro of css

  • A CSS file contains designing rules that are Understood(interpreted) by the browser and then applied to the corresponding elements in your document.
  • A Design Rule(style rule) is made of three parts:

               1) Selector: A selector is an HTML tag at which style will be applied. This could be any tag like

                           <h1> or <table> etc.

               2) Property: A property is a type of attribute of HTML tag. all the HTML attributes are converted into CSS properties. They could be color or border etc.

               3)Value: Values are assigned to properties. For example color property can have value either “red” or #FF0000 etc.

css explanation

InsertionTypes Of CSS/Where to Write CSS:-

We can write css in a separate file and link it to our html file or embed css in html file itself.

 

There are three ways of inserting a style sheet

 

1)External style sheet

2)Internal style sheet

3)Inline style

1) External Css:-External css is applied to all web pages.It means it is common to all pages.

To link CSS file with HTML page we have to write this code in the <head> section of HTML page.

<head>

<title>……..</title>

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

</head>

prg1.html

<html>
<head>
<title>External CSS Demo</title>
<link rel="stylesheet" 
type="text/css" href="MyStyle.css" />
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>
This paragraph has a left margin of 50 pixels
and it comes in red color
</p> 

</body>
</html>

 

Mystyle.css

body
{
	background-color:yellow;
}
h1
{
	font-size:36pt;
	color:green;
}
h2
{
	color:blue;
}
p
{
	margin-left:50px;
	color:red;
}

2)Internal Style Sheet

It is available for Current page

You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>

<style type="text/css">

H1

{

   color:green;

}

</style>

</head>

CSSdemo.html

<html>
 <head>
  <title>Internal CSS Demo</title>
<style type="text/css" rel="stylesheet">
p 
{
color: blue;
}
h1
{
color:red;
text-align:center;
font-weight:bold;
}
</style>
 </head>

  <body>
      <h1>HTML</h1>
    <p>It is easy to use HTML</p>

  </body>
</html>

3)Inline CSS

Inline CSS is  tag specific.It means it is always used within Tag

 

Ex:-

<p style="color:yellow">This is a paragraph.</p>

<p style="color:red;font-family:Arial">This is a Demo</p>

Inline_css.html

<html>
<head>
     <title>Inline CSS Demo</title>
</head>
<body>
<h1 style="text-align:center;
font-weight:bold;color:blue;">HTML
</h1>
</body>
</html>


Next