Using HTML with CSS

Using HTML with CSS
Nikhil
Published on 2021-07-01 16:20:24

Using HTML with CSS, and also External Stylesheet Use, Internal Stylesheet link using the link tag.

CSS provides styles to HTML elements on the page. Inline styling involves the usage of the style attribute in tags and is highly discouraged. Internal stylesheets use the <style> tag and are used to declare rules for directed portions of the page. External stylesheets may be used through a <link> tag which takes an external file of CSS and applies the rules to the document. This topic covers the usage of all three methods of attachment.

External Stylesheet Use


Use the link attribute in the document's head:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

You can also use stylesheets provided from websites via a content delivery network, or CDN for short. (for example,Bootstrap):

<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Generally, you can find CDN support for a framework on its website.

Internal Stylesheet


You can also include CSS elements internally by using the <style> tag:

<head>
<style type="text/css">
body {
background-color: gray;
}
</style>
</head>

Multiple internal stylesheets can be included in a program as well.

<head>
<style type="text/css">
body {
background-color: gray;
}
</style>
<style type="text/css">
p {
background-color: blue;
}
</style>
</head>

Inline Style


You can style a specific element by using the style attribute:

<span style="color: red">This text will appear in red.</span>

Note: Try to avoid this -- the point of CSS is to separate content from presentation.

Multiple Stylesheets


It's possible to load multiple stylesheets:

<head>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="specific.css">
</head>

Note that later files and declarations will override earlier ones. So if general.css contains:

body {
background-color: red;
}
and specific.css contains:
body {
background-color: blue;
}

if both are used, the background of the document will be blue.

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website