View source for HTML/C2/Styles-and-CSS-in-HTML/English

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

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

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
|| This is the syntax:

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

|-
|| 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:
<nowiki>; text-align:center</nowiki>

|| 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 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 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
|| This is the syntax for the '''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

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

|-
|| 
|| Switch to the editor. 

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

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

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

|-
|| 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) '''<nowiki> <link rel="stylesheet" href="Desktop/CSS/mystyle.css"> </nowiki>'''

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

|-
|}