SlideShare a Scribd company logo
Week 03
Images and Typography
Images in HTML




<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
Images in HTML




Start Tag                                             Alternate text if                           End Tag
                                                      image doesn't
        Search      Path to Image         Alternate       appear          Title     Image Title
        Attribute                         Attribute                       Attribute



   <img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
IMAGE TYPES: GIFs, JPGs, PNGs

GIF           Low quality, use for simple graphics
              only.




JPG           Photographic Imagery, Complex
              patters or gradients.




              Images with Alpha Transperency
PNG
Background Images in CSS

          HTML                                CSS                               Browser


<body>                          body {
                                  background-color: grey;
     <div id="box">             }
                                                                       This sentence is the intro to this
          <p>This sentence is
          the intro to this     p {                                              paragraph.
          paragraphs. </p>        font-size: 14px;
          </div>                  color: white;
                                  text-align: center;
</body>                           margin-top: 30px;
                                }

                                #box {
                                    height: 300px;
                                    width: 400px;
                                    border: 2px solid green;
                                    background-image:
                                      url('../images/factory2.jpg');
                                }
Background Images in CSS

          HTML                                CSS                               Browser


<body>                          body {
                                  background-color: grey;
     <div id="box">             }
                                                                       This sentence is the intro to this
          <p>This sentence is
          the intro to this     p {                                              paragraph.
          paragraphs. </p>        font-size: 14px;
          </div>                  color: white;
                                  text-align: center;
</body>                           margin-top: 28px;
                                }

                                #box {
                                    height: 300px;
                                    width: 400px;
                                    border: 2px solid green;
                                    background-image:
                                      url('../images/factory2.jpg');
                                }
Font-Family


   Font Family Property   Desired Font       Next Best   Most General



h1 {
             font-family: "Trebuchet MS", Helvetica, sans-serif;
   }
                                         Font Stack
Embedding Fonts

      CSS

@font-face {
    font-family: coolfont;
    src: url('fonts/coolfont.ttf'),   url('fonts/coolfont.eot');
}

p {
       font-family: coolfont, arial, sans-serif;
}
Embedding Fonts

      CSS
                                                     give the font a
@font-face {                                         simple name
    font-family: coolfont;
    src: url('fonts/coolfont.ttf'),   url('fonts/coolfont.eot');
}

p {
       font-family: coolfont, arial, sans-serif;
}
Embedding Fonts
                                                .OTF and .TTF fonts
                                                work with all browsers
      CSS                                       but Internet Explorer

@font-face {
    font-family: coolfont;
    src: url('fonts/coolfont.ttf'),   url('fonts/coolfont.eot');
}

p {
       font-family: coolfont, arial, sans-serif;
}
                                                   .EOT format required for
                                                   Internet Explorer Use.
Embedding Fonts

                                                   paths to the font files, in
      CSS
                                                   a font folder.
@font-face {
    font-family: coolfont;
    src: url('fonts/coolfont.ttf'), url('fonts/coolfont.eot');
}

p {
       font-family: coolfont, arial, sans-serif;
}
Embedding Fonts

      CSS - without IE code...

@font-face {
    font-family: coolfont;
    src: url('fonts/coolfont.ttf');
}

p {
       font-family: coolfont, arial, sans-serif;
}
Resetting Default CSS Styles
      CSS

* {
      vertical-align: baseline;
      font-weight: inherit;
      font-family: inherit;
      font-style: inherit;
      font-size: 100%;
      border: 0 none;
      outline: 0;
      padding: 0;
      margin: 0;
      }
Styling Links w/ Pseudo-classes
      CSS

a:link {
    color: blue;
    text-decoration: none;
    }

a:visited {
    color: lightBlue;
    text-decoration: none;
    }

a:hover {
    color: white;
    background-color: yellow;
    text-decoration: none;
    }

a:active {
    color: blue;
    text-decoration: none;
    }
Styling Links w/ Pseudo-classes
      CSS

a:link {
    color: blue;
    text-decoration: none;
    }

a:visited {
                                 PSEUDO-CLASSES
    color: lightBlue;
    text-decoration: none;
    }

a:hover {
    color: white;
    background-color: yellow;
    text-decoration: none;
    }

a:active {
    color: blue;
    text-decoration: none;
    }
Styling Links w/ Pseudo-classes
      CSS

a:link {                        Unvisited Link
    color: blue;
    text-decoration: none;
    }

a:visited {                     Visited Link
    color: lightBlue;
    text-decoration: none;
    }

a:hover {                       Mouse Over Link
    color: white;
    background-color: yellow;
    text-decoration: none;
    }

a:active {                      Selected Link
    color: blue;
    text-decoration: none;
    }

More Related Content

What's hot

HTML By K.Sasidhar
HTML By K.SasidharHTML By K.Sasidhar
HTML By K.Sasidhar
Sasidhar Kothuru
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
bluejayjunior
 
Html full
Html fullHtml full
Html full
GulshanKumar368
 
Basic HTML & CSS
Basic HTML & CSSBasic HTML & CSS
Basic HTML & CSSJohn Nelson
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble
 
HTML
HTMLHTML
Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
Arunima Education Foundation
 
User Defined Characters Solution Proposal
User Defined Characters Solution ProposalUser Defined Characters Solution Proposal
User Defined Characters Solution Proposal
Jun Fujisawa
 

What's hot (19)

HTML By K.Sasidhar
HTML By K.SasidharHTML By K.Sasidhar
HTML By K.Sasidhar
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
 
Html
HtmlHtml
Html
 
Basic html tags
Basic html tagsBasic html tags
Basic html tags
 
Html full
Html fullHtml full
Html full
 
HTML & XHTML Basics
HTML & XHTML BasicsHTML & XHTML Basics
HTML & XHTML Basics
 
Presentation 2
Presentation 2Presentation 2
Presentation 2
 
Basic HTML & CSS
Basic HTML & CSSBasic HTML & CSS
Basic HTML & CSS
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Html5
Html5Html5
Html5
 
Html Tags
Html TagsHtml Tags
Html Tags
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Web page concept final ppt
Web page concept  final pptWeb page concept  final ppt
Web page concept final ppt
 
HTML
HTMLHTML
HTML
 
Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
 
User Defined Characters Solution Proposal
User Defined Characters Solution ProposalUser Defined Characters Solution Proposal
User Defined Characters Solution Proposal
 
Css1
Css1Css1
Css1
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 

Similar to ID01 Week 3

html
htmlhtml
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
 
Css(handbook)
Css(handbook)Css(handbook)
Css(handbook)
MD. Anamul Haque
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
Samay16
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü Adına
Adem Ilter
 
Css 1
Css 1Css 1
Css 1H K
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
 
Web Design Assignment 1
Web Design Assignment 1 Web Design Assignment 1
Web Design Assignment 1
beretta21
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
Idan Gazit
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
Claudina Sarahe
 
HTML & CSS Basics
HTML & CSS BasicsHTML & CSS Basics
HTML & CSS Basics
John Nelson
 
Css tips & tricks
Css tips & tricksCss tips & tricks
Css tips & tricks
anubavam-techkt
 
Css+tutorial+in+bangla
Css+tutorial+in+banglaCss+tutorial+in+bangla
Css+tutorial+in+banglajessicaemily
 

Similar to ID01 Week 3 (20)

Css1
Css1Css1
Css1
 
html
htmlhtml
html
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
 
css1.ppt
css1.pptcss1.ppt
css1.ppt
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Css(handbook)
Css(handbook)Css(handbook)
Css(handbook)
 
Estilos Css
Estilos CssEstilos Css
Estilos Css
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü Adına
 
Css 1
Css 1Css 1
Css 1
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
 
CSS
CSSCSS
CSS
 
Web Design Assignment 1
Web Design Assignment 1 Web Design Assignment 1
Web Design Assignment 1
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
 
HTML & CSS Basics
HTML & CSS BasicsHTML & CSS Basics
HTML & CSS Basics
 
Css tips & tricks
Css tips & tricksCss tips & tricks
Css tips & tricks
 
Css+tutorial+in+bangla
Css+tutorial+in+banglaCss+tutorial+in+bangla
Css+tutorial+in+bangla
 
Cascade.ss
Cascade.ssCascade.ss
Cascade.ss
 

Recently uploaded

Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 

Recently uploaded (20)

Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 

ID01 Week 3

  • 1. Week 03 Images and Typography
  • 2. Images in HTML <img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
  • 3. Images in HTML Start Tag Alternate text if End Tag image doesn't Search Path to Image Alternate appear Title Image Title Attribute Attribute Attribute <img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
  • 4. IMAGE TYPES: GIFs, JPGs, PNGs GIF Low quality, use for simple graphics only. JPG Photographic Imagery, Complex patters or gradients. Images with Alpha Transperency PNG
  • 5. Background Images in CSS HTML CSS Browser <body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center; </body> margin-top: 30px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url('../images/factory2.jpg'); }
  • 6. Background Images in CSS HTML CSS Browser <body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center; </body> margin-top: 28px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url('../images/factory2.jpg'); }
  • 7. Font-Family Font Family Property Desired Font Next Best Most General h1 { font-family: "Trebuchet MS", Helvetica, sans-serif; } Font Stack
  • 8. Embedding Fonts CSS @font-face { font-family: coolfont; src: url('fonts/coolfont.ttf'), url('fonts/coolfont.eot'); } p { font-family: coolfont, arial, sans-serif; }
  • 9. Embedding Fonts CSS give the font a @font-face { simple name font-family: coolfont; src: url('fonts/coolfont.ttf'), url('fonts/coolfont.eot'); } p { font-family: coolfont, arial, sans-serif; }
  • 10. Embedding Fonts .OTF and .TTF fonts work with all browsers CSS but Internet Explorer @font-face { font-family: coolfont; src: url('fonts/coolfont.ttf'), url('fonts/coolfont.eot'); } p { font-family: coolfont, arial, sans-serif; } .EOT format required for Internet Explorer Use.
  • 11. Embedding Fonts paths to the font files, in CSS a font folder. @font-face { font-family: coolfont; src: url('fonts/coolfont.ttf'), url('fonts/coolfont.eot'); } p { font-family: coolfont, arial, sans-serif; }
  • 12. Embedding Fonts CSS - without IE code... @font-face { font-family: coolfont; src: url('fonts/coolfont.ttf'); } p { font-family: coolfont, arial, sans-serif; }
  • 13. Resetting Default CSS Styles CSS * { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; }
  • 14. Styling Links w/ Pseudo-classes CSS a:link { color: blue; text-decoration: none; } a:visited { color: lightBlue; text-decoration: none; } a:hover { color: white; background-color: yellow; text-decoration: none; } a:active { color: blue; text-decoration: none; }
  • 15. Styling Links w/ Pseudo-classes CSS a:link { color: blue; text-decoration: none; } a:visited { PSEUDO-CLASSES color: lightBlue; text-decoration: none; } a:hover { color: white; background-color: yellow; text-decoration: none; } a:active { color: blue; text-decoration: none; }
  • 16. Styling Links w/ Pseudo-classes CSS a:link { Unvisited Link color: blue; text-decoration: none; } a:visited { Visited Link color: lightBlue; text-decoration: none; } a:hover { Mouse Over Link color: white; background-color: yellow; text-decoration: none; } a:active { Selected Link color: blue; text-decoration: none; }

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n