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

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