Latest topics
The most tagged keywords
Forum
How to embed CSS in HTML?
Page 1 of 1
How to embed CSS in HTML?
#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.
Inline Styles:
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
Program:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Internal Styles Sheet:
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
External Styles Sheet:
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
Program:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Source
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.
Inline Styles:
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
Program:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Internal Styles Sheet:
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
External Styles Sheet:
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
Program:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Source
Similar topics
» What is HTML CSS and JavaScript?
» Differences between HTML, CSS and JavaScript
» How to place an image on top of a text using HTML and CSS
» How to link a CSS stylesheet to an HTML document using Notepad?
» Differences between HTML, CSS and JavaScript
» How to place an image on top of a text using HTML and CSS
» How to link a CSS stylesheet to an HTML document using Notepad?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|
Wed Mar 23, 2022 4:36 pm by Kunlex
» 50 Best Web Fonts To Use In 2022 wapkiz, wapka and waphosts
Wed Mar 23, 2022 4:34 pm by Kunlex
» Wapkiz, wapka and waphosts body background image code
Wed Mar 23, 2022 4:33 pm by Kunlex
» Wapkiz user var about or rank to show in blog
Wed Mar 23, 2022 4:31 pm by Kunlex
» Pro Evolution Soccer 2016 (PES 2016)
Wed Mar 23, 2022 4:23 pm by Kunlex
» Working redirection code for wapka, wapkiz, waphosts and others
Wed Mar 23, 2022 4:18 pm by Kunlex
» How to Replace the Xiaomi Mi Max Screen
Fri Jan 03, 2020 7:40 pm by Kunlex
» How to know if someone is online on Instagram?
Fri Jan 03, 2020 7:28 pm by Kunlex
» How to hide Instagram posts from certain followers?
Fri Jan 03, 2020 7:28 pm by Kunlex
» How to Replace the Redmi Note 3/Redmi Note 3 Pro Screen
Thu Jan 02, 2020 1:11 pm by Kunlex
» Fresh Tutorial of iPhone 7 Plus Cracked Screen Refurbishing
Thu Jan 02, 2020 1:10 pm by Kunlex
» iPhone Data Recovery from Dead Logic Board / Phone
Thu Jan 02, 2020 1:09 pm by Kunlex
» Reason why phone hangs up itself?
Thu Jan 02, 2020 1:07 pm by Kunlex
» How To stop people from tagging you without your approval On Instagram
Thu Jan 02, 2020 5:27 am by Kunlex
» How to you unmute someone on Instagram in 2020?
Thu Jan 02, 2020 5:24 am by Kunlex
» Difference between WordPress.com and WordPress.org
Thu Jan 02, 2020 5:21 am by Kunlex
» Aircraft: Why cabin lights are dimmed during takeoff and landing?
Wed Jan 01, 2020 8:56 pm by Kunlex
» Aircraft: Why window shades are raised up during takeoff and landing?
Wed Jan 01, 2020 8:54 pm by Kunlex
» Genuine Reasons Why Most Ladies End Up Single In Life
Wed Jan 01, 2020 9:58 am by Kunlex
» Reasons Why Some Girls Are Still Single
Wed Jan 01, 2020 9:55 am by Kunlex
» What Is <! Doctype> And Why is it necessary to use in HTML5?
Wed Jan 01, 2020 7:54 am by Kunlex
» What is XML?
Wed Jan 01, 2020 7:50 am by Kunlex
» What does parsing XML means?
Wed Jan 01, 2020 7:48 am by Kunlex
» Mr Real – Onigbese
Tue Dec 31, 2019 9:29 pm by Kunlex
» Top 20 Talented Upcoming Artistes To Watch-out For In 2020
Tue Dec 31, 2019 6:55 am by Kunlex
» How To Redirect Xtgem, Wapkiz, Wapelf From Subdomain To Domain
Tue Dec 31, 2019 5:32 am by Kunlex
» How to embed CSS in HTML?
Tue Dec 31, 2019 5:29 am by Kunlex
» How to link a CSS stylesheet to an HTML document using Notepad?
Tue Dec 31, 2019 5:21 am by Kunlex
» What is HTML CSS and JavaScript?
Mon Dec 30, 2019 10:22 pm by Kunlex
» Differences between HTML, CSS and JavaScript
Mon Dec 30, 2019 10:20 pm by Kunlex