You are currently viewing CSS with HTML | lesson 13 HTML Tutorial
CSS with HTML Image

CSS with HTML | lesson 13 HTML Tutorial

In this lesson you will learn how to connect the CSS styles with HTML tags.
In general we have 3 type of linking CSS: Internal , External , Inline.

CSS with HTML Video

Styling HTML with CSS

CSS stands for Cascading Style Sheets. Also, CSS describes how HTML elements are going to be displayed on screen, paper, or in other media. In another word, CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

  • Inline – by using the style attribute in HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

First Inline CSS

An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.

For example: here we set the text color of the <p> element to blue:

 <p style="color:blue;">This is a Blue Heading</p> 

Second Internal CSS

An internal CSS is used to define a style for a single HTML page. Also, An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

Example:

 <!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 

Third External CSS

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file! which is more useful.

To use an external style sheet, add a link to it in the <head> section of the HTML page, like the following.

Example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="file_path/styles.css">
</head>
<body>

Note: You can write an external style sheet in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Stylesheet file looks like following.

Fore Example:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

External References

Sometime you need to store the file in other server so external style sheets can be referenced with a full URL or with a path relative to the current web page.

Fore Example:

 <link rel="stylesheet" href="https://www.safhatech.com/file_path/styles.css">   


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

Leave a Reply