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
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:
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
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.
Let us look at them one by one. |
Slide 7: Style attribute | *Style is an attribute that specifies the style of an element.
|
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 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:
; text-align:center |
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.
|
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
|
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
Try these out by yourself. |
Slide 10: CSS | Now we will learn about the external style sheets.
|
Slide 10: CSS | *We have to include the CSS file in the head section with the help of link tag
<link rel="stylesheet" href="filename.css"> |
Slide 10: CSS | To learn more about CSS, please visit our website 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 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
|
Slide 13: Assignment | As an assignment
|
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 |