SlideShare a Scribd company logo
1 of 3
Download to read offline
Intro to HTML/CSS
                   Class 2 Handout: Adding a CSS Page
●   Now that we have our HTML page, we need to add a CSS page.
      ○ Click File->New from Template->CSS->Blank File




●   Click File->Save As and save the file in a Project




                                                                 1
●   Choose the project that you just created, and save the file as “style.css” and click Ok.




●   You should now have two files open in Aptana: index.html and style.css.




●   In the <head> of index.html, add a link element
        ○ <link rel="stylesheet" href="style.css">




                                                                                               2
●   We are going to add a body element selector to our style.css page, and change the
    background color.




●   Now we can make sure that both index.html and style.css are saved, and we can click
    the “Preview” icon to make sure our CSS and HTML page are linked correctly.




                                                                                          3

More Related Content

Similar to Class 2 handout (1) adding a css stylesheet

Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
JagadishBabuParri
 
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
christiandean12115
 
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
Erin M. Kidwell
 
Tutorial1
Tutorial1Tutorial1
Tutorial1
hstryk
 
Unit g adobe dreamweaver cs6
Unit g adobe dreamweaver cs6Unit g adobe dreamweaver cs6
Unit g adobe dreamweaver cs6
Krista Lawrence
 

Similar to Class 2 handout (1) adding a css stylesheet (20)

Html intro for IML 295, week 11
Html intro for IML 295, week 11Html intro for IML 295, week 11
Html intro for IML 295, week 11
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
 
CSS
CSSCSS
CSS
 
HTML and CSS.pptx
HTML and CSS.pptxHTML and CSS.pptx
HTML and CSS.pptx
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
INFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptx
INFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptxINFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptx
INFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptx
 
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
 
Dreamweaver template
Dreamweaver templateDreamweaver template
Dreamweaver template
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
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
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Create content template
Create content templateCreate content template
Create content template
 
Magento 2 theming - knowledge sharing session by suman kc
Magento 2 theming - knowledge sharing session by suman kcMagento 2 theming - knowledge sharing session by suman kc
Magento 2 theming - knowledge sharing session by suman kc
 
Wiki to HTML Conversion
Wiki to HTML ConversionWiki to HTML Conversion
Wiki to HTML Conversion
 
Tutorial1
Tutorial1Tutorial1
Tutorial1
 
Week 2.pptx
Week 2.pptxWeek 2.pptx
Week 2.pptx
 
Unit g adobe dreamweaver cs6
Unit g adobe dreamweaver cs6Unit g adobe dreamweaver cs6
Unit g adobe dreamweaver cs6
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
 

More from Erin M. Kidwell

Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
 
Class 3 create an absolute layout with css abs position (aptana)
Class 3  create an absolute layout with css abs position (aptana)Class 3  create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)
Erin M. Kidwell
 
Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (...
Class 3 Intro to HTML/ CSS Gdi cincinnati   create a table layout with html (...Class 3 Intro to HTML/ CSS Gdi cincinnati   create a table layout with html (...
Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (...
Erin M. Kidwell
 
Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Class 2 handout css exercises (2)
Class 2 handout css exercises (2)
Erin M. Kidwell
 
Class 1 handout (2) html exercises
Class 1 handout (2) html exercisesClass 1 handout (2) html exercises
Class 1 handout (2) html exercises
Erin M. Kidwell
 
Class 1 handout (1) aptana create a new presentation and stylesheet
Class 1 handout (1) aptana  create a new presentation and stylesheetClass 1 handout (1) aptana  create a new presentation and stylesheet
Class 1 handout (1) aptana create a new presentation and stylesheet
Erin M. Kidwell
 
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
Erin M. Kidwell
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Erin M. Kidwell
 

More from Erin M. Kidwell (9)

Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
 
Class 3 create an absolute layout with css abs position (aptana)
Class 3  create an absolute layout with css abs position (aptana)Class 3  create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)
 
Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (...
Class 3 Intro to HTML/ CSS Gdi cincinnati   create a table layout with html (...Class 3 Intro to HTML/ CSS Gdi cincinnati   create a table layout with html (...
Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (...
 
Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Class 2 handout css exercises (2)
Class 2 handout css exercises (2)
 
Class 1 handout (2) html exercises
Class 1 handout (2) html exercisesClass 1 handout (2) html exercises
Class 1 handout (2) html exercises
 
Class 1 handout (1) aptana create a new presentation and stylesheet
Class 1 handout (1) aptana  create a new presentation and stylesheetClass 1 handout (1) aptana  create a new presentation and stylesheet
Class 1 handout (1) aptana create a new presentation and stylesheet
 
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
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

Class 2 handout (1) adding a css stylesheet

  • 1. Intro to HTML/CSS Class 2 Handout: Adding a CSS Page ● Now that we have our HTML page, we need to add a CSS page. ○ Click File->New from Template->CSS->Blank File ● Click File->Save As and save the file in a Project 1
  • 2. Choose the project that you just created, and save the file as “style.css” and click Ok. ● You should now have two files open in Aptana: index.html and style.css. ● In the <head> of index.html, add a link element ○ <link rel="stylesheet" href="style.css"> 2
  • 3. We are going to add a body element selector to our style.css page, and change the background color. ● Now we can make sure that both index.html and style.css are saved, and we can click the “Preview” icon to make sure our CSS and HTML page are linked correctly. 3