SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Web Authoring

      Topic 4 -
Adding Style to HTML
Objectives
Students should able to:
1. How to load html text and cascading
   style sheets.
2. Apply style sheets in HTML
   documents.
Style Sheet
Any style sheet language may be used
with HTML.

The syntax of style data depends on the
style sheet language.

Use the META element to set the default
style sheet language for a document.
Style Sheet
Author should put the following declaration
in the HEAD of their document when using
Cascading Style Sheet (CSS):

<META http-equiv="Content-Style-Type"
content="text/css">.
Why use Style Sheet?
Style sheets make it easy to specify:
  • the amount of white space between
     text lines,
  • the amount lines are indented,
  • the colours used for the text and the
     backgrounds,
  • the font size and style, and
  • a host of other details.
Why use Style Sheet?
For example:
   P.special {
   color : green;border: solid red;
   }

This sets the text colour of a paragraph to
green and surrounds it with a solid red
border.
Types of Style Sheet
1. Flexible placement of style information:

Placing style sheets in separate files
makes them easy to reuse.
It is useful to include rendering
instructions within the document to at
the start of the document to make it
easier to manage style.
Types of Style Sheet
2. Cascading
Capability provided by CSS to allow style
information from several sources to be
blended together.
The cascade defines an ordered sequence of
style sheets where rules in later sheets have
greater precedence than earlier ones.

Weitere ähnliche Inhalte

Was ist angesagt? (7)

Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
 
Creating and Theming Custom Content Types
Creating and Theming Custom Content TypesCreating and Theming Custom Content Types
Creating and Theming Custom Content Types
 
Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
 
Need for css,introduction to css & basic syntax wt
Need for css,introduction to css &  basic syntax wtNeed for css,introduction to css &  basic syntax wt
Need for css,introduction to css & basic syntax wt
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
 

Andere mochten auch

Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and link
CK Yang
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formatting
CK Yang
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basics
CK Yang
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in html
CK Yang
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
CK Yang
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
CK Yang
 
Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for links
CK Yang
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelines
CK Yang
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browser
CK Yang
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
CK Yang
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheets
CK Yang
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
CK Yang
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
CK Yang
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meet
CK Yang
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
CK Yang
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
CK Yang
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contents
CK Yang
 
Web topic 3 html format tags
Web topic 3  html format tagsWeb topic 3  html format tags
Web topic 3 html format tags
CK Yang
 
Web topic 1 internet
Web topic 1  internetWeb topic 1  internet
Web topic 1 internet
CK Yang
 
Web topic 26 browser compatibilty and security
Web topic 26  browser compatibilty and securityWeb topic 26  browser compatibilty and security
Web topic 26 browser compatibilty and security
CK Yang
 

Andere mochten auch (20)

Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and link
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formatting
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basics
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in html
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
 
Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for links
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelines
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browser
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheets
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meet
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contents
 
Web topic 3 html format tags
Web topic 3  html format tagsWeb topic 3  html format tags
Web topic 3 html format tags
 
Web topic 1 internet
Web topic 1  internetWeb topic 1  internet
Web topic 1 internet
 
Web topic 26 browser compatibilty and security
Web topic 26  browser compatibilty and securityWeb topic 26  browser compatibilty and security
Web topic 26 browser compatibilty and security
 

Ähnlich wie Web topic 4 style in html

Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
Sutinder Mann
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 

Ähnlich wie Web topic 4 style in html (20)

CASCADING STYLE SHEETS (CSS).pptx
CASCADING STYLE SHEETS (CSS).pptxCASCADING STYLE SHEETS (CSS).pptx
CASCADING STYLE SHEETS (CSS).pptx
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
lecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptxlecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptx
 
Css
CssCss
Css
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
 
Publishing xml
Publishing xmlPublishing xml
Publishing xml
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Css
CssCss
Css
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
Css introduction
Css introductionCss introduction
Css introduction
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
HTML STYLES
HTML STYLESHTML STYLES
HTML STYLES
 
Css starting
Css startingCss starting
Css starting
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Css present
Css presentCss present
Css present
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdf
 
Css
CssCss
Css
 
Css Basics
Css BasicsCss Basics
Css Basics
 

Mehr von CK Yang

Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
CK Yang
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websites
CK Yang
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote site
CK Yang
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web forms
CK Yang
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascript
CK Yang
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
CK Yang
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
CK Yang
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in css
CK Yang
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
CK Yang
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflow
CK Yang
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
CK Yang
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation tools
CK Yang
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validation
CK Yang
 

Mehr von CK Yang (13)

Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websites
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote site
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web forms
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascript
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in css
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflow
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation tools
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validation
 

Web topic 4 style in html

  • 1. Web Authoring Topic 4 - Adding Style to HTML
  • 2. Objectives Students should able to: 1. How to load html text and cascading style sheets. 2. Apply style sheets in HTML documents.
  • 3. Style Sheet Any style sheet language may be used with HTML. The syntax of style data depends on the style sheet language. Use the META element to set the default style sheet language for a document.
  • 4. Style Sheet Author should put the following declaration in the HEAD of their document when using Cascading Style Sheet (CSS): <META http-equiv="Content-Style-Type" content="text/css">.
  • 5. Why use Style Sheet? Style sheets make it easy to specify: • the amount of white space between text lines, • the amount lines are indented, • the colours used for the text and the backgrounds, • the font size and style, and • a host of other details.
  • 6. Why use Style Sheet? For example: P.special { color : green;border: solid red; } This sets the text colour of a paragraph to green and surrounds it with a solid red border.
  • 7. Types of Style Sheet 1. Flexible placement of style information: Placing style sheets in separate files makes them easy to reuse. It is useful to include rendering instructions within the document to at the start of the document to make it easier to manage style.
  • 8. Types of Style Sheet 2. Cascading Capability provided by CSS to allow style information from several sources to be blended together. The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones.