Difference between revisions of "HTML/C2/Styles-and-CSS-in-HTML/English"

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

We will also learn about CSS.

any WYSIWYG or Text Editor and a Web Browser.

If not, then go through gedit Text Editor and Firefox tutorials on this website.

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

Please download and extract them.

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

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

<tag-name style=”Property-Name:Value”> Content </tag-name>

<tag-name style="Property1:Value;

Property2:Value"> Content </tag-name>

Let’s try this out.

The same is available in the Code Files link.

And we had set the background color as sky-blue using the style attribute.

Right-click on the filename and open in the web browser.

; text-align:center

Now next to the word yellow, type-

semi-colon space text hyphen align colon centre

Point to the text.

And all the content on the page is center aligned.

Hence, they will be applied to all the content within the body.

Locate the line Mumbai Farmer’s Market.

After the title type:

space style equal to within double quotes text hyphen align colon left

Observe the changes.

Point to p tag with style attribute

But now, the style attribute defined within the p tag overrides the earlier properties.

It can be applied to all HTML elements.

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

<style> Tag-name {property:value;} </style>

• And multiple attributes for tags, as well

And also delete the style attribute for the paragraph tag.

<style>

body {

background-color:pink;

text-align:center;

} </style>

Observe the changes in the displayed content.

p {

text-align:left;

}

Notice that the content inside both the paragraph tags appear left aligned.

Now let us change the style for the first paragraph tag.

Inside the first p tag next to title type

style="text-align:center"

Now the content within the first paragraph tag appears center aligned.

This is because the inline style attribute overrides the global style property.

Point at the examples

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

• 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

• This is the syntax:

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

Now let’s see a small demo on how to work with CSS files.

The same is available in the Code Files link.

You can see only the style definitions which we have seen in the previous example.

Also remove the inline style for the first paragraph tag.

Notice that now our page is displayed without any styles.

css file.

Type: <link rel="stylesheet" href="mystyle.css">

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

Now the new style attributes are applied to our page.

Switch to the mystyle.css file

Let us summarise.

• Style as an attribute (inline)
• Style as a tag (internal)
• Including a CSS file within an HTML code (External)

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

About Spoken Tutorial project

Please download and watch it.

For more details, please write to us.

More information on this mission is available at this link.

Thank you for joining