HTML Styles

Prev
Next
CSS Vs HTML

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>
Run the Code

HTML Style background color using Embedded style

Use CSS Background-color property to give a background color to the page.

HTML Style background color using Embedded style

Example

.styleval { 
  background:skyblue;
  width:500px;
  text-align: center;
  border-radius:5px;
}
Run the Code

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 –

Example

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
Run the Code

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>
Run the Code

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>
Run the Code

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>
Run the Code

HTML Style text alignment

Use CSS text-align property to align your text.

HTML Style text alignment

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>
Run the Code

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.

To embed CSS in HTML we use <style> tag

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>
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!