W3C Designer

How to Insert css in html

7/08/2021
Hacker

Guide to Insert CSS

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

Ways to Insert CSS in html

There are three ways of inserting a style sheet

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

External CSS

With External Style Sheets, we can change the look and design of an entire website by changing just single file. Every HTML page must include a reference to an external style sheet file inside the header section, inside the <link> element.

To add an external style seat, you must first create a separate style file whose extension will be .css. After that you have to link your css file by <link> element in head section of your html file.

CSS External Stylesheets refers to .css documents that contain CSS properties and values for the entire website.

Correct way to link css file

To link HTML with CSS, you must use the <link> element. The element itself is empty, but has three attributes

  1. rel : Describes the relationship between an HTML document and a linked document
  2. type : It determines what kind of data should be taken by the input element.
  3. href : Points to the location or url of a specific file that you are Linking.

Syntax

<link rel="stylesheet" type="text/css" href="Path of style.css file">

You can Understood this from following example line

<head> <link rel="stylesheet" type="text/css" href="W3C_style.css"> </head>
Here the file named W3C_style.css is linked in the link element inside the head section. Which means that a css file named W3C_style.css has been created in which all the properties and values of the style are written.Here href contains the address or URL of the css file.

Example

CSS File Html File
body { background-color: #0f0f0d; } h1 { color: #f2b60f; margin-left: 20px; }
<!DOCTYPE> <html> <head> <title>External Style Sheet</title> <link rel="stylesheet" type="text/css" href="W3C_style.css"> </head> <body> <h1>W3 Code Designer </h1> </body> </html>

In this example the property and value of css have been given, then this value has to be written in a file and saved in .css file. Along with this, we also have to create an html file in which no style is already given, then the output of the file will be visible in a simple plain document. But as soon as you link the location of your created css file in that html file, then in the output of html document the color of the body becomes lightblue as well as the color of h1 becomes navy and moves forward 20px from the left.

Output

W3 Code Designer

INTERNAL CSS

Internal css is used to style only one web page. That is, internal css has to be defined differently in different web pages.

The style tag is used to add internal CSS to the web page. Within the style tag, all CSS styles are specified for selectors. we can add css style anywhere in web page through style tag. But, often the internal stylesheet is written in the head section, which keeps the speed of the web page fast.

Note: Even if the internal stylesheet is defined in a web page other than the head, it will still function as its properties and values are defined in the style.

Syntax

<style> selector { property: value;.... } . . . </style>

It is shown in the above internal css syntax that the style tag is written first, inside which the css code is written.

You can easily understand this by the example line of the css internal stylesheet given below.

<style> body { background-color: black; } h1 { color: red; font-size: 25px; } p { color: yellow; font-size:17px; } </style>

Let us now understand this with a complete example:

Example

<!DOCTYPE html> <html> <head> <style> body { background: black; } h1 { color: red; font-size: 36px; } p { color: yellow; font-size: 17px; } </style> </head> <body> <h1>The color of this heading is red and the font size is 36 pixels.</h1> <p>The color of this paragraph is yellow and the font size is 17 pixels.</p> </body> </html>

Output

The color of this heading is red and the font size is 30 pixels.

The color of this paragraph is yellow and the font size is 17 pixels.

As you can see in the output of the example that the background-color is black because we have set the background-color of the body black. Similarly, the text color of h1 is red and the font size is 36 pixel, the text color of the paragraph is yellow and the font size is 17 pixel.

Similarly let's take an example in which we write internal CSS inside body instead of head:

Example

<!DOCTYPE html> <html> <head> <title>W3Code Designer - Internal css</title> </head> <body> <style> body { background: black; } h1 { color: red; font-size: 36px; } p { color: yellow; font-size: 17px; } </style> <h1>The color of this heading is red and the font size is 36 pixels.</h1> <p>The color of this paragraph is yellow and the font size is 17 pixels.</p> </body> </html>

Output

The color of this heading is red and the font size is 30 pixels.

The color of this paragraph is yellow and the font size is 17 pixels.

Its output is according to the css code, so the internal css can be set anywhere in the web page.

Inline CSS

An inline stylesheet is used to style a perticular tag part in a web page.

for example The h1 tag is used multiple times in the web page, if we apply css code to the internal stylesheet or external stylesheet for the styling of a h1 tag, then it will be applied to all the h1 tags present in the web page.

But, if we want to apply the style only in that particular h1 tag in which we want to do, then for this we use inline css

The style attribute is used to set the inline stylesheet. All the css declaration are specified inside the quotes of the style attribute.

In whichever tag you have to put inline css, use the style attribute in that tag and write the css declaration.

You can understand this by the syntax given below

Syntax

<tag_name style="css_Declaration">

As shown in the syntax, the style attribute has been applied to the tag and the style is declared.

We can understand the inline stylesheet through the html line given below, in which inline css has also been applied.

<h1 style="color: #5abee8; text-align: center;">Inline CSS Example</h1>

The inline stylesheet is shown for the h1 tag in the example line above. The style attribute is applied to the h1 tag and the css styles is declared inside the double quote.

Let us understand this with a complete example:

Example

<!DOCTYPE html> <html> <head> <title>W3Code Designer - Inline css</title> </head> <body style="background-color: #f0b40e;padding:12px;"> <h1 style="color: #12110e; text-align: center;">Inline css - W3Code Designer.</h1> <p>In this paragraph no style applied.</p> </body> </html>

Output

Inline css - W3Code Designer.

In this paragraph no style applied.

As you can see in the output that the background-color of the body is gray. Similarly color and font-family of h1 are declared in the style attribute.

No comments:

Post a Comment