Hello Everyone This Tutorial is not New for Web Designers. But This is our First Chapter in CSS Styles Guide So Follow This Guide And Become a Good Web designer. So We Will Comeback to this tutorial.
As We Know With CSS We Can Style Any HTML Element But Where To Add CSS Styles Whether To Add in HTML Section? or To Add in HTML Element or to Use Separately.
Which are the 3 ways to inject CSS Styles?
This are three ways of inserting a style sheet:
- Inline styles
- Internal stylesheet
- External stylesheet
Inline Styles: An Inline CSS basically used For Single Element and Decorate it with unique Style. This is not a Good Practice as The HTML Section will messed up if you use too many inline Styles. This Style rules can be added directly to any HTML element With by using style For Example:
<h2 style="font-size: 20px; color: black; border: 1px solid red;">
I'm Using Inline CSS
</h2>
Example 1: H2 With CSS Styles Font-size, Color And Border. Here We Have Added Custom CSS Styles To Particular H2 Tag. if you have more than one H2 Tags And You Want This Same Styles For Both. Then you have to add this styles again to that H2 And This Will Look mess and Increases Size of the page.
Internal StyleSheet: Internal Stylesheet is inserted in the Head Section of The Web Page Where You have to start by using <style> and end by </style> So You can see this type of styling in the Blogger Where Users Wrap their CSS Code in This Style Tags.
<head>
<style type="text/css">
All your CSS Styles
</style>
</head>
Example 1 For Internal Style Sheet:
<!DOCTYPE html>
<html>
<head>
<style>
.myExampleBox{ Width: 300px; Height: 250px; border: 2px solid violet; text-align: center;}
h2 { color: red; font-size: 25px; margin-bottom:0px;}
.myExampleBox p {font-size: large;color: grey;padding:0px;margin-top:2px;}
</style>
</head>
<body>
<div class="myExampleBox">
<h2>Example Post</h2>
<p>This is Internal StyleSheet</p>
</div>
</body>
</html>
In The First Example We have Created a Div Inside the Div We Have Added H2 For Title and a Paragraph for Explanation so We Have given the styling to it at the top so now the HTML Parts looks cleaner and More Readable. if you want only HTML In the HTML Section then you have to use External Style Sheet. So That The Stylesheet will also Get Cleaner and HTML Also.
External Stylesheet: External Stylesheet is the most used method. With this method all of your style rules are contained in a single text file that is saved with the .CSS extension. to include the reference we use link element this link element will start by <link> and end by /> This is self closing element link img etc This link should be added in the head section of the HTML Page. this will look like this:
<head>
<link rel="stylesheet" type="text/css" href="your-site-style.css" />
</head>
And We should Correctly Give the Correct Path to our CSS Script in the href which is highlighted above in the Blue Color. we cannot link to folder where CSS Stylesheet is located. we should link our stylesheet directly like example.css which is the CSS File.
FAQ Frequently Asked Questions:
Which is the best practice to use?
We Should Use External Stylesheet in our site because all our CSS Styles will be in different file and untouched and we can easily take backup and HTML Page will look more tidy and More Easy to read and Edit After Some Time.
Whether We Can use Multiple Stylesheets in the HTML Page?
That's It Thanks For Following our Tutorial '3 Ways To inject CSS Styles! in Blogger or Any Webpage! '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
No comments:
Post a Comment