Home
Latest images
Search
Register
Log inLatest topics
The most tagged keywords
How to embed CSS in HTML?
9jabaze - Entertainment | Webmaster | Browsing Tricks | Games/Apps Hub :: Technology Forums :: Blogging
Page 1 of 1
How to embed CSS in HTML?
by Adminkunlex Sun Jan 05, 2020 8:57 am
#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
Adminkunlex- Admin
- Posts : 1521
Points : 4576
Reputation : 0
Join date : 2019-06-08
Age : 24
Location : Osun State, Nigeria -
Similar topics» What is a div in HTML?
» How to Embed a YouTube Video in a Blogger Blog
» Difference between "div id" and "div class" in HTML
» How To Upload HTML Meta Tag File To Blogger Blog for google Ownership verification?
» How to Embed a YouTube Video in a Blogger Blog
» Difference between "div id" and "div class" in HTML
» How To Upload HTML Meta Tag File To Blogger Blog for google Ownership verification?
9jabaze - Entertainment | Webmaster | Browsing Tricks | Games/Apps Hub :: Technology Forums :: Blogging
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|
» Wapkiz 2020 Code: wapkiz register page responsive design Code
» 2020Bbnaija : Why I Can’t Be In A Relationship With Ozo – Nengi
» Can You Have S*x On Your First Date? Check Out What Actress, Debbie Shokoya Has To Say About This
» Nigerian Singer, Seunfunmi Stephen, Recounts How Her Husband Was Killed By Stray Bullet
» Olakunle Churchill Shares Photo Of Himself And Actress Rosy Meurer As He Writes On The Importance Of Loyalty
» Ubi Franklin Reveals What Happened To Him When He Visited A Hospital Amid COVID-19 Pandemic
» Vardy Wins Premier League Golden Boot, Beats Ings, Aubameyang & Sterling
» The Right Way To Preach About Hell - Milton Goh
» “Surgery For What?” – Regina Daniels Shows Off Hot Body After Childbirth (Video)
» I Got Pregnant As A Virgin At 23 – Wathoni
» #Bbnaija2020: Wathoni Kisses Kiddwaya During BBNaija Truth Or Dare Game
» Bbnaija: Kiddywaya Gropes Erica’s Breast While Dancing And She Reacts
» “I Hope To Collaborate With Rihanna & Drake Soon” – Rema
» “Girls That Give Threesome With Their Friend Have A Special Place In Heaven” – Naira Marley
» “To Be A Boss, You Must Be A Servant” – Frodd Recounts On His Humble Beginnings
» “Stop Pressuring Us With Your Beauty”, Actress Queen Nwokoye Begs Ini Edo
» You Look Like A Weed Smoker – Lady Fires Adekunle Gold Over New Look
» Davido Turns Chef, Spotted Cooking Probably For Chioma And His Crew
» Kanye West Apologizes To Kim Kardashian For Public Rants On Their Marriage