HTML - Style Sheet
What is Cascading Style Sheet
Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they're pronounced. W3C has actively promoted the utilization of favor sheets on the online since the consortium was formed in 1994.
Cascading Style Sheets (CSS) offer simple, easy and very effective alternatives for specifying various attributes for the particular HTML tags. Using CSS, you'll specify the number of styling properties for a particular HTML element. Each of the property owns a name and a particular value, that are separated by using a colon (:). Every single property declaration has to be separated by a semi-colon (;).
Example
Firstly, let's use an example HTML code that makes use of the <font> tag and all of its main attributes in other to set the text color and font size:
Note − The font tag deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will work with an example using the font tag.
<!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p><font color = "green" size = "5">Hello, World!</font></p> </body> </html>
We can also rewrite the code above to use stylesheet like so:
<!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p style = "color:green; font-size:24px;" >Hello, World!</p> </body> </html>
You can use CSS in 3 different styles in your HTML web page:
1. External Style Sheet: write the style sheet rules in another .css file and then import that file into your HTML page using the HTML <link> tag.
2. Internal Style Sheet: write the style sheet rules in the header tag of the particular HTML document by making use of the <style> tag.
3. Inline Style Sheet: write the style sheet rules directly together-with the HTML elements and tags by using the style HTML attribute.
External Style Sheet
If you need to make use of your stylesheet on different pages, it is very recommended that you create a default style sheet in a separate file. A CSS file will make use of a .css extension and it will also be added to your HTML files by using the <link> tag.
Example
If we have a style sheet file style.css that has the following rules:
.red { color: red; } .thick { font-size:20px; } .green { color:green; }
In this code, we wrote 3 CSS rules that will be added to 3 different classes written for the HTML tags. Now let's make use of the external CSS file in our following HTML document:
<!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <link rel = "stylesheet" type = "text/css" href = "/html/style.css"> </head> <body> <p class = "red">This is red</p> <p class = "thick">This is thick</p> <p class = "green">This is green</p> <p class = "thick green">This is thick and green</p> </body> </html>
Internal Style Sheet
If you want to apply Style Sheet rules to a single document only, then you can include those rules in the header section of the HTML document using <style> tag.
Rules defined in an internal style sheet override the rules defined in an external CSS file.
Example
Let's re-write the above example one more time again, but we will write the style sheet in our HTML document by using the <style> tag
<!DOCTYPE html> <html> <head> <title>HTML Internal CSS</title> <style type = "text/css"> .red { color: red; } .thick{ font-size:20px; } .green { color:green; } </style> </head> <body> <p class = "red">This is red</p> <p class = "thick">This is thick</p> <p class = "green">This is green</p> <p class = "thick green">This is thick and green</p> </body> </html>
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
