Creating and using a separate style sheet of CSS in HTML.

frstwalket (34)in #programming • 7 years ago

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 :-

We will get started by typing the basic HTML tags and code as we did it in my previous blog

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>

As we already wrote or basic html code, Let's move on and create a Style sheet

Creating an external Stylesheet :-

Open a new document, Press 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 :)

In my case, I will style all the text inside <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 :-

If you did everything right, Your code must work as desired. Go ahead and run the code in any of your browsers. Here is what it will look like :-
Code output1.JPG