SlideShare a Scribd company logo
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 (20)

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
 
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
 
Css
CssCss
Css
Jahid Blackrose
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
mlincol2
 
Full
FullFull
Full
sanjaykhan33
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
 
Learn CSS From Scratch
Learn CSS From ScratchLearn CSS From Scratch
Learn CSS From Scratch
ecobold
 
6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
Osama Ghandour Geris
 
BITM3730 9-20.pptx
BITM3730 9-20.pptxBITM3730 9-20.pptx
BITM3730 9-20.pptx
MattMarino13
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
MattMarino13
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
vedaste
 
Module 3-Introduction to CSS (Chapter 3).pptx
Module 3-Introduction to CSS (Chapter 3).pptxModule 3-Introduction to CSS (Chapter 3).pptx
Module 3-Introduction to CSS (Chapter 3).pptx
SherwinSangalang3
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
Dr.Lokesh Gagnani
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
prathur68
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
Tm 1st quarter - 3rd meeting
Tm   1st quarter - 3rd meetingTm   1st quarter - 3rd meeting
Tm 1st quarter - 3rd meeting
Esmeraldo Jr Guimbarda
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
tsengsite
 
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
 
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
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
mlincol2
 
Learn CSS From Scratch
Learn CSS From ScratchLearn CSS From Scratch
Learn CSS From Scratch
ecobold
 
BITM3730 9-20.pptx
BITM3730 9-20.pptxBITM3730 9-20.pptx
BITM3730 9-20.pptx
MattMarino13
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
MattMarino13
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
vedaste
 
Module 3-Introduction to CSS (Chapter 3).pptx
Module 3-Introduction to CSS (Chapter 3).pptxModule 3-Introduction to CSS (Chapter 3).pptx
Module 3-Introduction to CSS (Chapter 3).pptx
SherwinSangalang3
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
prathur68
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
tsengsite
 

More from Erin M. Kidwell (8)

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 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
 
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 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
 
Ad

Recently uploaded (20)

TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
Ad

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