SlideShare a Scribd company logo

Day6

Ann Foley
Ann Foley
1 of 10
Download to read offline
Developing Self Awareness
Review 
1.  Grouping CSS selectors
2.  Styling links states "
    (aka pseudo-class
    selectors) using CSS
3.  Generic elements – "
    div and span
4.  CSS Class selectors
Developing Self Awareness
1.  Grouping CSS selectors
h1, h3, p {
                           Heading 1
     
color: orange;"                  Heading 3
     
font-weight: bold;"              paragraph

}


Create a css style that applies to a group of
items by separating the items with commas
Developing Self Awareness
    2.  Styling link states
a:link {color:red}
    
/* links are red*/
a:visited {color:blue} 
/* visited links are blue*/
a:hover {color:purple} 
/* hovering turns them purple*/
a:active {color:red} 
/* red when clicking*/
"
Note well – the pseudo-class selectors must be in "
the above order.

LVHA – LoVe before HAte
Developing Self Awareness
3.  Generic Elements
<div>Content here.</div> 

Divs are generic block-level elements.
Applied to portions of content, they make that
content easier to style and manipulate. Until HTML5,
divs were the workhorse of web layout.
With HTML5, you’re encouraged to use elements
like <article>, <section> and <aside> before you use
<div> to define an area.
3.  Generic ElementsAwareness
    Developing Self (cont.)
<span> some words </span> 

Spans are generic inline elements.
A span element is typically wrapped around a
portion of text in order to style that text differently
than the rest of the paragraph, h1 or whatever.


	
  
Developing Self Awareness
4.  CSS Class Selectors
Type selectors target every instance of an element.
If you write p{color:green}, all your paragraph text will
be green.
Type selectors select elements such as p, h1.
They’re what we’ve styled before
Class selectors can be used to select and "
style any HTML element by applying the class "
as an attribute.

       How?

Recommended

Layout absolute poz
Layout absolute pozLayout absolute poz
Layout absolute pozAnn Foley
 
Centering page
Centering pageCentering page
Centering pageAnn Foley
 
Html part 2
Html part 2Html part 2
Html part 2lokenra
 
Lesson 3
Lesson 3Lesson 3
Lesson 3hstryk
 
Introduction to the Web and HTML
Introduction to the Web and HTMLIntroduction to the Web and HTML
Introduction to the Web and HTMLSiddharthBorderwala
 
Web programming css
Web programming cssWeb programming css
Web programming cssUma mohan
 

More Related Content

What's hot

How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014James Strang
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Completing Your Design with WordPress
Completing Your Design with WordPressCompleting Your Design with WordPress
Completing Your Design with WordPressChelsea Otakan
 
What's a web page made of?
What's a web page made of?What's a web page made of?
What's a web page made of?Charlie Allen
 
CSS introduction
CSS introductionCSS introduction
CSS introductionCloudTech 
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layoutCK Yang
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPressAnthony Montalbano
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptMarc Huang
 

What's hot (20)

How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014
 
Css1
Css1Css1
Css1
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
Css home
Css   homeCss   home
Css home
 
Completing Your Design with WordPress
Completing Your Design with WordPressCompleting Your Design with WordPress
Completing Your Design with WordPress
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
 
What's a web page made of?
What's a web page made of?What's a web page made of?
What's a web page made of?
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Css.html
Css.htmlCss.html
Css.html
 
Intro to css
Intro to cssIntro to css
Intro to css
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
 

Similar to Day6

Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Erin M. Kidwell
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2Shawn Calvert
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan ComputerShyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computershyamverma305
 
Lab#1 - Front End Development
Lab#1 - Front End DevelopmentLab#1 - Front End Development
Lab#1 - Front End DevelopmentWalid Ashraf
 
Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)shabab shihan
 
Internet tech &amp; web prog. p4,5
Internet tech &amp; web prog.  p4,5Internet tech &amp; web prog.  p4,5
Internet tech &amp; web prog. p4,5Taymoor Nazmy
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
 

Similar to Day6 (20)

Css
CssCss
Css
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan ComputerShyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Lab#1 - Front End Development
Lab#1 - Front End DevelopmentLab#1 - Front End Development
Lab#1 - Front End Development
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)
 
Internet tech &amp; web prog. p4,5
Internet tech &amp; web prog.  p4,5Internet tech &amp; web prog.  p4,5
Internet tech &amp; web prog. p4,5
 
Css
CssCss
Css
 
Cashcading stylesheets
Cashcading stylesheetsCashcading stylesheets
Cashcading stylesheets
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 

Recently uploaded

Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoProduct School
 
KUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionKUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionNeo4j
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientKari Kakkonen
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfMostafa Higazy
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriSafe Software
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfinfogdgmi
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfRodneyThomas28
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationAppsthentic Technology
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)François
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 

Recently uploaded (20)

Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
 
KUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionKUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ion
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficient
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdf
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & Esri
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdf
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdf
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and Optimization
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 

Day6

  • 1. Developing Self Awareness Review 1.  Grouping CSS selectors 2.  Styling links states " (aka pseudo-class selectors) using CSS 3.  Generic elements – " div and span 4.  CSS Class selectors
  • 2. Developing Self Awareness 1.  Grouping CSS selectors h1, h3, p { Heading 1 color: orange;" Heading 3 font-weight: bold;" paragraph } Create a css style that applies to a group of items by separating the items with commas
  • 3. Developing Self Awareness 2.  Styling link states a:link {color:red} /* links are red*/ a:visited {color:blue} /* visited links are blue*/ a:hover {color:purple} /* hovering turns them purple*/ a:active {color:red} /* red when clicking*/ " Note well – the pseudo-class selectors must be in " the above order. LVHA – LoVe before HAte
  • 4. Developing Self Awareness 3.  Generic Elements <div>Content here.</div> Divs are generic block-level elements. Applied to portions of content, they make that content easier to style and manipulate. Until HTML5, divs were the workhorse of web layout. With HTML5, you’re encouraged to use elements like <article>, <section> and <aside> before you use <div> to define an area.
  • 5. 3.  Generic ElementsAwareness Developing Self (cont.) <span> some words </span> Spans are generic inline elements. A span element is typically wrapped around a portion of text in order to style that text differently than the rest of the paragraph, h1 or whatever.  
  • 6. Developing Self Awareness 4.  CSS Class Selectors Type selectors target every instance of an element. If you write p{color:green}, all your paragraph text will be green. Type selectors select elements such as p, h1. They’re what we’ve styled before Class selectors can be used to select and " style any HTML element by applying the class " as an attribute. How?
  • 7. Developing Self Awareness 4.  CSS Class Selectors (cont.) .redbold{" color: red;" CSS font-weight: bold;" } <p>Call me <span class=“redbold”> Ishmael.</span> Some years ago, never mind how long precisely…</p> HTML Call me Ishmael. Some years ago, never mind how long Result precisely…
  • 8. FANCY" 1.  Create a small bullet in Photoshop or Illustrator. BULLETS 2.  It should be a .jpeg, .png or " (bespoke bullets .gif image. for your " 3.  Customize your li CSS: <ul></ul>) li { " list-style-image: url(your_bullet.gif); " }
  • 9. Email Note: this type of mail link can attract all the Link spammers of the whole entire world. One solution: skip the mailto link and write something (How to make a like this: “Hey, you can send me an email at afoley(at)madisoncollege(dot)edu.” link to an email Another solution is Enkoder, a tiny, little javascript utility address that that encrypts your email address: http://hivelogic.com/ starts the email enkoder/ process) Click" <a href=“mailto:afoley@madisoncollege.edu”> here</a> to send me an email!
  • 10. Developing Self Awareness Centering page content CSS! #wrapper {" width: 800px;" margin:0 auto;" } HTML! <body> <div id=“wrapper”> <h1>I’m the headline</h1> <p>I’m the content of this one-paragraph web page. " The headline and I are the only content here!</p> </div> </body>