SlideShare a Scribd company logo
By Daniel Francis
CSS
- Cascading Style Sheets
- These are used to define how different HTML
  elements are displayed
- These were created to save work when changing the
  appearance of all the pages in a website.
- Saved under the extension .css
The use of text in HTML
 Different styles of text can be used to achieve a variety
  of goals in a webpage
 For example, more professional websites, such as those
  used by businesses, would typically use a basic, dark
  font which is easier to read and convey information.
Styling Text
 CSS can be implemented in various ways to style
  different text as you see fit
 Some examples of text properties that can be changed
  include: text size, text color, font, text alignment and
  text indentation
Font Size
 Text size can be set using pixels or the em size
  unit, which is recommended by the WC3 (1em = 16px).
  A font size tag looks as follows:

 h1 {font-size:30px}


      or

 h1 {font-size:2.5em}
Font color
 Font color can be changed using either a HEX value, a
  color name or an RGB value.

 h1 {color:#000000;}
 h1 {color:red;}
 h1 {color:rgb (255, 0, 0;}


 Usually if you are defining a color property, the
  background-color property should also be defined
EXAMPLES
 The next slide shows an example of some CSS code.
 Take note of how the different tags are given different
 properties to style individual sections of the website.
 By changing just these properties, entire sections of
 the website can be styled without editing the HTML
 code.
selector tag: used to select the
section being styled




property tag: used to select which
property is styled




   value tag: used to give a value to
   the property
This is the HTML code I have linked the CSS file to. The following slide displays what
the webpage looks like when displayed in a web browser
Styling text using css
Each paragraph has had a class selector applied to it.
  This allows the HTML file to find the selector in the
  CSS file and apply styling to the text.
Notice how the first and last paragraphs have exactly the
  same styling applied to them. This is because they
  both use the same class selector. If I wanted to change
  the style of these paragraphs, I would not need to
  recode both paragraphs, only the CSS code.
This use of CSS saves a great deal of time and energy if a
  web developer was tasked with restyling a webpage for
  a client.
All of the code in these files a valid in a variety of web
  browsers. The page has been tested in Mozilla
  Firefox, Internet Explorer and Google Chrome.

More Related Content

What's hot (18)

Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder se
Css Founder
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
Aditya Dwivedi
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
Ketan Ghumatkar
 
Web designing training in chandigarh
Web designing training in chandigarhWeb designing training in chandigarh
Web designing training in chandigarh
Sheetal Sharma
 
Higher Computing Science CSS
Higher Computing Science CSSHigher Computing Science CSS
Higher Computing Science CSS
Forrester High School
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
Sukrit Gupta
 
CSS
CSSCSS
CSS
seedinteractive
 
Cashcading stylesheets
Cashcading stylesheetsCashcading stylesheets
Cashcading stylesheets
reddivarihareesh
 
Css1
Css1Css1
Css1
Pulkit Tanwar
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
9574395990
 
David Weliver
David WeliverDavid Weliver
David Weliver
Philip Taylor
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
JTechTown
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
CSS- Cascading Style Sheet
CSS- Cascading Style SheetCSS- Cascading Style Sheet
CSS- Cascading Style Sheet
Codewizacademy
 
Html frames
Html framesHtml frames
Html frames
eShikshak
 
Raw plugin demonstration
Raw plugin demonstrationRaw plugin demonstration
Raw plugin demonstration
Elliott Richmond
 
Dream weaver
Dream weaverDream weaver
Dream weaver
Terry Murray
 
Dream weaver
Dream weaverDream weaver
Dream weaver
www.netgains.org
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder se
Css Founder
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
Aditya Dwivedi
 
Web designing training in chandigarh
Web designing training in chandigarhWeb designing training in chandigarh
Web designing training in chandigarh
Sheetal Sharma
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
9574395990
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
JTechTown
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
CSS- Cascading Style Sheet
CSS- Cascading Style SheetCSS- Cascading Style Sheet
CSS- Cascading Style Sheet
Codewizacademy
 

Similar to Styling text using css (20)

Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
RohanMistry15
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
JJFajardo1
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
QA TrainingHub
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSSCascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Css
CssCss
Css
actacademy
 
Css
CssCss
Css
actacademy
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
Vskills
 
Css
CssCss
Css
NIRMAL FELIX
 
Lecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType ClassificationLecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType Classification
ZahouAmel1
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
GmachImen
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
adelaticleanu
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
Sohail Christoper
 
Css Founder.com | Cssfounder Company
Css Founder.com | Cssfounder CompanyCss Founder.com | Cssfounder Company
Css Founder.com | Cssfounder Company
Css Founder
 
N5 CSS
N5 CSSN5 CSS
N5 CSS
Forrester High School
 
Css
CssCss
Css
shanmuga rajan
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3
Binu Paul
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
RohanMistry15
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
JJFajardo1
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
QA TrainingHub
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSSCascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
Vskills
 
Lecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType ClassificationLecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType Classification
ZahouAmel1
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
GmachImen
 
Css Founder.com | Cssfounder Company
Css Founder.com | Cssfounder CompanyCss Founder.com | Cssfounder Company
Css Founder.com | Cssfounder Company
Css Founder
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3
Binu Paul
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 

Recently uploaded (20)

UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
AI Trends - Mary Meeker
AI Trends - Mary MeekerAI Trends - Mary Meeker
AI Trends - Mary Meeker
Razin Mustafiz
 
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Eugene Fidelin
 
Content and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-TrainingContent and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-Training
Rustici Software
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Introducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRCIntroducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRC
Adtran
 
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationMicrosoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentation
Digitalmara
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 
Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!
cryptouniversityoffi
 
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCPMCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
Sambhav Kothari
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
Gihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai TechnologyGihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai Technology
zainkhurram1111
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Security Operations and the Defense Analyst - Splunk Certificate
Security Operations and the Defense Analyst - Splunk CertificateSecurity Operations and the Defense Analyst - Splunk Certificate
Security Operations and the Defense Analyst - Splunk Certificate
VICTOR MAESTRE RAMIREZ
 
Introducing Ensemble Cloudlet vRouter
Introducing Ensemble  Cloudlet vRouterIntroducing Ensemble  Cloudlet vRouter
Introducing Ensemble Cloudlet vRouter
Adtran
 
SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AISAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
Peter Spielvogel
 
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Nikki Chapple
 
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
AI Trends - Mary Meeker
AI Trends - Mary MeekerAI Trends - Mary Meeker
AI Trends - Mary Meeker
Razin Mustafiz
 
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Eugene Fidelin
 
Content and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-TrainingContent and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-Training
Rustici Software
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Introducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRCIntroducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRC
Adtran
 
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationMicrosoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentation
Digitalmara
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 
Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!
cryptouniversityoffi
 
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCPMCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
Sambhav Kothari
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
Gihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai TechnologyGihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai Technology
zainkhurram1111
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Security Operations and the Defense Analyst - Splunk Certificate
Security Operations and the Defense Analyst - Splunk CertificateSecurity Operations and the Defense Analyst - Splunk Certificate
Security Operations and the Defense Analyst - Splunk Certificate
VICTOR MAESTRE RAMIREZ
 
Introducing Ensemble Cloudlet vRouter
Introducing Ensemble  Cloudlet vRouterIntroducing Ensemble  Cloudlet vRouter
Introducing Ensemble Cloudlet vRouter
Adtran
 
SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AISAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
SAP Sapphire 2025 ERP1612 Enhancing User Experience with SAP Fiori and AI
Peter Spielvogel
 
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Nikki Chapple
 

Styling text using css

  • 2. CSS - Cascading Style Sheets - These are used to define how different HTML elements are displayed - These were created to save work when changing the appearance of all the pages in a website. - Saved under the extension .css
  • 3. The use of text in HTML  Different styles of text can be used to achieve a variety of goals in a webpage  For example, more professional websites, such as those used by businesses, would typically use a basic, dark font which is easier to read and convey information.
  • 4. Styling Text  CSS can be implemented in various ways to style different text as you see fit  Some examples of text properties that can be changed include: text size, text color, font, text alignment and text indentation
  • 5. Font Size  Text size can be set using pixels or the em size unit, which is recommended by the WC3 (1em = 16px). A font size tag looks as follows:  h1 {font-size:30px} or  h1 {font-size:2.5em}
  • 6. Font color  Font color can be changed using either a HEX value, a color name or an RGB value.  h1 {color:#000000;}  h1 {color:red;}  h1 {color:rgb (255, 0, 0;}  Usually if you are defining a color property, the background-color property should also be defined
  • 7. EXAMPLES  The next slide shows an example of some CSS code. Take note of how the different tags are given different properties to style individual sections of the website. By changing just these properties, entire sections of the website can be styled without editing the HTML code.
  • 8. selector tag: used to select the section being styled property tag: used to select which property is styled value tag: used to give a value to the property
  • 9. This is the HTML code I have linked the CSS file to. The following slide displays what the webpage looks like when displayed in a web browser
  • 11. Each paragraph has had a class selector applied to it. This allows the HTML file to find the selector in the CSS file and apply styling to the text. Notice how the first and last paragraphs have exactly the same styling applied to them. This is because they both use the same class selector. If I wanted to change the style of these paragraphs, I would not need to recode both paragraphs, only the CSS code. This use of CSS saves a great deal of time and energy if a web developer was tasked with restyling a webpage for a client.
  • 12. All of the code in these files a valid in a variety of web browsers. The page has been tested in Mozilla Firefox, Internet Explorer and Google Chrome.