SlideShare une entreprise Scribd logo
1  sur  5
Unit III: Adding Styles
and Interactivity Using
  CSS and Javascript
The CSS text Properties
Allow you to add layout to
 text. The following are the
 different text properties: text-
 indent, text-align, text-
 decoration, letter-spacing,
 and text-transform.
Property          Description                              Example



Text-indent       Applies first line indent to             p{text-indent: 30px;}
                  paragraph
Text-align        Aligns text to left, right, center, or   p{text-align: right;}
                  both sides (justify)                     p{text-align: center;}
                                                           p{text-align: justify;}

Text-decoration   Applies text effects namely              h3{text-decoration:
                  underline, overline and line             underline;}
                  through                                  H2{text-decoration:
                                                           overline;}
Letter-spacing    Specifies spacing between text           h1{letter-spacing: 5px;}
                  characters                               p{letter-spacing: 2px;}
Text-transform    Capitalizes the first letter of each     h2{text-transform:
                  word (capitalize), converts all          uppercase;}
                  letters to uppercase (uppercase),        li{text-transform:
                  to lowercase (lowercase) or              lowercase;}
                  displays text as it appears in the
                  HTML code (none)
COMPUEXERCISES/QUIZ

1. Write the CSS code to align text to the
  center.
2. Write the CSS code to underline a text.
3. Write the CSS code to converts all letters to
  uppercase.
4. Write the CSS code to set the spacing to
  15px.
5. Write the CSS code to indent a paragraph
  t0 25px.
ANSWER

1. {text-align: center ;}
2. {text-decoration: underline ;}
3. {text-transform: uppercase ;}
4. {letter-spacing: 15px ;}
5. {text-indent: 25px ;}

Contenu connexe

En vedette

BEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADEBEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADErana usman
 
CSS Dasar #5 : Text Styling
CSS Dasar #5 : Text StylingCSS Dasar #5 : Text Styling
CSS Dasar #5 : Text StylingSandhika Galih
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnKoji Ishimoto
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley
 
Sane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSSane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSLee Cheneler
 
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)Aaron Gustafson
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSSandhika Galih
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : PositionSandhika Galih
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelSandhika Galih
 
Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?M. Jackson Wilkinson
 

En vedette (17)

CSS Secrets - Lea Verou
CSS Secrets - Lea VerouCSS Secrets - Lea Verou
CSS Secrets - Lea Verou
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Js: master prototypes
Js: master prototypesJs: master prototypes
Js: master prototypes
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Javascript: master this
Javascript: master thisJavascript: master this
Javascript: master this
 
BEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADEBEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADE
 
CSS Dasar #5 : Text Styling
CSS Dasar #5 : Text StylingCSS Dasar #5 : Text Styling
CSS Dasar #5 : Text Styling
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
Sane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSSane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSS
 
Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)Transcendent Design with CSS & JavaScript (Web Directions North '07)
Transcendent Design with CSS & JavaScript (Web Directions North '07)
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
 
Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?
 

Similaire à Css text property (20)

Css font properties
Css font propertiesCss font properties
Css font properties
 
5th Lecture- WEB ENGINEERING basics.pptx
5th Lecture- WEB ENGINEERING basics.pptx5th Lecture- WEB ENGINEERING basics.pptx
5th Lecture- WEB ENGINEERING basics.pptx
 
CSS
CSSCSS
CSS
 
Css font
Css fontCss font
Css font
 
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham SiddiquiBuilding Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 6 by Muhammad Ehtisham Siddiqui
 
Building Next Generation Websites Session6
Building Next Generation Websites Session6Building Next Generation Websites Session6
Building Next Generation Websites Session6
 
Css Text Formatting
Css Text FormattingCss Text Formatting
Css Text Formatting
 
CSS Presentation Notes.pptx
CSS Presentation Notes.pptxCSS Presentation Notes.pptx
CSS Presentation Notes.pptx
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
 
Advance Web Designing - Lecture 03 / 30
Advance Web Designing - Lecture 03 / 30Advance Web Designing - Lecture 03 / 30
Advance Web Designing - Lecture 03 / 30
 
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3
 
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets)CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets)
 
CSS
CSSCSS
CSS
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
 
05. session 05 introducing css
05. session 05   introducing css05. session 05   introducing css
05. session 05 introducing css
 
Sass
SassSass
Sass
 
Css text
Css   textCss   text
Css text
 
Function of microsoft word
Function of microsoft wordFunction of microsoft word
Function of microsoft word
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 

Plus de Jesus Obenita Jr.

Plus de Jesus Obenita Jr. (20)

Organization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management TheoryOrganization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management Theory
 
Organization and management 2 Management Function
Organization and management 2 Management FunctionOrganization and management 2 Management Function
Organization and management 2 Management Function
 
Organization and management 1
Organization and management 1Organization and management 1
Organization and management 1
 
Designing web page marquee and img tag
Designing web page  marquee and img tagDesigning web page  marquee and img tag
Designing web page marquee and img tag
 
Ms excel 2013 formatting worksheets
Ms excel 2013 formatting worksheetsMs excel 2013 formatting worksheets
Ms excel 2013 formatting worksheets
 
Ms excel 2013 data management
Ms excel 2013 data managementMs excel 2013 data management
Ms excel 2013 data management
 
Microsoft Excel introduction
Microsoft Excel introductionMicrosoft Excel introduction
Microsoft Excel introduction
 
Word 2013 working with pictures
Word 2013 working with picturesWord 2013 working with pictures
Word 2013 working with pictures
 
Word 2013 Formatting Page
Word 2013 Formatting PageWord 2013 Formatting Page
Word 2013 Formatting Page
 
Word 2013 8
Word 2013 8Word 2013 8
Word 2013 8
 
Ms word 2013 7
Ms word 2013 7Ms word 2013 7
Ms word 2013 7
 
Ms word 2013 6
Ms word 2013 6Ms word 2013 6
Ms word 2013 6
 
Ms word 2013 4
Ms word 2013 4Ms word 2013 4
Ms word 2013 4
 
Ms word 2013 2
Ms word 2013 2Ms word 2013 2
Ms word 2013 2
 
Ms word 2013
Ms word 2013Ms word 2013
Ms word 2013
 
Parts of the ms word 2013 screen and
Parts of the ms word 2013 screen andParts of the ms word 2013 screen and
Parts of the ms word 2013 screen and
 
Word processor
Word processorWord processor
Word processor
 
Session 2 test construction.mt's
Session 2   test construction.mt'sSession 2   test construction.mt's
Session 2 test construction.mt's
 
Cooking ingredients
Cooking ingredientsCooking ingredients
Cooking ingredients
 
Color theory
Color theoryColor theory
Color theory
 

Dernier

Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfchloefrazer622
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 

Dernier (20)

Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 

Css text property

  • 1. Unit III: Adding Styles and Interactivity Using CSS and Javascript
  • 2. The CSS text Properties Allow you to add layout to text. The following are the different text properties: text- indent, text-align, text- decoration, letter-spacing, and text-transform.
  • 3. Property Description Example Text-indent Applies first line indent to p{text-indent: 30px;} paragraph Text-align Aligns text to left, right, center, or p{text-align: right;} both sides (justify) p{text-align: center;} p{text-align: justify;} Text-decoration Applies text effects namely h3{text-decoration: underline, overline and line underline;} through H2{text-decoration: overline;} Letter-spacing Specifies spacing between text h1{letter-spacing: 5px;} characters p{letter-spacing: 2px;} Text-transform Capitalizes the first letter of each h2{text-transform: word (capitalize), converts all uppercase;} letters to uppercase (uppercase), li{text-transform: to lowercase (lowercase) or lowercase;} displays text as it appears in the HTML code (none)
  • 4. COMPUEXERCISES/QUIZ 1. Write the CSS code to align text to the center. 2. Write the CSS code to underline a text. 3. Write the CSS code to converts all letters to uppercase. 4. Write the CSS code to set the spacing to 15px. 5. Write the CSS code to indent a paragraph t0 25px.
  • 5. ANSWER 1. {text-align: center ;} 2. {text-decoration: underline ;} 3. {text-transform: uppercase ;} 4. {letter-spacing: 15px ;} 5. {text-indent: 25px ;}