Disclaimer: This presentation is prepared by trainees ofbaabtra as a part of mentoring program. This is not officialdocume...
CSSSubhin P.V111subru@gmail.comwww.facebook.com/subhinvelayudhantwitter.com/111subruin.linkedin.com/in/Subhin P V8129076036
INTRODUCTION• CSS stands for Cascading Style Sheets• Used for stylizing web pages.• CSS were introduced in HTML 4.0• Creat...
WHY CSS??• <h1 align=“center”><font color=“red”type=“caliph” > Subhin </font> </h1>• Instead in CSS:h1{align=“center”;font...
3 WAYS TO USE CSS• <h1 style=“color:red; font-family:Caliph”>(inline method)• <head><style>h1{font-family: Caliph;color:re...
MORE ON SELECTORS• Class Selectors.warning {color:red;font-family: Calibri}• In your HTML code -<H1 CLASS=“warning”>Danger...
MORE ON SELECTORSThe id SelectorThe id selector is used to specify a style for a single, unique element.The id selector us...
CSS COMENTSComments are used to explain your code, and may help you when you edit thesource code at a later date. Comments...
CSS COLORS• Colors can be used in CSS in 3 Different ways– Simply stating the color name in English.– Providing the values...
CSS TEXT• Text Alignment: 4 types of alignment can beapplied.– “Left”, “Right”, “Center” and “Justify”• Exampleh1 {text-al...
CSS TEXT• Text Transformation: The text-transformproperty is used to specify uppercase andlowercase letters in a text.•Exa...
CSS TEXT•Text-Indentation: property is used to specify theindentation of the first line of a text.Examplep {text-indent:50...
CSS ALIGNAligning Block ElementsA block element is an element that takes up the fullwidth available, and has a line break ...
CSS ALIGN• Center AligningBlock elements can be aligned by setting theleft and right margins to "auto".center {margin-left...
CSS ALIGN• Left and Right AligningExample.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}
CSS POSITIONING• The CSS positioning properties allow you to position anelement.• Elements can be positioned using thetop,...
If this presentation helped you, please visit ourpage facebook.com/baabtra and like it.Thanks in advance.www.baabtra.com |...
Contact Us
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets)
Upcoming SlideShare
Loading in …5
×

CSS (Cascading Style Sheets)

748 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
748
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS (Cascading Style Sheets)

  1. 1. Disclaimer: This presentation is prepared by trainees ofbaabtra as a part of mentoring program. This is not officialdocument of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt .Ltd
  2. 2. CSSSubhin P.V111subru@gmail.comwww.facebook.com/subhinvelayudhantwitter.com/111subruin.linkedin.com/in/Subhin P V8129076036
  3. 3. INTRODUCTION• CSS stands for Cascading Style Sheets• Used for stylizing web pages.• CSS were introduced in HTML 4.0• Created by Hakon Wium Lie of MIT in 1994• CSS style rules look like this:Selector { declarationproperty0:value0;property1:value1;propertyZ:valueZ}
  4. 4. WHY CSS??• <h1 align=“center”><font color=“red”type=“caliph” > Subhin </font> </h1>• Instead in CSS:h1{align=“center”;font-family:Caliph;color:red;}
  5. 5. 3 WAYS TO USE CSS• <h1 style=“color:red; font-family:Caliph”>(inline method)• <head><style>h1{font-family: Caliph;color:red; (internal placement)font-size:50px;}</style></head>• External CSS File
  6. 6. MORE ON SELECTORS• Class Selectors.warning {color:red;font-family: Calibri}• In your HTML code -<H1 CLASS=“warning”>Danger!</H1><P CLASS=“warning”>Be careful…</P>…….
  7. 7. MORE ON SELECTORSThe id SelectorThe id selector is used to specify a style for a single, unique element.The id selector uses the id attribute of the HTMLelement, and is defined with a "#".The style rule below will be applied to the element withid="para1":Example#para1{text-align:center;color:red;}
  8. 8. CSS COMENTSComments are used to explain your code, and may help you when you edit thesource code at a later date. Comments are ignored by browsers.A CSS comment begins with "/*", and ends with "*/", like this:/*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}
  9. 9. CSS COLORS• Colors can be used in CSS in 3 Different ways– Simply stating the color name in English.– Providing the values in (R,G,B)– Providing the Hexadecimal value for color variesfrom (000000) Black to (FFFFFF) White.•Examplebody {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}
  10. 10. CSS TEXT• Text Alignment: 4 types of alignment can beapplied.– “Left”, “Right”, “Center” and “Justify”• Exampleh1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}
  11. 11. CSS TEXT• Text Transformation: The text-transformproperty is used to specify uppercase andlowercase letters in a text.•Examples:p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}
  12. 12. CSS TEXT•Text-Indentation: property is used to specify theindentation of the first line of a text.Examplep {text-indent:50px;}
  13. 13. CSS ALIGNAligning Block ElementsA block element is an element that takes up the fullwidth available, and has a line break before and after it.Examples of block elements:* <h1>* <p>* <div>
  14. 14. CSS ALIGN• Center AligningBlock elements can be aligned by setting theleft and right margins to "auto".center {margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6; }
  15. 15. CSS ALIGN• Left and Right AligningExample.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}
  16. 16. CSS POSITIONING• The CSS positioning properties allow you to position anelement.• Elements can be positioned using thetop, bottom, left, and right properties.However, these properties will not work unless theposition property is set first. They also work differentlydepending on the positioning method.• There are four different positioning methods.–Static Positioning–Fixed Positioning–Relative Positioning–Absolute Positioning
  17. 17. If this presentation helped you, please visit ourpage facebook.com/baabtra and like it.Thanks in advance.www.baabtra.com | www.massbaab.com |www.baabte.com
  18. 18. Contact Us

×