SlideShare a Scribd company logo
CSS is a style sheet language used to describe the
presentation semantics (the look and formatting) of a
document written in a markup language. Its most
common application is to style web pages written in
HTML and XHTML, but the language can also be applied
to any kind of XML document, including SVG and XUL.
Single style sheet to multiple
documents
Structure of a Style (CSS)
 CSS
     Selector
     Property
     value

     selector { property : value }
CSS
 selector1 { property1 : value1 }
 selector2 { property2 : value2; property3 : value3 }
CSS Units
 Relative Length (
    px (pixels,
       px, 4px
    em (emphasize,
                 font             body
        font body                  px
    h1{fon-size:1.5em} h1                          px =
     15px
    h2{fon-size:1.4em} h2                          px =
     14px
                            em                px

   ex (x-height,                        x")   ex, 2ex
CSS Units
 Absolute Length (
    in (inches; 1in=2.54cm =72pt =6pc)          in, 1.5in
    cm (centimeters; 1cm=10mm)            cm, 1.11cm
    mm (millimeters)           mm, 0.8mm
    pt (points; 1pt=1/72in, 10pt                    px)
                                     pt, 20pt
    pc (picas; 1pc=12pt)       pc, 2pc
selector { property : value }
 Selector
    HTML Tags
    Class Name
 Property
    Property Name
 value
        Value)      Property
Selector
 Selector
    HTML Tags
    Class Name
Example
[HTML Tags:Style] H2{ background-color : #191970 }
[HTML Tags:Style] P{ text-indent: 3em }
[Class Name:Style] .note { font-size : small }
[Class Name:Style] .normal{ color : blue }
[Class Name:Style] .special{ color : red }
Property
 Property
  
            Property    Selector     Property

 Example
   P { text-indent: 3em }
   H2{ background-color : #191970;
       color : red }
Value
 Value
                            Property
  


     property
  
 Example
   P{ font-family: "sans serif" }
   H1{font-family: Verdana,"sans serif”; color : red}
Groups Selector
 Example
    H1,H2,H3,H4,H5,H6 { color: green }
    H1,H2,H6 { color: red }
    body,H1,H2,H6 { color: red }
    Body.opt1,H1 { color: red }
Class Selector
 Example (CSS Style)
    <p>
    p.right { text-align: right }
    p.center { text-align: center}
 In HTML Files
    <p class="right">This paragraph will be right-
     aligned.</p>
    <p class="center">This paragraph will be center-
     aligned.</p>
Class Selector : Non Tags
 Example (CSS Style)
   
    .center { text-align: center }
 In HTML Files
    <h1 class="center">This heading will be center-
     aligned</h1>
    <p class="center">This paragraph will also be center-
     aligned.</p>
ID Selector
 ID Selector
    ID Selector
        Class Selector                 Style

 Example
    #wer345{ text-align: center; color: green}
    h1#wer345{ text-align: center; color : red }
 In HTML Files
    <h1 id="wer345">Heading</h1>
    <p id="wer345">Some text</p>
Comment
 Example
   p { text-align: center; /* This is a comment */ }
Style: Style Sheet
Style: Style Sheet
Syntax
  Write styles for any element
      selector {property: value;}
  External Style Sheet
      <link rel="stylesheet" type="text/css" href="style.css" />
  Internal Style
      <style type=”text/css”>selector {property: value}</style>
  Inline Style
      <tag style=”property: value”>
Style: Style Sheet
Style
  Inline Style(In line HTML Tags)
  Internal Style Sheet(In HTML head Tags)
  External Style Sheet(NameStyleSheet.css)
Inline Style
 Example
    <H2 style= “background-color: blue; color: white”>
     Heading 2 </H2>
    <P style= “font-size: 20pt”> This text has the <EM>
     font-size </EM> style applied to it. </P>
    <P style= “font-size: 20pt; color: #ff0000”>font-size 20
     pt and red color. </P>
Internal Style
Example
<html><head>
  <style type="text/css">
     BODY{background-image: url("bgpic.jpg")}
     EM{background-color: #8000ff;color: white}
     H1{font-family: arial, sans-serif }
     P{font-size: 14pt}
     .special{color: blue}
     .special{color: blue}
  </style>
</head><body>...</body></html>
Internal Style
Example
<html><head>…</head><body>
<H1 class = "special"> MAN and MEN</H1>
<P> The exalted origin of the word
<EM>MAN </EM> is clear int the plural form,
<EM> men </EM>, from <B>mental </B>. It is inspiring to note
that man was so named because he was
<EM> the one that thinks </EM>.</P>
<H1> The Thinker </H1>
<P class = "special"> If you have ever seen a copy – the original is in
Paris – of the famous sculpture by Auguste Rodin called
<EM> The Thinker </EM>, you would agree that the essential
nature of man stems from his ability to think.</P>
</body></html>
External Style
 <html><head>
 <link rel = "stylesheet" type = "text/css" href =
  "styles.css"/>
 </head><body>...</body></html>
External Style
                       css
     /* An External Style Sheet */
     BODY { background-image : url("images/bgpic.jpg") }
     EM { background-color : #8000ff; color : white }
     H1 { font-family : arial, sans-serif }
     H2 { background-color : blue; color : white }
     P{ font-size : 14pt }
     UL { margin-left: 2cm }
     .special{ color : blue; font-weight : bold }
     .normal{ color : red }
1) Inline Style
2) Internal Style Sheet
3) External Style Sheet
4)       Style
                      Browser
     Default)
            Inline Style       Style

            Inline Style
               Inline Style        Internal
    Style
              Internal Style           External
    Style
                           Style
       Style
 Selector              Property
           Property
        Property

    inherit)
               Style
/*An external stylesheet*/            :
 h3 { color: red; text-align:     <link rel="stylesheet"
left; font-size: 8pt }          type="text/css"
                                href="hstyles.css">
                                <style type = "text/css">
                                h3 {text-align: right; font-
                                size: 20pt}
                                  </style>
                                     :
Property H3 Tag
 Property               h3>
   color: red”
   “text-align: right;”
   “font-size: 20pt”
CSS
 Example
<html><head>
<style type="text/css">
p,table,h1,h2,h3 {font-family: verdana, arial, “sans serif”; }
p,h1,h2,h3,table,hr{ margin-left: 10pt }
p,th,td{ font-size: 75% }
body{ #ffffff }
h1,h2,h3,hr { color: firebrick }
</style>
</head><body>…</body></html>
CSS
 Example
<html><head>…</head><body>
<h1>This is header 1</h1> <hr>
<p>This is a paragraph</p>
<p>This is another paragraph</p> <hr>
<h2>This is header 2, followed by a table</h2>
<table border="1" width="100%">
<tr>     <th>First Name</th><th>Name</th>
         <th>Telephone</th> <th>Fax</th> </tr>
<tr>     <td>Hege</td> <td>Svendson</td>
         <td>555-777-0001</td>
         <td>555-777-0000</td> </tr>
<tr>     <td>Kai Jim</td> <td>Svendson</td>
         <td>555-777-0002</td> <td>&nbsp;</td> </tr> </table>
</body></html>
CSS
CSS
 Example
<html><head>
<style type="text/css">
h1,h2,h3 { font-family: arial, “sans serif” }
p,table,li,address {
                margin-left: 15pt;
                font-family: arial, “sans serif” }
 p, th,td { font-size: 80% }
 th             { background-color:#FAEBD7}
 body { background-color: #ffffff }
 h1,h2,h3,hr { color:saddlebrown }
</style>
</head><body>…</body></html>
CSS
Formatting Hypertext Links
To remove the style of underlining hypertext,
use:
 A {text-decoration:none}
Formatting Hypertext Links
4 types of hyperlinks can be modified:
 A:visited {styles for previously visited links}
 A:link {styles for links that have never
  visited}
 A:active {styles for links that are currently
  being clicked}
 A:hover {styles when the mouse cursor is
  hovering over the link}
Ref.
 http://www.w3.org/
 http://www.w3shcools.com/
 http://www.westciv.com/style_master/academy/css_t
  utorial/
 H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet &
  World Wide Web How to Program, Prentice Hall.

More Related Content

What's hot

Html 2
Html   2Html   2
Html
HtmlHtml
Unit 2 (it workshop)
Unit 2 (it workshop)Unit 2 (it workshop)
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30
Mahmoud Samir Fayed
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)Jayson Cortez
 
Web Technology Lab File
Web Technology Lab FileWeb Technology Lab File
Web Technology Lab File
Kandarp Tiwari
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
Arvind Kumar
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
Ishaq Shinwari
 
Html tables examples
Html tables   examplesHtml tables   examples
Html tables examples
Mukesh Tekwani
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Postlet June1709
Postlet June1709Postlet June1709
Postlet June1709bnbanmare
 
Practical file(XHTML)web designing
Practical file(XHTML)web designingPractical file(XHTML)web designing
Practical file(XHTML)web designing
ArtiSolanki5
 
TYBSC prac soln
TYBSC prac solnTYBSC prac soln
TYBSC prac solntushar1001
 
Ict 8 css
Ict 8 cssIct 8 css
Ict 8 css
Christian Reglos
 
Css(handbook)
Css(handbook)Css(handbook)
Css(handbook)
MD. Anamul Haque
 

What's hot (20)

Html 2
Html   2Html   2
Html 2
 
Html
HtmlHtml
Html
 
Unit 2 (it workshop)
Unit 2 (it workshop)Unit 2 (it workshop)
Unit 2 (it workshop)
 
The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)
 
Web Technology Lab File
Web Technology Lab FileWeb Technology Lab File
Web Technology Lab File
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
 
CSS Part II
CSS Part IICSS Part II
CSS Part II
 
Html tables examples
Html tables   examplesHtml tables   examples
Html tables examples
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
Postlet June1709
Postlet June1709Postlet June1709
Postlet June1709
 
Practical file(XHTML)web designing
Practical file(XHTML)web designingPractical file(XHTML)web designing
Practical file(XHTML)web designing
 
TYBSC prac soln
TYBSC prac solnTYBSC prac soln
TYBSC prac soln
 
CSS
CSSCSS
CSS
 
Ict 8 css
Ict 8 cssIct 8 css
Ict 8 css
 
Css(handbook)
Css(handbook)Css(handbook)
Css(handbook)
 
Css1
Css1Css1
Css1
 

Viewers also liked

Tema 3
Tema 3Tema 3
REVISTA PEDAGOGIA 3ER MILENIO
REVISTA PEDAGOGIA 3ER MILENIOREVISTA PEDAGOGIA 3ER MILENIO
REVISTA PEDAGOGIA 3ER MILENIO
MARIAETM
 
nascar overview - 04/2011
nascar overview - 04/2011nascar overview - 04/2011
nascar overview - 04/2011
nascar web agency
 
test test
test testtest test
test test
aeconger
 
Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...
Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...
Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...
Jordano Santos Cerqueira
 
ชีววิทยา1
ชีววิทยา1ชีววิทยา1
ชีววิทยา1Darika Kanhala
 
Warp 8 cloud solution_ppt
Warp 8 cloud solution_pptWarp 8 cloud solution_ppt
Warp 8 cloud solution_ppt
chasjs
 
Frios e congelados
Frios e congeladosFrios e congelados
Frios e congeladosgentedagente
 
HSK Level 4 H41001
HSK Level 4 H41001HSK Level 4 H41001
HSK Level 4 H41001
Hoa Vu
 
The song of_the_bird_sas
The song of_the_bird_sasThe song of_the_bird_sas
The song of_the_bird_sas
Gautam Shah
 
The West Midlands Research Collaborative
The West Midlands Research CollaborativeThe West Midlands Research Collaborative
The West Midlands Research Collaborative
jimmystrein
 
Informational text and the inquiry process2
Informational text and the inquiry process2Informational text and the inquiry process2
Informational text and the inquiry process2bdobler2
 
Lectura 1,electiva iii, clase 03 08-11
Lectura 1,electiva iii, clase 03 08-11Lectura 1,electiva iii, clase 03 08-11
Lectura 1,electiva iii, clase 03 08-11
JULIANARDILAQUIASUA
 
H24年度「創成研究」インターンシップpr用
H24年度「創成研究」インターンシップpr用H24年度「創成研究」インターンシップpr用
H24年度「創成研究」インターンシップpr用
knzwuniv
 
Hearing aid-batteries-toronto
Hearing aid-batteries-torontoHearing aid-batteries-toronto
Hearing aid-batteries-toronto
HearCare Audiology & Hearing Aid Clinic
 
What i did last summer
What i did last summerWhat i did last summer
What i did last summer
LadyDorrit
 
Cloud 2010
Cloud 2010Cloud 2010
Cloud 2010steccami
 
iiwas 2010
iiwas 2010iiwas 2010
iiwas 2010steccami
 

Viewers also liked (20)

Biotech Bulletin 2Q2015
Biotech Bulletin 2Q2015Biotech Bulletin 2Q2015
Biotech Bulletin 2Q2015
 
Tema 3
Tema 3Tema 3
Tema 3
 
REVISTA PEDAGOGIA 3ER MILENIO
REVISTA PEDAGOGIA 3ER MILENIOREVISTA PEDAGOGIA 3ER MILENIO
REVISTA PEDAGOGIA 3ER MILENIO
 
nascar overview - 04/2011
nascar overview - 04/2011nascar overview - 04/2011
nascar overview - 04/2011
 
test test
test testtest test
test test
 
Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...
Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...
Eleições 2016 - Linhares - Faceli - DCE (Diretório Centra dos Estudantes) - P...
 
ชีววิทยา1
ชีววิทยา1ชีววิทยา1
ชีววิทยา1
 
Warp 8 cloud solution_ppt
Warp 8 cloud solution_pptWarp 8 cloud solution_ppt
Warp 8 cloud solution_ppt
 
Food
FoodFood
Food
 
Frios e congelados
Frios e congeladosFrios e congelados
Frios e congelados
 
HSK Level 4 H41001
HSK Level 4 H41001HSK Level 4 H41001
HSK Level 4 H41001
 
The song of_the_bird_sas
The song of_the_bird_sasThe song of_the_bird_sas
The song of_the_bird_sas
 
The West Midlands Research Collaborative
The West Midlands Research CollaborativeThe West Midlands Research Collaborative
The West Midlands Research Collaborative
 
Informational text and the inquiry process2
Informational text and the inquiry process2Informational text and the inquiry process2
Informational text and the inquiry process2
 
Lectura 1,electiva iii, clase 03 08-11
Lectura 1,electiva iii, clase 03 08-11Lectura 1,electiva iii, clase 03 08-11
Lectura 1,electiva iii, clase 03 08-11
 
H24年度「創成研究」インターンシップpr用
H24年度「創成研究」インターンシップpr用H24年度「創成研究」インターンシップpr用
H24年度「創成研究」インターンシップpr用
 
Hearing aid-batteries-toronto
Hearing aid-batteries-torontoHearing aid-batteries-toronto
Hearing aid-batteries-toronto
 
What i did last summer
What i did last summerWhat i did last summer
What i did last summer
 
Cloud 2010
Cloud 2010Cloud 2010
Cloud 2010
 
iiwas 2010
iiwas 2010iiwas 2010
iiwas 2010
 

Similar to html

Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssTesfaye Yenealem
 
Css
CssCss
Css
CssCss
Css 1
Css 1Css 1
Css 1H K
 
Css tutorial
Css tutorialCss tutorial
Css tutorialvedaste
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
EktaDesai14
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
CSS notes
CSS notesCSS notes
CSS notes
Rajendra Prasad
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
Samay16
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
abhilashagupta
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
CSS
CSSCSS
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
Programmer Blog
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
Tushar Rajput
 

Similar to html (20)

Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
Css1
Css1Css1
Css1
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css 1
Css 1Css 1
Css 1
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
CSS notes
CSS notesCSS notes
CSS notes
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Estilos Css
Estilos CssEstilos Css
Estilos Css
 
CSS
CSSCSS
CSS
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 

Recently uploaded

The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
Jheel Barad
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
GeoBlogs
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
vaibhavrinwa19
 
The Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdfThe Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdf
kaushalkr1407
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
RaedMohamed3
 
special B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdfspecial B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdf
Special education needs
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
Sandy Millin
 
The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
heathfieldcps1
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
Jean Carlos Nunes Paixão
 
Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
EduSkills OECD
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
Anna Sz.
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
Tamralipta Mahavidyalaya
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Atul Kumar Singh
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
Celine George
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
Levi Shapiro
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
timhan337
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
SACHIN R KONDAGURI
 

Recently uploaded (20)

The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
 
The Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdfThe Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdf
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
special B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdfspecial B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdf
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
 
The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
 
Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
 

html

  • 1. CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.
  • 2. Single style sheet to multiple documents
  • 3.
  • 4. Structure of a Style (CSS)  CSS  Selector  Property  value   selector { property : value }
  • 5. CSS  selector1 { property1 : value1 }  selector2 { property2 : value2; property3 : value3 }
  • 6. CSS Units  Relative Length (  px (pixels, px, 4px  em (emphasize, font body  font body px  h1{fon-size:1.5em} h1 px = 15px  h2{fon-size:1.4em} h2 px = 14px  em px  ex (x-height, x") ex, 2ex
  • 7. CSS Units  Absolute Length (  in (inches; 1in=2.54cm =72pt =6pc) in, 1.5in  cm (centimeters; 1cm=10mm) cm, 1.11cm  mm (millimeters) mm, 0.8mm  pt (points; 1pt=1/72in, 10pt px) pt, 20pt  pc (picas; 1pc=12pt) pc, 2pc
  • 8. selector { property : value }  Selector  HTML Tags  Class Name  Property  Property Name  value  Value) Property
  • 9. Selector  Selector  HTML Tags  Class Name Example [HTML Tags:Style] H2{ background-color : #191970 } [HTML Tags:Style] P{ text-indent: 3em } [Class Name:Style] .note { font-size : small } [Class Name:Style] .normal{ color : blue } [Class Name:Style] .special{ color : red }
  • 10. Property  Property   Property Selector Property  Example  P { text-indent: 3em }  H2{ background-color : #191970; color : red }
  • 11. Value  Value  Property   property   Example  P{ font-family: "sans serif" }  H1{font-family: Verdana,"sans serif”; color : red}
  • 12. Groups Selector  Example  H1,H2,H3,H4,H5,H6 { color: green }  H1,H2,H6 { color: red }  body,H1,H2,H6 { color: red }  Body.opt1,H1 { color: red }
  • 13. Class Selector  Example (CSS Style)  <p>  p.right { text-align: right }  p.center { text-align: center}  In HTML Files  <p class="right">This paragraph will be right- aligned.</p>  <p class="center">This paragraph will be center- aligned.</p>
  • 14. Class Selector : Non Tags  Example (CSS Style)   .center { text-align: center }  In HTML Files  <h1 class="center">This heading will be center- aligned</h1>  <p class="center">This paragraph will also be center- aligned.</p>
  • 15. ID Selector  ID Selector  ID Selector  Class Selector Style  Example  #wer345{ text-align: center; color: green}  h1#wer345{ text-align: center; color : red }  In HTML Files  <h1 id="wer345">Heading</h1>  <p id="wer345">Some text</p>
  • 16. Comment  Example  p { text-align: center; /* This is a comment */ }
  • 18. Style: Style Sheet Syntax  Write styles for any element  selector {property: value;}  External Style Sheet  <link rel="stylesheet" type="text/css" href="style.css" />  Internal Style  <style type=”text/css”>selector {property: value}</style>  Inline Style  <tag style=”property: value”>
  • 19. Style: Style Sheet Style  Inline Style(In line HTML Tags)  Internal Style Sheet(In HTML head Tags)  External Style Sheet(NameStyleSheet.css)
  • 20. Inline Style  Example  <H2 style= “background-color: blue; color: white”> Heading 2 </H2>  <P style= “font-size: 20pt”> This text has the <EM> font-size </EM> style applied to it. </P>  <P style= “font-size: 20pt; color: #ff0000”>font-size 20 pt and red color. </P>
  • 21. Internal Style Example <html><head> <style type="text/css"> BODY{background-image: url("bgpic.jpg")} EM{background-color: #8000ff;color: white} H1{font-family: arial, sans-serif } P{font-size: 14pt} .special{color: blue} .special{color: blue} </style> </head><body>...</body></html>
  • 22. Internal Style Example <html><head>…</head><body> <H1 class = "special"> MAN and MEN</H1> <P> The exalted origin of the word <EM>MAN </EM> is clear int the plural form, <EM> men </EM>, from <B>mental </B>. It is inspiring to note that man was so named because he was <EM> the one that thinks </EM>.</P> <H1> The Thinker </H1> <P class = "special"> If you have ever seen a copy – the original is in Paris – of the famous sculpture by Auguste Rodin called <EM> The Thinker </EM>, you would agree that the essential nature of man stems from his ability to think.</P> </body></html>
  • 23. External Style  <html><head>  <link rel = "stylesheet" type = "text/css" href = "styles.css"/>  </head><body>...</body></html>
  • 24. External Style  css  /* An External Style Sheet */  BODY { background-image : url("images/bgpic.jpg") }  EM { background-color : #8000ff; color : white }  H1 { font-family : arial, sans-serif }  H2 { background-color : blue; color : white }  P{ font-size : 14pt }  UL { margin-left: 2cm }  .special{ color : blue; font-weight : bold }  .normal{ color : red }
  • 25.
  • 26. 1) Inline Style 2) Internal Style Sheet 3) External Style Sheet 4) Style Browser Default)
  • 27. Inline Style Style Inline Style  Inline Style Internal Style  Internal Style External Style  Style
  • 28. Style Selector Property Property  Property inherit) Style
  • 29. /*An external stylesheet*/ : h3 { color: red; text-align: <link rel="stylesheet" left; font-size: 8pt } type="text/css" href="hstyles.css"> <style type = "text/css"> h3 {text-align: right; font- size: 20pt} </style> :
  • 30. Property H3 Tag  Property h3>  color: red”  “text-align: right;”  “font-size: 20pt”
  • 31.
  • 32. CSS  Example <html><head> <style type="text/css"> p,table,h1,h2,h3 {font-family: verdana, arial, “sans serif”; } p,h1,h2,h3,table,hr{ margin-left: 10pt } p,th,td{ font-size: 75% } body{ #ffffff } h1,h2,h3,hr { color: firebrick } </style> </head><body>…</body></html>
  • 33. CSS  Example <html><head>…</head><body> <h1>This is header 1</h1> <hr> <p>This is a paragraph</p> <p>This is another paragraph</p> <hr> <h2>This is header 2, followed by a table</h2> <table border="1" width="100%"> <tr> <th>First Name</th><th>Name</th> <th>Telephone</th> <th>Fax</th> </tr> <tr> <td>Hege</td> <td>Svendson</td> <td>555-777-0001</td> <td>555-777-0000</td> </tr> <tr> <td>Kai Jim</td> <td>Svendson</td> <td>555-777-0002</td> <td>&nbsp;</td> </tr> </table> </body></html>
  • 34. CSS
  • 35. CSS  Example <html><head> <style type="text/css"> h1,h2,h3 { font-family: arial, “sans serif” } p,table,li,address { margin-left: 15pt; font-family: arial, “sans serif” } p, th,td { font-size: 80% } th { background-color:#FAEBD7} body { background-color: #ffffff } h1,h2,h3,hr { color:saddlebrown } </style> </head><body>…</body></html>
  • 36. CSS
  • 37.
  • 38. Formatting Hypertext Links To remove the style of underlining hypertext, use:  A {text-decoration:none}
  • 39. Formatting Hypertext Links 4 types of hyperlinks can be modified:  A:visited {styles for previously visited links}  A:link {styles for links that have never visited}  A:active {styles for links that are currently being clicked}  A:hover {styles when the mouse cursor is hovering over the link}
  • 40. Ref.  http://www.w3.org/  http://www.w3shcools.com/  http://www.westciv.com/style_master/academy/css_t utorial/  H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall.