HTML Basics
Learn HTML HTML Basics HTML Elements HTML Attributes HTML Comments HTML Colors HTML Style HTML CSS HTML Headings & Paragraphs HTML Formatting HTML Quotations HTML Links HTML Images HTML ListsHTML Intermediate
HTML Tables HTML Blocks HTML Classes & Ids HTML Iframes HTML Head HTML Layouts HTML File Paths HTML Pictures HTML Audio HTML Video HTML YoutubeHTML Advance
HTML Forms HTML Form Attributes HTML POST & GETSEO Tips & Others
SEO Tips Hosting Sites SEO Tools
HTML Style Attribute - CSS Properties
We already know what the style attribute does. However you don't need to know all the properties of the style attribute
This is the basic syntax
<element style="property:value;">
For each property we end it using a semi colon; so we can add multiple styles for the same element. We will see the basic styles below
Background color
If you want to change a backround color of a particular element we use the background-color property under styles
We can use this for the webpage or even text
RunAlways use appropriate colors which makes the text clearly visible.
The background-color could be used for coloring the background of an element. It could be almost be used for any element
Font color
To style the color of the text itself we use the color property
Let us see an example on this
RunFont family
You may have noticed the default font looks a bit rigid and yes ugly. The browser has some built in fonts which it supports so we could use them. We use the font-family to do this
RunThe browser only contains a limited number of fonts and most of them are not used. In order to know more about fonts you need to go to the CSS chapter to style even more cooler and sleek fonts
Font size
If we want to change the size of a text we can use the font-size property.
The browser has a default font size. However, if you would like to make the text smaller and larger the style attribute allows us to do that
RunDo not replace paragraphs with headings by increasing the size. This is known as a very stupid move. Always use the heading elements as this enalbes the Google SEO and search engines to crawl your website easily
Text-align
By default text is always aligned on the left. However, if you do want to align the text to the center or to the right or even justify it, we use the text-align property
Here is a basic example
RunAs you can see the style is getting more better and cooler
HTML was not designed for style. We need to learn CSS to style webpages.
CSS was designed to be a seperate file. So the HTML document could be linked to it. However, we still could use the Style attribute
There is also another way of implementing style for html elements and that is using <style> elements under the <head> element. We will not talk about that on the next chapter