FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@harish 509

Using HTML with CSS HTML


2021-11-17 16:05 · 6 min read


Using HTML with CSS HTML

CSS provides styles to HTML elements on the page. Inline styling involves 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 usage of all three methods of attachment.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal style</title>
<style type="text/css">
body {
background-color: gray;
color: aqua;
}
</style>
</head>

<body>
<h1>Hello world</h1>
</body>
</html>

Using HTML with CSS.

External Stylesheet Use

Use the link attribute in the document's head:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal style</title>
<link rel="stylesheet" type="text/css" href="stylesheet_example.css">
</head>

<body>
<h1>Hello world</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>
<div class="container">
<button class="btn btn-danger">click me</button>
</div>
</body>
</html>

where rel Specifies the relationship between the current document and the linked document
href Specifies the location of the linked document
integrity Specifies a base64 encoded hash (sha256, sha384, or sha512) of the linked resource allowing the browser to verify its legitimacy and
crossorigin Specifies how the element handles cross origin requests
Click here to learn more about rel , href and crossorigin
 

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.

<html>
<head>
<style type="text/css">
body {
background-color: gray;
}
</style>
<style type="text/css">
p {
background-color: blue;
color:white;
}
</style>
</head>
<body>
<p>Hello i am paragraph</p>
</body>
</html>

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: Note that later files and declarations will override earlier ones. contains

example :- if general.css is

body {
background-color: red;
}

and specific.css contains:

body {
background-color: blue;
}

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


 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer