Scanner class Methods in Java

on
0

What are the types of CSS?

on

Types of CSS


CSS plays a vital role in web designing, CSS can be used in various ways. There are three types of CSS. As follows:- 

  1. Inline CSS
  2. Embedded/Internal CSS
  3. External CSS

  • Inline CSS

 Using an inline style is one of the ways to insert a style sheet. With inline style, a unique is applied to single element.
In order to use an inline style, add the style attribute to the relevant tag.
The example below shows how to create a paragraph with a gray background and white text.

CSS Code :

<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>

Code in HTML :

<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:white; background-color:gray">This is an example of inline styling.</p>
</body>
</html>

Result :

inline CSS example

  • Embedded/Internal CSS 

Internal styles are defined within the <style>  element, inside the head section of an HTML page.
 For example, the following code styles all the paragraphs   

Code :     

<html>
<head>
<title>HTML Internal CSS</title>
<style>
p{
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p> This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
</html>      

  Result :

Embedded/internal CSS example

  • External CSS 

With this method, all styling rules are contained in a single text file, which is saved with the .css extension.
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.
This CSS file is then referenced in the HTML using the <link> tag. The  <link>  element goes inside the head section.

Here is example,

The HTML Code :   

<html>
<head>
<title>HTML Inline CSS</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p> This is my first paragraph.</p>
<p>This is my second paragraph.</p>
<p>This is my third paragraph.</p>
</body>
</html>

The CSS Code :

p{
color:white;
background-color:gray;
}

Result :

External CSS example

Both relative and absolute paths can be used to define the href for the CSS file. In above examples, the path is relative, as the CSS file is in the same directory as the HTML file.

                                                                                                 

Comments

Post a Comment

If you have any doubt, ask here