CSS
Using CSS(Cascading Style Sheets), we can style our web pages. We can use background-color, font-size, font-family, border-color, width, height properties to style of our HTML document
One can design simple web pages using Inline stylesheets in HTML. But to create more attractive and responsive website use CSS.
Here are some different types of HTML stylesheets :
Rule 1: Inline stylesheet – In this stylesheet, the style rule is inlined with the HTML elements. This means that style is defined as the elements are described.
Rule 2: Embedded stylesheet – Here, the style rule embeds in the Heading of the HTML. This means that style defines within the tag like – styles….
Rule 2: External stylesheet– This stylesheet creates a separate style document sheet and it contains the style information of the HTML elements. This style elements only contains the CSS but no HTML tags are present here. And the external style sheet links back to the main HTML page in the section using the tag
Give background color using Inlined style
Use Inline stylesheet as shown in below example
Example
<h1 style="color:green;font-size:40px;"> Example for inline stylesheet in heading tag</h1> <p style="color:blue;font-size:16px;"> Paragraph tag contains Inline style</p>
HTML Style background color using Embedded style
Use CSS Background-color property to give a background color to the page.
Example
.styleval { background:skyblue; width:500px; text-align: center; border-radius:5px; }
External style sheets in HTML
You can use External style sheet to link styles to your HTML document.
The content of the external stylesheet will contain styling properties. Suppose, the name of your stylesheet is ‘stylesheet.css’, then you need to link that stylesheet in your HTML document like below –
An example of the content of external stylesheet(in this case, stylesheet.css) is –
h1 { color: gray; margin-left: 20px; } h4 { color: gold; } p { color:aqua; font-size:20px; }
Font family property in CSS
We can find the different type of fonts using style font-family property of our HTML document.
Example
<h4 style="font-family:Broadway;">Broadway</h4> <h4 style="font-family:Times new roman;">Times new roman</h4> <h4 style="font-family:Chiller;">Chiller</h4>
HTML Style text color
We can give color to specified text using CSS color property.
Example
<p style="color:tomato;">Tomato color</p> <p style="color:Brown;">Brown color</p> <p style="color:Slateblue;">Slateblue color</p>
How to Give font size in HTML
The font size property describes the size of the text in an HTML document.
Example
<p style="font-size:80px;">First font 80px</p> <p style="font-size:400%;">Second Font 400%</p> <p style="font-size:3em;">Third font size is 3em</p>
HTML Style text alignment
Use CSS text-align property to align your text.
Example
<p style="text-align:center;">Aligned in the center</p> <p style="text-align:center;">It is aligned in the center</p> <p style="text-align:center;">Aligned in the center</p>
Interview Questions & Answer
1. HTML is a markup language used for describing web documents. | CSS is used for designing web documents. |
2. Markup Language(HTML) is used to create the actual content of the page such as written text. | Cascade Styling Sheet(CSS) is responsible for the design or style of the website, including the layout, visual effects and background color. |
3. HTML is used for the creation of web pages. | CSS is used to control the styling and layout of web pages. |
4. We can use CSS in the HTML file. | We cannot use HTML in CSS stylesheet. |
5. HTML consists of tag surrounding content. | CSS consists of a selector followed by a declaration block. |
Using CSS(Cascading Style Sheets), we can style our web pages. We can use background-color, font-size, font-family, border-color, width, height properties to style the HTML document.
Some different types of stylesheet are:-
- Inline – In this stylesheet, the style rule is inlined with the HTML elements. This means that style is defined as the elements are described.
- Embedded – Here, the style rule embeds in the Heading of the HTML. This means that style defines within the tag like – styles….
- External – This stylesheet creates a separate style document sheet and it contains the style information of the HTML elements. This style elements only contains the CSS but no HTML tags are present here. And the external style sheet links back to the main HTML page in the section using the tag.
If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.
Example of Inline stylesheet:-
<!DOCTYPE html> <html> <body> <h1 style="color:green;font-size:40px;">Example for inline stylesheet in heading tag</h1> <p style="color:blue;font-size:16px;">Paragraph tag contains Inline style</p> </body> </html>
Example of embedded stylesheet:-
<!DOCTYPE html> <html> <head> <style> .styleval { color:blue; font-size:30px; text-align: center; } </style> </head> <body> <div class="styleval"> <p>Example of background color Property</p> <p>The given background color is Aqua.</p> </div> </body> </html>
Example of external stylesheet:-
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Example of background color Property</p> <p>The given background color is Aqua.</p> </div> </body> </html>
External CSS(style.CSS)
p{ background:skyblue; width:500px; text-align: center; border-radius:5px;}
<!DOCTYPE html> <html> <body> <h4 style="font-family:Broadway;">Broadway</h4> <p style="color:tomato;">Tomato color</p> <p style="font-size:80px;">First font 500px</p> <p style="text-align:center;">Aligned in the center</p> </body> </html>