Friday, January 4, 2019
DETAILED GUIDE ON HOW TO USE EXTERNAL CASCADING STYLE SHEET
In today’s lesson, I will be teaching you how to use the best type of Cascading Style Sheet, known as External CSS. External styling is the most recommended and easiest way of using CSS file in HTML. Unlike its counterparts (inline and Internal CSS), External Cascading Style Sheet is highly organized and usually kept in a different file using .css extension. This is then referenced in the HTML document by simply using the <link> tag instead of writing the whole CSS codes in the document. Do not be flustered, I will exemplify everything I said above as we move on.
It is pertinent to note here that external CSS URL can either be a relative or absolute path. Let me briefly explain what I mean here. When the external styling URL is absolute, it means that the URL starts from the operating system root directory (e.g C://Daniel21/myHTML/CSS/mycode.css). This is however very dangerous to use because it is not portable and usually require your web server host to have the same exact folder structure. I do not recommend this. The one I recommend is the second type of external styling URL which is ‘’Relative path’’.
Relative paths are simply the URLs that are relative to the current folder where the page is created. For example, ‘’Mabelstyle.css’’ means that you look for the file named ‘’mabelstyle’’ in the same folder as the current page. When we get to the practicals you will understand better.
Shortly, I would like you to take note of these few things below; there are going to be helpful later on:
a) href : means hypertext reference. It defines the actual link destination you want to refer to.
b) rel: specifies the relationship between the current document and the linked document.
c) <link>: it is a tag that helps to connect HTML to CSS. It is always within the head section.
d) <link rel=’’stylesheet’’ href=’’#’’>: is the formula for introducing an external CSS file.
e) Hashtag ‘#’: is where you put an external CSS URL.
Now let us consider some examples
Open your text editor and write the following CSS codes
p1{
color: yellow; background-color: black;
}
p2{
color: white; background-color: green;
}
It will look like this
Save it in a folder using ‘’.css’’ as an extension of your filename (e.g mycss.css) instead of .html.
Go back to your text editor and open a new tab. Then write the following HTML codes below
<!DOCTYPE html>
<html>
<head>
<title>Codinglegit</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<p1>I love codinglegit very much</p1> <br />
<p2>Thanks to Daniel Unachukwu Foundation for sponsoring this free Tutorial</p2>
</body>
</html>
It will look like this in your text editor
Save it in the same folder you saved CSS file using ‘’.html’’ as its extension (e.g mycode.html)
Then open the HTML file using your web browser. You will see something like this
WRAPPING UP
Practice as many times as you want using your own different codes and colours. In our next lesson, we will be looking at a very crucial subject matter in CSS. See you then.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment