Types of CSS
P.Abinaya
Msc(cs)
 Stands for "Cascading Style Sheet." Cascading style
sheets are used to format the layout of Web pages.
They can be used to define text styles, table sizes,
and other aspects of Web pages that previously
could only be defined in a page's HTML.
 CSS helps Web developers create a uniform look
across several pages of a Web site.
Inline css
Internal css
External css
 inline styles is not as powerful as embedded style
sheets, imported style sheets, or linking to an
external style sheet. To specify style information
for more than one element, you should embed a
style sheet in the header of the HTML document.
 Syntax: <p style="color: #ff9900">This text has
been styled using inline style sheets.</p>
 The internal style sheet is used to add a unique style
for a single document. It is defined in <head> section
of the HTML page inside the <style> tag.
 <head> <title>Internal css</title> <style> selector{
Property:value; } </style> </title> </head>
 But in the Internal CSS, we can not control styles for
multiple documents at once.
Internal style Sheet is applicable to the Page in which
it is included.
Internal Style Sheet is used to style individual page.
 An external style sheet is a separate file where you
can declare all the styles that you want to use on
your website. You then link to the external style
sheet from all your HTML pages.
 This means you only need to set the styles for each
element once. If you want to update the style of
your website, you only need to do it in one place.
 The position CSS property sets how an element is
positioned in a document. The top , right ,
bottom , and left properties determine the final
location of positiA positioned element is an
element whose computed position value is either
relative, absolute, fixed, or sticky. (In other words,
it's anything except static.)oned elements.
Fixed
Static
Relative
Absolute
Sticky
 The element is removed from the normal document
flow, and no space is created for the element in the
page layout. It is positioned relative to the initial
containing block established by the viewport, except
when one of its ancestors has a transform, perspective,
or filter property set to something other than none
(see the CSS Transforms Spec), in which case that
ancestor behaves as the containing block.
 The element is positioned according to the normal
flow of the document. The top, right, bottom, left, and
z-index properties have no effect. This is the default
value.
 The element is positioned according to the normal
flow of the document, and then offset relative to itself
based on the values of top, right, bottom, and left. The
offset does not affect the position of any other
elements;
 thus, the space given for the element in the page
layout is the same as if position were static. This value
creates a new stacking context when the value of z-
index is not auto. Its effect on table-*-group, table-row,
table-column, table-cell, and table-caption elements is
undefined.
 The element is removed from the normal document
flow, and no space is created for the element in the
page layout. It is positioned relative to its closest
positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final
position is determined by the values of top, right,
bottom, and left.
 This value creates a new stacking context when the
value of z-index is not auto. The margins of absolutely
positioned boxes do not collapse with other margins.
 The element is positioned according to the normal
flow of the document, and then offset relative to
its nearest scrolling ancestor and containing block
(nearest block-level ancestor), including table-
related elements, based on the values of top, right,
bottom, and left. The offset does not affect the
position of any other elements.
WEB PROGRAMMING ANALYSIS

WEB PROGRAMMING ANALYSIS

  • 1.
  • 2.
     Stands for"Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML.  CSS helps Web developers create a uniform look across several pages of a Web site.
  • 3.
  • 4.
     inline stylesis not as powerful as embedded style sheets, imported style sheets, or linking to an external style sheet. To specify style information for more than one element, you should embed a style sheet in the header of the HTML document.  Syntax: <p style="color: #ff9900">This text has been styled using inline style sheets.</p>
  • 5.
     The internalstyle sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.  <head> <title>Internal css</title> <style> selector{ Property:value; } </style> </title> </head>  But in the Internal CSS, we can not control styles for multiple documents at once. Internal style Sheet is applicable to the Page in which it is included. Internal Style Sheet is used to style individual page.
  • 6.
     An externalstyle sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages.  This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.
  • 7.
     The positionCSS property sets how an element is positioned in a document. The top , right , bottom , and left properties determine the final location of positiA positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)oned elements.
  • 8.
  • 9.
     The elementis removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.
  • 10.
     The elementis positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
  • 11.
     The elementis positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements;  thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z- index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
  • 12.
     The elementis removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.  This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
  • 13.
     The elementis positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table- related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.