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)

FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FMESupporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdfENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
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
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
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
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
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
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FMESupporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdfENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
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
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
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
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
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