How To Combine CSS HTML | Combining HTML CSS Together

How many ways CSS HTML Combination can be implemented?

The CSS is discussed and explained in detail in the Learn CSS chapter. Here we are just going to show the ways of including a Css in your web page.

There are four ways of including CSS (basically 3 ways to include CSS)into an HTML document. The mostly used way is to include the style sheet file into your web page as a separate file. This is called the External CSS. Mostly it is included in the head part of your document. Here is the example that how an external style sheet is included into a web page.

Code:

<!DOCTYPE html>

<!– www.howtocode.pk is one of the leading Web development tutorial Site. –>

<html>

<head>

<title>

Paragraph Example from howtocode.pk

</title>

<link rel=”stylesheet” type=”text/css” href=”mystyles.css” />

</head>

<body>

<p>

Paragraphs hold the text usually that is formatted like a sequence of words with blank space or margin or padding in them separating each other.

</p>

</body>

</html>

You can see in the head section between the <head> tags there is a <link> tag. In this way you can include an external CSS into your document. The <link> tag has an attribute called “rel” it is a shortcut of “relation”. It shows that what is the relationship of the imported file with this document and it shows that it is a style sheet. The other attribute of the <link> tag is the “type” attribute. It is used to tell the type of the file which we are including in our document. Here it says that it is “text/css”, means that it is CSS file. The third and the last attribute here is the “href” attribute. It shows the path from which the document will be included in the page. Here it is in the same folder where the html file is.

The 2nd way to use a CSS in your document is to import it in your file by using the “import” word. Here is the way that you can import your style sheets into your html document.

Code:

<!DOCTYPE html>

<!– www.howtocode.pk is one of the leading Web development tutorial Site. –>

<html>

<head>

<title>

How to import an external CSS into your web page | howtocode.pk

</title>

<style type=”text/css”>

@import “mystyles.css”;

</style>

</head>

<body>

</body>

</html>

In the above code we have imported “mystyles.css” in our html page. The syntax is very simple in this process. There are two <style> tags that wrap the import statement. The “@” sign is used with import and then the path of the document to import the CSS file.

The third way is to include a CSS style sheet styles internally in <style> tags. We have discussed it in detail in the CSS chapter. Here is the example code of the internal style sheet with <style> tags.

Code:

<!DOCTYPE html>

<!– www.howtocode.pk is one of the leading Web development tutorial Site. –>

<html>

<head>

<title>

Paragraph Example from howtocode.pk

</title>

<style>

p {

background-color: #eef;

width: 25em;

font-size: 120%;

text-align: center;

padding: 1ex;

}

</style>

</head>

It is the head part only which has the inter style for the document. We are not going to discuss more on CSS here. Here a <p> tag is being styled with the help of this code.

The fourth and the last way to include a style sheet is called the inline style. Here is example code for an inline CSS.

Code:

<!DOCTYPE html>

 

<html>

<head>

<title>

Style Example

</title>

</head>

<body>

 

<h1>

Style Example

</h1>

 

<p style=” background-color: #eef; width: 25em; font-size: 120%; text-align: center; padding: 1ex;”>

Paragraphs hold the text usually that is formatted like a sequence of words with blank space or margin or padding in them separating each other.

</p>

</body>

</html>

In the above code we have are using an inline style sheet to style a paragraph. This is the fourth and final way of including CSS in your pages.

These all have their own benefits we have discussed it in the Learning CSS chapter.

Comments