How to Connect CSS with HTML?

CSS stands for cascading style sheets. CSS defines, how any element will be displayed in terms of color, size, style and many other factors. We remember style tag of HTML, if we can give style from there then what is the advantage of CSS? Using CSS, we can write code at one place and its effect can be applied in entire website while same is not possible with HTML style tag. This way effort, time and money are saved.

There are 3 ways to add CSS inside HTML document:

  • Inline: this is code inside HTML. This is same like style tag that we use for elements of web page.
  • Internal: here <style> tag is used inside <head> tag of the HTML page.
  • External: one can make CSS file externally and connect with the HTML page.

Commonly designers make separate file for CSS and that is connected code. In this article, we will explain, how you can use all 3 mentioned methods.

 

What is Inline CSS and how it works?

This is mainly used for single element or when we target any particular element on HTML page.

Example: <h1 style=”color:red;”>Web Design Agency Cambridge</h1>

 

What Internal CSS? Explain with an example.

This also works same as inline but it consists of multiple lines.

Example: <!DOCTYPE html>
<html>
<head>
<style>
body {background-color:red;}
h3   {color: blue;}
p    {color: black;}
</style>
</head>
<body>

<h1>Hire Website Designers in Cambridge, UK</h1>
<p>Cambridge Address: 26, Topham Way </p>

</body>
</html>

What is External CSS?

This is supposed to be most used maximum by designers. You can create one file and it can change design of entire website. There will be a link tag inside <head> and connection will go for entire website.

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”filename.css”>
</head>
<body>

<h1>How to Hire Website Designer? </h1>
<p> How Effective Web design can work for your website?</p>

</body>
</html>

 

This is to be cared that CSS file should not have any HTML. It should be pure CSS with reference to elements of HTML page that is to be designed. Filename should be saved with .CSS extension.

 

body {
background-color: red;
}
h4 {
color: black;
}
p {
color: blue;
}

 

Here you can see, there is no HTML code.

 

What is CSS font and how we can style elements?

Using CSS codes, one can color text, manage font-family, size and all other concerned elements.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: Times new Roman;
font-size: 220%;
}
p  {
color: black;
font-family: courier;
font-size: 340%;
}
</style>
</head>
<body>

<h1>What is difference between web designers from London and Cambridge</h1>
<p>Cambridge city and its identity</p>

</body>
</html>

 

What is CSS border?

If you want to put border around HTML page then CSS can give you chance.

Example of code: h3 {
border: 2px solid red;
}

 

This will make a border around the heading. This way all H3 will get targeted.

What is CSS padding?

Padding defines space between border and content.

Example: h5 {
border: 3px solid red;
padding: 40px;
}

 

What is CSS margin?

Margin works outside border. This is the space that we see from computer screen and the border.

H1 {
border: 3px solid red;
margin: 40px;
}

 

It will make a border of 3pixel and space for margin will be 40 pixels.

 

How to Connect CSS externally?

A path can be defined with connection from backside to the main page of HTML website. this is the example: <link rel=”stylesheet” href=”/html/filename.css”>

Pentagon Towers, No. 11/3, Mosque Rd, Cleveland Town, Pulikeshi Nagar, Bengaluru, Karnataka 560005