In my previous blog, I told all necessary things to get started with CSS. We used CSS inside HTML to style webpages.
Today we'll create a separate Style Sheet to use within HTML web document.
Make sure to upvote my hard work and dedication
Today's Contents :-
- Writing basic Html code
As in my previous blog
- Creating an external Stylesheet
- Linking an external stylesheet
- Styling HTML with external Stylesheet
Getting started :-
Basic HTML code :-
<html>
<head>
<title> My Website </title>
</head>
<style>
</style>
<body>
<p> I will style this using a separate style sheet </p>
</body>
</html>
Creating an external Stylesheet :-
CTRL + N as a shortcut command. Keep this thing in mind that when we use CSS within a HTML document, We use the tag <style> but when we style using an external stylesheet, We do not use the tag <style>. We just type the name of the element to be styled, Add Curly braces { } and add all the style elements inside the curly braces :)<p></p> tags, So i will type the letter "p" Add opening and closing curly braces after it, And type in the styling elements inthose braces. Make sure that you've already saved the HTML document with .html extension. Now for a moment forget that html document and focus on the CSS document. I will change the background color of the p tag by using the keyword background-color, change its font using the keyword font-family and change the font of the text using color keyword. Here is what our code in CSS file looks like.p {
background-color:green;
color:white;
font-family: Agency fb;
> Agency fb is a builtin font in windows !
}
Saving a stylesheet :-
To save a stylesheet, Hit CTRL + S to save it. Type its name and after its name, Type .css so that our computer knows that it is a CSS file. Make sure to save HTML and CSS files in the same directory for example if you've saved HTML file in C drive, Make sure that you also save CSS file in C drive else our styling won't work.
Linking a stylesheet :-
Open your previously created html document. Inside the <head></head> tag, Type in <link />. After link and in between < /> type rel="stylesheet" type="text/css" href="nameofyourstylesheet.css". This is the syntax to remember and it is a must to link stylesheets or any other documents like javascript e.t.c . The "rel" keyword shows the relation of a file, Since the file we're linking is a stylesheet that is why we've typed stylesheet. "Type" shows the type of a document. Since the document contains text which is in the form of css, That's why we've typed "text/css" and lastly "href" specifies the name and extension of the file. Type in the name of your css file and add css extension after it. Make sure that the CSS and HTML files both are in the same directory and are saved with .css and .html extension respectively.
Here is the code final code :-
<html>
<head>
<link rel="Stylesheet" type="text/css" href="stylesheet.css"/>
<title> My Website </title>
</head>
<style>
</style>
<body>
<p> I will style this using a separate style sheet </p>
</body>
</html>
Code output :-
