Difference between revisions of "HTML/C2/Styles-and-CSS-in-HTML/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script:'''Styles and CSS</span> '''Author:'''</span> Praveen S</span> '''Domain Reviewer:'''</span> M.Deivamani</span> '''Novice Reviewer:'''Madhulika G ''...")
 
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
−
'''Title of the script:'''Styles and CSS</span>
+
'''Title of the script:'''Styles and CSS
  
−
'''Author:'''</span> Praveen S</span>
+
'''Author:''' Praveen S
  
−
'''Domain Reviewer:'''</span> M.Deivamani</span>
+
'''Domain Reviewer:''' M.Deivamani
  
 
'''Novice Reviewer:'''Madhulika G
 
'''Novice Reviewer:'''Madhulika G
Line 21: Line 21:
 
|| Slide 2: Learning Objectives  
 
|| Slide 2: Learning Objectives  
 
|| In this tutorial we will learn about:
 
|| In this tutorial we will learn about:
−
*Styling the content in '''HTML''' using '''style''' as a '''Tag''' and an '''Attribute '''in '''HTML'''
+
*Styling the content in '''HTML''' using '''style''' as a '''Tag''' and an '''Attribute'''
 +
 
 
We will also learn about '''CSS'''.
 
We will also learn about '''CSS'''.
  
 
|-
 
|-
 
|| Slide 3: Prerequisite  
 
|| Slide 3: Prerequisite  
−
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and '''Web Browser'''.
+
|| To practise this tutorial, you should know to use  
 +
any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.
 +
 
 
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
 
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
  
 
|-
 
|-
 
|| Slide 4:  System Requirements  
 
|| Slide 4:  System Requirements  
−
|| To record this tutorial, I’m using *'''Ubuntu Linux 16.04 OS'''
+
|| To record this tutorial, I’m using  
−
* <div style="margin-left:1.235cm;margin-right:0cm;">'''HTML5'''
+
 
−
* <div style="margin-left:1.235cm;margin-right:0cm;">'''gedit Text Editor '''and
+
*'''Ubuntu Linux 16.04 OS'''
−
* <div style="margin-left:1.235cm;margin-right:0cm;">'''Firefox web browser'''
+
* '''HTML5'''
 +
* '''gedit Text Editor '''and
 +
* '''Firefox web browser'''
 +
 
 +
However you may, use any other '''editor''' or ''' web browser''' of your choice.
  
−
However you may, use any other '''editor''' or '''browser''' of your choice.
 
 
|-
 
|-
 
|| Slide 5: Code Files
 
|| Slide 5: Code Files
 
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.
 
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.
 +
 
Please download and extract them.
 
Please download and extract them.
  
 
|-
 
|-
 
|| Slide 6: Styles
 
|| Slide 6: Styles
−
|| *'''Styles '''allows us to define the presentation of '''HTML elements'''.
+
||  
 +
*'''Styles '''allows us to define the presentation of the '''HTML elements'''.
 
*'''Styles''' in '''HTML''' can be defined in 3 ways:
 
*'''Styles''' in '''HTML''' can be defined in 3 ways:
−
**Inline attribute for the '''tags'''
+
**'''Inline attribute''' for the '''tags'''
 
**Individual '''tag '''and
 
**Individual '''tag '''and
 
**External style sheet ('''CSS''')
 
**External style sheet ('''CSS''')
Line 54: Line 62:
 
|-
 
|-
 
|| Slide 7: Style attribute
 
|| Slide 7: Style attribute
−
|| *'''Style''' is an '''attribute''' that specifies the '''style''' of an '''element'''.
+
||  
 +
*'''Style''' is an '''attribute''' that specifies the '''style''' of an '''element'''.
 
*For eg: '''font-family, font-size, colour''', etc.
 
*For eg: '''font-family, font-size, colour''', etc.
 
*'''style attribute''' decides how the content will be displayed.
 
*'''style attribute''' decides how the content will be displayed.
Line 61: Line 70:
 
|-
 
|-
 
|| Slide 7: Style attribute
 
|| Slide 7: Style attribute
−
|| This is the syntax:
+
 
−
'''<tag-name style=”Property-Name:Value”> Content </tag-name>'''
+
<nowiki> <tag-name style=”Property-Name:Value”> Content </tag-name> </nowiki>
 +
|| This is the syntax.
  
 
|-
 
|-
 
|| Slide 7: Style attribute
 
|| Slide 7: Style attribute
 +
 +
 +
<nowiki> <tag-name style="Property1:Value; </nowiki>
 +
 +
<nowiki> Property2:Value"> Content </tag-name> </nowiki>
 
|| We can add more '''properties''' with the help of a '''semi-colon''', as shown here.
 
|| We can add more '''properties''' with the help of a '''semi-colon''', as shown here.
−
'''<tag-name style=”Property1:Value;'''
+
 
−
'''Property2:Value”> Content </tag-name>'''
+
  
 
Let’s try this out.
 
Let’s try this out.
Line 74: Line 88:
 
|-
 
|-
 
|| Open '''MyFirstPage.html '''in''' gedit'''
 
|| Open '''MyFirstPage.html '''in''' gedit'''
−
|| We will open our file '''MyFirstPage.html, '''which we created earlier.
+
|| We will open our '''MyFirstPage.html, '''which we created earlier.
  
−
The same is available in the </span>'''Code Files'''</span> link.</span>
+
The same is available in the '''Code Files''' link.
  
 
|-
 
|-
 
|| Point to Body tag
 
|| Point to Body tag
 
|| Earlier in this series, we had defined the '''style attribute''' for the '''body tag'''.
 
|| Earlier in this series, we had defined the '''style attribute''' for the '''body tag'''.
 +
 
And we had set the background color as sky-blue using the '''style attribute'''.
 
And we had set the background color as sky-blue using the '''style attribute'''.
  
Line 86: Line 101:
 
|| Open '''MyFirstPage.html '''in '''Firefox'''
 
|| Open '''MyFirstPage.html '''in '''Firefox'''
 
|| Switch to the folder where the file is saved.
 
|| Switch to the folder where the file is saved.
 +
 
Right-click on the filename and open in the '''web browser.'''
 
Right-click on the filename and open in the '''web browser.'''
  
Line 103: Line 119:
 
|| Type:
 
|| Type:
 
<nowiki>; text-align:center</nowiki>
 
<nowiki>; text-align:center</nowiki>
 +
 
|| We will also add one more '''style property''' called '''text align'''.
 
|| We will also add one more '''style property''' called '''text align'''.
−
Next to the word '''yellow, '''before the '''close quote''' type-
+
 
 +
Now next to the word '''yellow''', type-
 +
 
 
'''semi-colon space text hyphen align colon centre'''
 
'''semi-colon space text hyphen align colon centre'''
  
 
|-
 
|-
 
|| Press Ctrl + S keys
 
|| Press Ctrl + S keys
−
|| Save the code file.
+
|| Save the file.
  
 
|-
 
|-
Line 117: Line 136:
 
|-
 
|-
 
|| Circle the background with the mouse
 
|| Circle the background with the mouse
 +
 
Point to the text.
 
Point to the text.
 
|| Observe that the '''background color '''has changed from '''sky-blue''' to '''yellow'''.
 
|| Observe that the '''background color '''has changed from '''sky-blue''' to '''yellow'''.
 +
 
And all the content on the page is '''center aligned.'''
 
And all the content on the page is '''center aligned.'''
  
Line 124: Line 145:
 
|| Point to Body tag in the code
 
|| Point to Body tag in the code
 
|| The '''style attributes, background color '''and '''text''' '''align''' are defined for''' body tag.'''
 
|| The '''style attributes, background color '''and '''text''' '''align''' are defined for''' body tag.'''
 +
 
Hence, they will be applied to all the content within the '''body'''.
 
Hence, they will be applied to all the content within the '''body'''.
−
 
−
|-
 
−
|| Switch to Gedit
 
−
|| Switch back to the code.
 
  
 
|-
 
|-
 
|| Type: style="text-align:left"
 
|| Type: style="text-align:left"
 
|| Now let us set the '''text align attribute''' for the first '''paragraph''' '''tag'''.
 
|| Now let us set the '''text align attribute''' for the first '''paragraph''' '''tag'''.
 +
 
Locate the line '''Mumbai Farmer’s Market. '''
 
Locate the line '''Mumbai Farmer’s Market. '''
 +
 
After the '''title '''type:
 
After the '''title '''type:
−
'''space style equal to open quotes text hyphen align colon left close quotes'''
+
 
 +
'''space style equal to within double quotes text hyphen align colon left'''
  
 
|-
 
|-
 
|| Press Ctrl + S keys
 
|| Press Ctrl + S keys
−
|| Save the code file.
+
|| Save the code.
  
 
|-
 
|-
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh
 
|| Then switch to the browser and refresh the page.
 
|| Then switch to the browser and refresh the page.
 +
 
Observe the changes.
 
Observe the changes.
  
 
|-
 
|-
 
|| Point to the body tag
 
|| Point to the body tag
 +
 
Point to p tag with style attribute
 
Point to p tag with style attribute
 
|| Earlier we had '''center aligned '''the whole content inside the '''body section'''.
 
|| Earlier we had '''center aligned '''the whole content inside the '''body section'''.
 +
 
But now, the '''style attribute '''defined within the '''p tag''' overrides the earlier '''properties'''.
 
But now, the '''style attribute '''defined within the '''p tag''' overrides the earlier '''properties'''.
  
Line 155: Line 179:
 
||  
 
||  
 
|| This is how the '''inline style attribute '''works.  
 
|| This is how the '''inline style attribute '''works.  
 +
 
It can be applied to all '''HTML''' '''elements'''.
 
It can be applied to all '''HTML''' '''elements'''.
  
Line 160: Line 185:
 
|| Slide 8: Style Tag
 
|| Slide 8: Style Tag
 
|| Another method to define the '''styles''' is by using the '''style tag'''.
 
|| Another method to define the '''styles''' is by using the '''style tag'''.
 +
 
*It defines the '''styles''' for the whole document.
 
*It defines the '''styles''' for the whole document.
 
*We can have many '''style''' '''tags''' for a single document.
 
*We can have many '''style''' '''tags''' for a single document.
Line 167: Line 193:
 
|-
 
|-
 
|| Slide 8: Style Tag
 
|| Slide 8: Style Tag
 +
 +
<nowiki> <style> </nowiki>
 +
<nowiki> Tag-name {property:value;} </nowiki>
 +
<nowiki> </style> </nowiki>
 +
 
|| This is the syntax for the '''style tag'''
 
|| This is the syntax for the '''style tag'''
−
'''<style>'''
 
−
'''Tag-name {property:value;}'''
 
−
'''</style>'''
 
  
 
|-
 
|-
 
|| Slide 8: Style Tag
 
|| Slide 8: Style Tag
−
|| *We can add '''styles''' for multiple '''tags'''
+
||  
 +
*We can add '''styles''' for multiple '''tags'''
 
*And multiple '''attributes''' for '''tags, '''as well
 
*And multiple '''attributes''' for '''tags, '''as well
  
Line 184: Line 213:
 
|| Point to Body tag
 
|| Point to Body tag
 
|| I will delete the '''style attribute '''which I had written for the '''body tag.'''
 
|| I will delete the '''style attribute '''which I had written for the '''body tag.'''
−
Also delete the '''style attribute''' for the '''paragraph tag.'''
+
 
 +
And also delete the '''style attribute''' for the '''paragraph tag.'''
  
 
|-
 
|-
 
|| Type:  
 
|| Type:  
 
<style>
 
<style>
 +
 
body {  
 
body {  
 +
 
background-color:pink;  
 
background-color:pink;  
 +
 
text-align:center;
 
text-align:center;
 +
 
}
 
}
 
</style>
 
</style>
Line 202: Line 236:
 
|-
 
|-
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh
−
|| And switch to the browser and refresh the page.
+
|| Switch to the browser and refresh the page.
 +
 
 
Observe the changes in the displayed content.
 
Observe the changes in the displayed content.
  
Line 211: Line 246:
 
|-
 
|-
 
|| Type inside style tag:
 
|| Type inside style tag:
 +
 
p {
 
p {
 +
 
text-align:left;
 
text-align:left;
 +
 
}
 
}
 
|| In the '''style tag''', type following code
 
|| In the '''style tag''', type following code
Line 222: Line 260:
 
|-
 
|-
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh
−
|| Go to the browser and refresh the page.
+
|| Now go to the browser and refresh the page.
 +
 
 
Notice that the content inside both the '''paragraph tags''' appear '''left aligned.'''
 
Notice that the content inside both the '''paragraph tags''' appear '''left aligned.'''
  
Line 232: Line 271:
 
||  
 
||  
 
|| Now let us change the '''style''' for the first '''paragraph tag'''.
 
|| Now let us change the '''style''' for the first '''paragraph tag'''.
 +
 +
Switch to the editor.
 +
 
Inside the first '''p tag''' next to '''title''' type  
 
Inside the first '''p tag''' next to '''title''' type  
−
'''style="text-align:center"'''
+
 
 +
'''space style''' is equal to within double quotes '''text hyphen align colon center'''
  
 
|-
 
|-
Line 242: Line 285:
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh the page.
 
|| Switch to the browser and refresh the page.
 +
 
Now the content within the first '''paragraph tag '''appears '''center aligned.'''
 
Now the content within the first '''paragraph tag '''appears '''center aligned.'''
 +
 
This is because the '''inline style attribute '''overrides the global '''style property'''.
 
This is because the '''inline style attribute '''overrides the global '''style property'''.
  
 
|-
 
|-
 
|| Slide 9: Common Style properties
 
|| Slide 9: Common Style properties
 +
 
Point at the examples  
 
Point at the examples  
−
|| Some of the other common '''style properties''' are
+
|| Some of the common '''style properties''' are
 +
 
 
*'''background-color''' to set the background
 
*'''background-color''' to set the background
 
*'''color''' to set the font color
 
*'''color''' to set the font color
 
*'''font-family''' to set the font
 
*'''font-family''' to set the font
−
*'''font-size''' to set the font text size
+
*'''font-size''' to set the font size
 
*'''text-align''' for text alignment
 
*'''text-align''' for text alignment
  
Line 260: Line 307:
 
|| Slide 10: CSS
 
|| Slide 10: CSS
 
|| Now we will learn about the '''external style sheets.'''
 
|| Now we will learn about the '''external style sheets.'''
−
*'''External styles''' are defined with the help of '''CSS'''
+
 
−
*'''CSS''' stands for '''Cascading''' '''Style''' '''Sheet'''
+
*'''External style sheets''' are defined with the help of '''CSS'''
 +
*'''CSS''' stands for '''Cascading Style Sheet'''
 
*It is a file in which we can define the '''styles''' for multiple '''html''' pages
 
*It is a file in which we can define the '''styles''' for multiple '''html''' pages
 
*'''CSS''' file will not have any '''html''' code
 
*'''CSS''' file will not have any '''html''' code
Line 267: Line 315:
 
|-
 
|-
 
|| Slide 10: CSS
 
|| Slide 10: CSS
−
|| *We have to include the '''CSS''' file in the '''head''' section with the help of '''link tag'''
+
 
−
*This is the syntax:
+
<nowiki> <link rel="stylesheet" href="filename.css"></nowiki>
−
'''<link rel="stylesheet" href="filename.css">'''
+
||  
 +
*We have to include the '''CSS''' file in the '''head''' section with the help of '''link tag'''
 +
*This is the syntax.
  
 
|-
 
|-
Line 278: Line 328:
 
|-
 
|-
 
|| Show mystyle.css in gedit
 
|| Show mystyle.css in gedit
−
body {
 
−
background-color:Aquamarine;
 
−
text-align:center;
 
−
}
 
−
p {
 
−
text-align:center;
 
−
}
 
 
|| For this demonstration, I have already created a '''CSS''' file named '''mystyle.css'''
 
|| For this demonstration, I have already created a '''CSS''' file named '''mystyle.css'''
−
The same is available in the </span>'''Code Files'''</span> link.</span>
+
 
 +
The same is available in the '''Code Files''' link.
 +
 
 
You can see only the '''style''' definitions which we have seen in the previous example.
 
You can see only the '''style''' definitions which we have seen in the previous example.
  
Line 292: Line 337:
 
|| Remove the style section
 
|| Remove the style section
 
|| In our '''html''' file, remove the '''style''' defined within the '''style tags'''.
 
|| In our '''html''' file, remove the '''style''' defined within the '''style tags'''.
 +
 
Also remove the '''inline style''' for the first '''paragraph tag.'''
 
Also remove the '''inline style''' for the first '''paragraph tag.'''
  
 
|-
 
|-
 
|| Press '''Ctrl + S'''
 
|| Press '''Ctrl + S'''
−
|| Now save the code.
+
|| Now save the file.
  
 
|-
 
|-
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh the page.
 
|| Switch to the browser and refresh the page.
 +
 
Notice that now our page is displayed without any '''styles'''.
 
Notice that now our page is displayed without any '''styles'''.
  
 
|-
 
|-
 
|| Type <link rel="stylesheet" href="mystyle.css">
 
|| Type <link rel="stylesheet" href="mystyle.css">
 +
 
|| Now in our '''html''' file under '''head''' section, after the '''title tag''' line, let us include the '''css''' file.
 
|| Now in our '''html''' file under '''head''' section, after the '''title tag''' line, let us include the '''css''' file.
−
Type:
+
 
−
'''<link rel="stylesheet" href="mystyle.css">'''
+
Type the following code
  
 
|-
 
|-
Line 315: Line 363:
 
|-
 
|-
 
|| Slide 11: Note
 
|| Slide 11: Note
 +
 +
Eg) '''<nowiki> <link rel="stylesheet" href="Desktop/CSS/mystyle.css"> </nowiki>'''
 
|| Make sure that your '''html''' and '''css''' files are kept in the same folder.
 
|| Make sure that your '''html''' and '''css''' files are kept in the same folder.
 +
 
If the '''css''' file is in a different folder, then mention the full path for the file inside the code.
 
If the '''css''' file is in a different folder, then mention the full path for the file inside the code.
−
Eg) '''<link rel="stylesheet" href="Desktop/CSS/mystyle.css">'''
+
 
 +
Example.
  
 
|-
 
|-
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh
 
|| Switch to the browser and refresh the page.
 
|| Switch to the browser and refresh the page.
 +
 
Now the new '''style attributes''' are applied to our page.
 
Now the new '''style attributes''' are applied to our page.
  
Line 327: Line 380:
 
|| Switch to mystyle.css
 
|| Switch to mystyle.css
 
|| Let’s make some changes to the '''css'''.
 
|| Let’s make some changes to the '''css'''.
 +
 
Switch to the '''mystyle.css''' file
 
Switch to the '''mystyle.css''' file
  
 
|-
 
|-
 
|| Change center to left >> Remove p style section
 
|| Change center to left >> Remove p style section
−
|| Now change '''alignment''' of the '''body''' to '''left '''and remove the '''paragraph alignment '''as well.
+
|| Now change the '''alignment''' of the '''body''' to '''left '''and remove the '''paragraph alignment '''as well.
  
 
|-
 
|-
Line 348: Line 402:
 
||  
 
||  
 
|| With this, we come to the end of this tutorial.  
 
|| With this, we come to the end of this tutorial.  
 +
 
Let us summarise.
 
Let us summarise.
  
Line 353: Line 408:
 
|| Slide 12: Summary  
 
|| Slide 12: Summary  
 
|| In this tutorial, we have learnt about  
 
|| In this tutorial, we have learnt about  
 +
 
*'''Style''' as an '''attribute (inline)'''
 
*'''Style''' as an '''attribute (inline)'''
 
*'''Style '''as a '''tag (internal)'''
 
*'''Style '''as a '''tag (internal)'''
Line 360: Line 416:
 
|| Slide 13: Assignment
 
|| Slide 13: Assignment
 
|| As an assignment
 
|| As an assignment
 +
 
*Open the file '''MyHomePage.html''' which you created earlier.
 
*Open the file '''MyHomePage.html''' which you created earlier.
 
*Remove the '''inline style''' for '''body tag'''
 
*Remove the '''inline style''' for '''body tag'''
Line 370: Line 427:
 
About Spoken Tutorial project
 
About Spoken Tutorial project
 
|| The video at the following link summarises the Spoken Tutorial project.
 
|| The video at the following link summarises the Spoken Tutorial project.
 +
 
Please download and watch it.
 
Please download and watch it.
  
Line 375: Line 433:
 
|| Slide 15: About Workshop
 
|| Slide 15: About Workshop
 
|| The Spoken Tutorial Project team conducts workshops and gives certificates.
 
|| The Spoken Tutorial Project team conducts workshops and gives certificates.
 +
 
For more details, please write to us.
 
For more details, please write to us.
  
Line 384: Line 443:
 
|| Slide 17: Acknowledgement
 
|| Slide 17: Acknowledgement
 
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
 
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
 +
 
More information on this mission is available at this link.
 
More information on this mission is available at this link.
 +
 
|-
 
|-
 
|| Slide 18: Thanks
 
|| Slide 18: Thanks
 
|| This is Praveen from IIT Bombay signing off.
 
|| This is Praveen from IIT Bombay signing off.
 +
 
Thank you for joining
 
Thank you for joining
  
 
|-
 
|-
 
|}
 
|}

Latest revision as of 12:04, 9 May 2018

Title of the script:Styles and CSS

Author: Praveen S

Domain Reviewer: M.Deivamani

Novice Reviewer:Madhulika G

Keywords: HTML, Styles in HTML, CSS, Font, Color, Web Designing, Web Site, Spoken Tutorial, Video Tutorial

Visual Cue Narration
Slide 1: Title Hello and welcome to this Spoken Tutorial on Styles and CSS in HTML.
Slide 2: Learning Objectives In this tutorial we will learn about:
  • Styling the content in HTML using style as a Tag and an Attribute

We will also learn about CSS.

Slide 3: Prerequisite To practise this tutorial, you should know to use

any WYSIWYG or Text Editor and a Web Browser.

If not, then go through gedit Text Editor and Firefox tutorials on this website.

Slide 4: System Requirements To record this tutorial, I’m using
  • Ubuntu Linux 16.04 OS
  • HTML5
  • gedit Text Editor and
  • Firefox web browser

However you may, use any other editor or web browser of your choice.

Slide 5: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Slide 6: Styles
  • Styles allows us to define the presentation of the HTML elements.
  • Styles in HTML can be defined in 3 ways:
    • Inline attribute for the tags
    • Individual tag and
    • External style sheet (CSS)

Let us look at them one by one.

Slide 7: Style attribute
  • Style is an attribute that specifies the style of an element.
  • For eg: font-family, font-size, colour, etc.
  • style attribute decides how the content will be displayed.
  • Once the style attribute is declared for a tag, it will override the existing property.
Slide 7: Style attribute

<tag-name style=”Property-Name:Value”> Content </tag-name>

This is the syntax.
Slide 7: Style attribute


<tag-name style="Property1:Value;

Property2:Value"> Content </tag-name>

We can add more properties with the help of a semi-colon, as shown here.


Let’s try this out.

Open MyFirstPage.html in gedit We will open our MyFirstPage.html, which we created earlier.

The same is available in the Code Files link.

Point to Body tag Earlier in this series, we had defined the style attribute for the body tag.

And we had set the background color as sky-blue using the style attribute.

Open MyFirstPage.html in Firefox Switch to the folder where the file is saved.

Right-click on the filename and open in the web browser.

Observe that the background color of the page is set to sky-blue.
In Gedit Switch to the text editor.
Change sky-blue to yellow Now let us change the color from sky-blue to yellow.
Type:

; text-align:center

We will also add one more style property called text align.

Now next to the word yellow, type-

semi-colon space text hyphen align colon centre

Press Ctrl + S keys Save the file.
Switch to the browser and refresh the page Then switch to the browser and refresh the page.
Circle the background with the mouse

Point to the text.

Observe that the background color has changed from sky-blue to yellow.

And all the content on the page is center aligned.

Point to Body tag in the code The style attributes, background color and text align are defined for body tag.

Hence, they will be applied to all the content within the body.

Type: style="text-align:left" Now let us set the text align attribute for the first paragraph tag.

Locate the line Mumbai Farmer’s Market.

After the title type:

space style equal to within double quotes text hyphen align colon left

Press Ctrl + S keys Save the code.
Switch to the browser and refresh Then switch to the browser and refresh the page.

Observe the changes.

Point to the body tag

Point to p tag with style attribute

Earlier we had center aligned the whole content inside the body section.

But now, the style attribute defined within the p tag overrides the earlier properties.

This is how the inline style attribute works.

It can be applied to all HTML elements.

Slide 8: Style Tag Another method to define the styles is by using the style tag.
  • It defines the styles for the whole document.
  • We can have many style tags for a single document.
  • It has to be declared inside the head section.
  • It has both start and end tags.
Slide 8: Style Tag

<style> Tag-name {property:value;} </style>

This is the syntax for the style tag
Slide 8: Style Tag
  • We can add styles for multiple tags
  • And multiple attributes for tags, as well
Switch to gedit Let me switch back to the editor window to try this.
Point to Body tag I will delete the style attribute which I had written for the body tag.

And also delete the style attribute for the paragraph tag.

Type:

<style>

body {

background-color:pink;

text-align:center;

} </style>

Then in head section, after the title tag line, press Enter and type the following code.
Press Ctrl + S keys Save the file.
Switch to the browser and refresh Switch to the browser and refresh the page.

Observe the changes in the displayed content.

In Gedit Let us switch to our editor once again and add some more examples.
Type inside style tag:

p {

text-align:left;

}

In the style tag, type following code
Press Ctrl + S After this, save the file.
Switch to the browser and refresh Now go to the browser and refresh the page.

Notice that the content inside both the paragraph tags appear left aligned.

Compare the code in the browser This is because the alignment for paragraph tag is set globally for this document.
Now let us change the style for the first paragraph tag.

Switch to the editor.

Inside the first p tag next to title type

space style is equal to within double quotes text hyphen align colon center

Press Ctrl + S Save the code.
Switch to the browser and refresh Switch to the browser and refresh the page.

Now the content within the first paragraph tag appears center aligned.

This is because the inline style attribute overrides the global style property.

Slide 9: Common Style properties

Point at the examples

Some of the common style properties are
  • background-color to set the background
  • color to set the font color
  • font-family to set the font
  • font-size to set the font size
  • text-align for text alignment

Try these out by yourself.

Slide 10: CSS Now we will learn about the external style sheets.
  • External style sheets are defined with the help of CSS
  • CSS stands for Cascading Style Sheet
  • It is a file in which we can define the styles for multiple html pages
  • CSS file will not have any html code
Slide 10: CSS

<link rel="stylesheet" href="filename.css">

  • We have to include the CSS file in the head section with the help of link tag
  • This is the syntax.
Slide 10: CSS To learn more about CSS, please visit our website http://spoken-tutorial.org

Now let’s see a small demo on how to work with CSS files.

Show mystyle.css in gedit For this demonstration, I have already created a CSS file named mystyle.css

The same is available in the Code Files link.

You can see only the style definitions which we have seen in the previous example.

Remove the style section In our html file, remove the style defined within the style tags.

Also remove the inline style for the first paragraph tag.

Press Ctrl + S Now save the file.
Switch to the browser and refresh Switch to the browser and refresh the page.

Notice that now our page is displayed without any styles.

Type <link rel="stylesheet" href="mystyle.css"> Now in our html file under head section, after the title tag line, let us include the css file.

Type the following code

Press Ctrl + S Save the code.
Slide 11: Note

Eg) <link rel="stylesheet" href="Desktop/CSS/mystyle.css">

Make sure that your html and css files are kept in the same folder.

If the css file is in a different folder, then mention the full path for the file inside the code.

Example.

Switch to the browser and refresh Switch to the browser and refresh the page.

Now the new style attributes are applied to our page.

Switch to mystyle.css Let’s make some changes to the css.

Switch to the mystyle.css file

Change center to left >> Remove p style section Now change the alignment of the body to left and remove the paragraph alignment as well.
Press Ctrl + S keys >> Switch to the browser Save the file and switch to the browser.
Refresh Refresh the page and observe the output.
This is how the styles works in HTML and CSS.
With this, we come to the end of this tutorial.

Let us summarise.

Slide 12: Summary In this tutorial, we have learnt about
  • Style as an attribute (inline)
  • Style as a tag (internal)
  • Including a CSS file within an HTML code (External)
Slide 13: Assignment As an assignment
  • Open the file MyHomePage.html which you created earlier.
  • Remove the inline style for body tag
  • Create the following internal style in the head section
  • Set the body background color as “Khaki” and centre align the text
  • Set the alignment of paragraph tag to “left”
Slide 14:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide 15: About Workshop The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide 16: Forum questions Please post your timed queries in this forum.
Slide 17: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

Slide 18: Thanks This is Praveen from IIT Bombay signing off.

Thank you for joining

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C2/Styles-and-CSS-in-HTML/English&oldid=43156"