HTML/C2/Styles-and-CSS-in-HTML/English - Revision history

Nancyvarkey at 06:34, 9 May 2018

2018-05-09T06:34:21Z

Pravin1389 at 10:56, 7 May 2018

2018-05-07T10:56:04Z

Pravin1389 at 10:47, 7 May 2018

2018-05-07T10:47:26Z

Show changes

Pravin1389: Created page with "'''Title of the script:'''Styles and CSS '''Author:''' Praveen S '''Domain Reviewer:''' M.Deivamani '''Novice Reviewer:'''Madhulika G ''..."

2018-05-07T09:38:53Z

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 ''..."

New page

'''Title of the script:'''Styles and CSS</span>

'''Author:'''</span> Praveen S</span>

'''Domain Reviewer:'''</span> M.Deivamani</span>

'''Novice Reviewer:'''Madhulika G

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

{| border=1
|-
|| 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 '''in '''HTML'''
We will also learn about '''CSS'''.

|-
|| Slide 3: Prerequisite
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and '''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'''
* <div style="margin-left:1.235cm;margin-right:0cm;">'''HTML5'''
* <div style="margin-left:1.235cm;margin-right:0cm;">'''gedit Text Editor '''and
* <div style="margin-left:1.235cm;margin-right:0cm;">'''Firefox web browser'''

However you may, use any other '''editor''' or '''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 '''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
|| This is the syntax:
'''<tag-name style=”Property-Name:Value”> Content </tag-name>'''

|-
|| Slide 7: Style attribute
|| 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.

|-
|| Open '''MyFirstPage.html '''in''' gedit'''
|| We will open our file '''MyFirstPage.html, '''which we created earlier.

The same is available in the </span>'''Code Files'''</span> link.</span>

|-
|| 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:
<nowiki>; text-align:center</nowiki>
|| We will also add one more '''style property''' called '''text align'''.
Next to the word '''yellow, '''before the '''close quote''' type-
'''semi-colon space text hyphen align colon centre'''

|-
|| Press Ctrl + S keys
|| Save the code 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'''.

|-
|| Switch to Gedit
|| Switch back to the code.

|-
|| 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 open quotes text hyphen align colon left close quotes'''

|-
|| Press Ctrl + S keys
|| Save the code file.

|-
|| 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
|| This is the syntax for the '''style tag'''
'''<style>'''
'''Tag-name {property:value;}'''
'''</style>'''

|-
|| 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.'''
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
|| And 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
|| 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'''.
Inside the first '''p tag''' next to '''title''' type
'''style="text-align: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 other 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 text size
*'''text-align''' for text alignment

Try these out by yourself.

|-
|| Slide 10: CSS
|| Now we will learn about the '''external style sheets.'''
*'''External styles''' 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
|| *We have to include the '''CSS''' file in the '''head''' section with the help of '''link tag'''
*This is the syntax:
'''<link rel="stylesheet" href="filename.css">'''

|-
|| Slide 10: CSS
|| To learn more about '''CSS''', please visit our website [http://spoken-tutorial.org/ http://spoken-tutorial.org]
Now let’s see a small demo on how to work with '''CSS''' files.

|-
|| 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'''
The same is available in the </span>'''Code Files'''</span> link.</span>
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 code.

|-
|| 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:
'''<link rel="stylesheet" href="mystyle.css">'''

|-
|| Press '''Ctrl + S'''
|| Save the code.

|-
|| Slide 11: Note
|| 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.
Eg) '''<link rel="stylesheet" href="Desktop/CSS/mystyle.css">'''

|-
|| 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 '''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

|-
|}

@@ Line 21: / Line 21: @@
 || Slide 2: Learning Objectives
 || In this tutorial we will learn about:
-*Styling the content in '''HTML''' using '''style''' as a '''Tag''' and an '''Attribute
+*Styling the content in '''HTML''' using '''style''' as a '''Tag''' and an '''Attribute'''
 We will also learn about '''CSS'''.
@@ Line 51: / Line 51: @@
 |-
 || 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'''
+**'''Inline attribute''' for the '''tags'''
 **Individual '''tag '''and
 **External style sheet ('''CSS''')
@@ Line 61: / Line 62: @@
 |-
 || 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.
@@ Line 68: / Line 70: @@
 |-
 || Slide 7: Style attribute
 <nowiki> <tag-name style=”Property-Name:Value”> Content </tag-name> </nowiki>
 |-
 || Slide 7: Style attribute
-|| We can add more '''properties''' with the help of a '''semi-colon''', as shown here.
 <nowiki> <tag-name style="Property1:Value; </nowiki>
 <nowiki> Property2:Value"> Content </tag-name> </nowiki>
 Let’s try this out.
@@ Line 118: / Line 122: @@
 || We will also add one more '''style property''' called '''text align'''.
-Now next to the word '''yellow, type-
+Now next to the word '''yellow''', type-
 '''semi-colon space text hyphen align colon centre'''
@@ Line 124: / Line 128: @@
 |-
 || Press Ctrl + S keys
-|| Save the code file.
+|| Save the file.
 |-
@@ Line 143: / Line 147: @@
 Hence, they will be applied to all the content within the '''body'''.
 |-
@@ Line 193: / Line 193: @@
 |-
 || Slide 8: Style Tag
 <nowiki> <style> </nowiki>
 <nowiki> Tag-name {property:value;} </nowiki>
 <nowiki> </style> </nowiki>
 |-
 || Slide 8: Style Tag
-|| *We can add '''styles''' for multiple '''tags'''
+||
 *And multiple '''attributes''' for '''tags, '''as well
@@ Line 268: / Line 270: @@
 |-
 ||
-|| Switch to the editor.
+|| 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
-'''style="text-align:center"'''
+'''space style''' is equal to within double quotes '''text hyphen align colon center'''
 |-
@@ Line 292: / Line 294: @@
 Point at the examples
-|| Some of the other '''style properties''' are
+|| Some of the common '''style properties''' are
 *'''background-color''' to set the background
@@ Line 306: / Line 308: @@
 || Now we will learn about the '''external style sheets.'''
-*'''External styles''' are defined with the help of '''CSS'''
+*'''External style sheets''' are defined with the help of '''CSS'''
-*'''CSS''' stands for '''Cascading''' '''Style''' '''Sheet'''
+*'''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
@@ Line 313: / Line 315: @@
 |-
 || Slide 10: CSS
 <nowiki> <link rel="stylesheet" href="filename.css"></nowiki>
 |-
@@ Line 349: / Line 352: @@
 |-
 || Type <link rel="stylesheet" href="mystyle.css">
-Type:
+|| Now in our '''html''' file under '''head''' section, after the '''title tag''' line, let us include the '''css''' file.
-<nowiki> <link rel="stylesheet" href="mystyle.css"> </nowiki>
 |-
@@ Line 361: / Line 363: @@
 |-
 || Slide 11: Note
 || 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.
-Eg) '''<nowiki> <link rel="stylesheet" href="Desktop/CSS/mystyle.css"> </nowiki>'''
+Example.
 |-

@@ Line 21: / Line 21: @@
 || Slide 2: Learning Objectives
 || 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'''.
@@ Line 28: / Line 28: @@
 || Slide 3: Prerequisite
 || To practise this tutorial, you should know to use
-any '''WYSIWYG '''or '''Text Editor''' and '''Web Browser'''.
+any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.
 If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
@@ Line 41: / Line 41: @@
 * '''Firefox web browser'''
-However you may, use any other '''editor''' or '''browser''' of your choice.
+However you may, use any other '''editor''' or ''' web browser''' of your choice.
 |-
@@ Line 51: / Line 51: @@
 |-
 || 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:
 **Inline attribute for the '''tags'''
@@ Line 84: / Line 84: @@
 |-
 || 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 '''Code Files''' link.
@@ Line 118: / Line 118: @@
 || 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'''
@@ Line 156: / Line 156: @@
 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
-|| Save the code file.
+|| Save the code.
 |-
@@ Line 212: / Line 212: @@
 || 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.'''
 |-
@@ Line 234: / Line 234: @@
 |-
 || 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.
@@ Line 258: / Line 258: @@
 |-
 || 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.'''
@@ Line 268: / Line 268: @@
 |-
 ||
-|| Now let us change the '''style''' for the first '''paragraph tag'''.
+|| Switch to the editor.
 Inside the first '''p tag''' next to '''title''' type
@@ Line 290: / Line 292: @@
 Point at the examples
-|| Some of the other common '''style properties''' are
+|| Some of the other '''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 text size
+*'''font-size''' to set the font size
 *'''text-align''' for text alignment
@@ Line 337: / Line 339: @@
 |-
 || Press '''Ctrl + S'''
-|| Now save the code.
+|| Now save the file.
 |-
@@ Line 379: / Line 381: @@
 |-
 || 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.
 |-