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

From Script | Spoken-Tutorial
Jump to: navigation, search
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

Contributors and Content Editors

PoojaMoolya