PoojaMoolya: Created page with "{| border=1 |- || Time || Narration |- || 00:01 || Hello and welcome to this Spoken Tutorial on '''Styles and CSS''' in '''HTML.''' |- || 00:08 || In this tutorial we will..."

2020-03-19T11:45:19Z

Created page with "{| border=1 |- || Time || Narration |- || 00:01 || Hello and welcome to this Spoken Tutorial on '''Styles and CSS''' in '''HTML.''' |- || 00:08 || In this tutorial we will..."

New page

{| border=1
|-
|| Time
|| Narration

|-
|| 00:01
|| Hello and welcome to this Spoken Tutorial on '''Styles and CSS''' in '''HTML.'''

|-
|| 00:08
|| In this tutorial we will learn about:

Styling the content in '''HTML''' using '''style''' as a '''Tag''' and an '''Attribute''' in HTML

|-
|| 00:19
||We will also learn about CSS

|-
|| 00:23
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.

|-
||00:31
||If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.

|-
|| 00:39
|| To record this tutorial, I’m using

'''Ubuntu Linux 16.04 OS'''

|-
|| 00:47
|| '''HTML 5'''

|-
|| 00:49
|| '''gedit Text Editor '''and '''Firefox web browser'''

|-
|| 00:55
||However you may, use any other '''editor''' or ''' web browser''' of your choice.

|-
|| 01:01
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

|-
|| 01:08
||Please download and extract them.

|-
|| 01:12
|| '''Styles '''allows us to define the presentation of the '''HTML elements'''.

|-
|| 01:18
||'''Styles''' in '''HTML''' can be defined in 3 ways:

|-
|| 01:23
||'''Inline attribute''' for the '''tags'''

Individual '''tag '''and

External style sheet ('''CSS''')

|-
|| 01:32
||Let us look at them one by one.

|-
|| 01:35
|| '''Style''' is an '''attribute''' that specifies the '''style''' of an '''element'''.

|-
|| 01:41
||For eg: '''font-family, font-size, colour''', etc.

|-
|| 01:47
||'''style attribute''' decides how the content will be displayed.

|-
|| 01:52
||Once the '''style attribute''' is declared for a '''tag''', it will override the existing '''property'''.

|-
||01:59
|| This is the syntax.

|-
|| 02:03
|| We can add more '''properties''' with the help of a '''semi-colon''', as shown here.

Let’s try this out.

|-
|| 02:12
|| We will open our '''MyFirstPage.html, '''which we created earlier.

|-
||02:18
||The same is available in the '''Code Files''' link.

|-
|| 02:22
|| 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'''.

|-
||02:33
|| Switch to the folder where the file is saved.

|-
|| 02:37
||Right-click on the filename and open in the '''web browser.'''

|-
|| 02:42
|| Observe that the background color of the page is set to sky-blue.

|-
|| 02:48
|| Switch to the text editor.

|-
|| 02:50
|| Now let us change the '''color''' from '''sky-blue''' to '''yellow'''.

|-
|| 02:55
|| We will also add one more '''style property''' called '''text align'''.

|-
||02:59
||Now next to the word '''yellow''', type-

'''semi-colon space text hyphen align colon centre'''

|-
|| 03:10
|| Save the file.

Then switch to the browser and refresh the page.

|-
|| 03:17
|| Observe that the '''background color '''has changed from '''sky-blue''' to '''yellow'''.

And all the content on the page is '''center aligned.'''

|-
|| 03:27
|| The '''style attributes, background color '''and '''text''' '''align''' are defined for''' body tag.'''

|-
|| 03:33
||Hence, they will be applied to all the content within the '''body'''.

|-
|| 03:38
|| Now let us set the '''text align attribute''' for the first '''paragraph''' '''tag'''.

|-
||03:43
||Locate the line '''Mumbai Farmer’s Market. '''

|-
||03:47
||After the '''title '''type: '''space style equal to within double quotes text hyphen align colon left'''

|-
|| 03:58
|| Save the code.

|-
|| 04:00
|| Then switch to the browser and refresh the page.

Observe the changes.

|-
|| 04:07
|| Earlier we had '''center aligned '''the whole content inside the '''body section'''.

|-
|| 04:13
||But now, the '''style attribute '''defined within the '''p tag''' overrides the earlier '''properties'''.

|-
|| 04:20
|| This is how the '''inline style attribute '''works.

It can be applied to all '''HTML''' '''elements'''.

|-
|| 04:28
|| Another method to define the '''styles''' is by using the '''style tag'''.

|-
|| 04:33
||It defines the '''styles''' for the whole document.

|-
|| 04:37
||We can have many '''style''' '''tags''' for a single document.

|-
|| 04:41
||It has to be declared inside the '''head section'''.

|-
|| 04:45
||It has both '''start '''and '''end tags.'''

|-
|| 04:49
|| This is the syntax for the '''style tag'''

|-
|| 04:54
|| We can add '''styles''' for multiple '''tags'''

And multiple '''attributes''' for '''tags, '''as well

|-
|| 05:02
|| Let me switch back to the '''editor '''window to try this.

|-
|| 05:05
|| I will delete the '''style attribute '''which I had written for the '''body tag.'''

|-
|| 05:12
||And also delete the '''style attribute''' for the '''paragraph tag.'''

|-
|| 15:17
|| Then in '''head''' section, after the '''title tag''' line, press '''Enter '''and type the following code.

|-
|| 05:25
|| Save the file.

|-
|| 05:27
|| Switch to the browser and refresh the page.

|-
|| 05:31
||Observe the changes in the displayed content.

|-
|| 05:35
|| Let us switch to our editor once again and add some more examples.

|-
|| 05:41
|| In the '''style tag''', type following code

|-
|| 05:45
|| After this, save the file.

|-
|| 05:48
|| Now go to the browser and refresh the page.

|-
|| 05:53
||Notice that the content inside both the '''paragraph tags''' appear '''left aligned.'''

|-
|| 06:00
|| This is because the alignment for '''paragraph tag''' is set globally for this document.

|-
|| 06:05
|| Now let us change the '''style''' for the first '''paragraph tag'''.

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

|-
|| 06:27
|| Save the code.

Switch to the browser and refresh the page.

|-
|| 06:33
||Now the content within the first '''paragraph tag '''appears '''center aligned.'''

|-
|| 06:38
||This is because the '''inline style attribute '''overrides the global '''style property'''.

|-
|| 06:44
|| Some of the common '''style properties''' are

'''background-color''' to set the background

|-
||06:52
||'''color''' to set the font color

|-
|| 06:55
||'''font-family''' to set the font

|-
|| 07:00
||'''font-size''' to set the font size

|-
|| 07:04
||'''text-align''' for text alignment

|-
|| 07:07
||Try these out by yourself.

|-
|| 07:10
|| Now we will learn about the '''external style sheets.'''

|-
|| 07:14
||'''External style sheets''' are defined with the help of '''CSS'''

|-
|| 07:19
||'''CSS''' stands for '''Cascading Style Sheet'''

|-
|| 07:23
||It is a file in which we can define the '''styles''' for multiple '''html''' pages

|-
|| 07:29
||'''CSS''' file will not have any '''html''' code

|-
|| 07:33
|| We have to include the '''CSS''' file in the '''head''' section with the help of '''link tag'''

This is the syntax.

|-
|| 07:43
|| To learn more about '''CSS''', please visit our website

|-
|| 07:47
||Now let’s see a small demo on how to work with '''CSS''' files.

|-
|| 07:53
|| For this demonstration, I have already created a '''CSS''' file named '''mystyle.css'''

|-
|| 08:00
||The same is available in the '''Code Files''' link.

|-
|| 08:04
||You can see only the '''style''' definitions which we have seen in the previous example.

|-
||08:10
|| In our '''html''' file, remove the '''style''' defined within the '''style tags'''.

|-
|| 08:17
||Also remove the '''inline style''' for the first '''paragraph tag.'''

|-
|| 08:22
|| Now save the file.

|-
|| 08:25
|| Switch to the browser and refresh the page.

|-
|| 08:29
||Notice that now our page is displayed without any '''styles'''.

|-
|| 08:35
|| Now in our '''html''' file under '''head''' section, after the '''title tag''' line, let us include the '''css''' file.

Type the following code

|-
|| 08:47
|| Save the code.

|-
|| 08:49
|| Make sure that your '''html''' and '''css''' files are kept in the same folder.

|-
|| 08:55
||If the '''css''' file is in a different folder, then mention the full path for the file inside the code.

|-
||09:03
|| Example.

|-
||09:06
|| Switch to the browser and refresh the page.

|-
||09:10
|| Now the new '''style attributes''' are applied to our page.

|-
||09:14
|| Let’s make some changes to the '''css'''.

|-
||09:17
|| Switch to the '''mystyle.css''' file

|-
|| 09:21
|| Now change the '''alignment''' of the '''body''' to '''left '''and remove the '''paragraph alignment '''as well.

|-
|| 09:29
|| Save the file and switch to the browser.

|-
|| 09:33
|| Refresh the page and observe the output.

|-
|| 09:37
|| This is how the '''styles '''works in '''HTML '''and '''CSS'''.

|-
|| 09:42
|| With this, we come to the end of this tutorial.

Let us summarise.

|-
|| 09:48
|| In this tutorial, we have learnt about

'''Style''' as an '''attribute '''

|-
||09:54
|| '''Style '''as a '''tag '''

|-
||09:56
|| Including a '''CSS '''file within an '''HTML '''code.

|-
|| 10:00
|| As an assignment

Open the file '''MyHomePage.html''' which you created earlier.

|-
||10:07
|| Remove the '''inline style''' for '''body tag'''

|-
||10:11
|| Create the following internal '''style''' in the '''head''' section

|-
||10:15
|| Set the '''body background color''' as “'''Khaki'''” and '''centre align''' the text

|-
||10:21
|| Set the alignment of '''paragraph tag''' to “'''left'''”

|-
|| 10:25
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

|-
|| 10:33
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

|-
|| 10:43
|| Please post your timed queries in this forum.

|-
|| 10:47
|| Spoken Tutorial Project is funded by MHRD, Government of India.

|-
||10:53
|| This is Praveen from IIT Bombay signing off.

Thank you for joining

|-
|}

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

PoojaMoolya: Created page with "{| border=1 |- || Time || Narration |- || 00:01 || Hello and welcome to this Spoken Tutorial on '''Styles and CSS''' in '''HTML.''' |- || 00:08 || In this tutorial we will..."