External CSS

When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a “.css” file extension. This CSS file is then referenced in your HTML using the instead of
File Creation
Let us get started by making that external CSS file. Open up notepad.exe, or any other plain text editor and type the following CSS code
CSS Code:

body{ background-color: gray;} 
p { color: blue; } 
h3{ color: white; }

Now save the file as a CSS (.css) file. Make sure that you are not saving it as a text (.txt) file, as notepad likes to do by default. Name the file “test.css” (without the quotes). Now create a new HTML file and fill it with the following code.
HTML Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.  
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>

Then save this file as “index.html” (without the quotes) in the same directory as your CSS file. Now open your HTML file in your web browser and it should look something like this
Why Use External CSS?

  • It keeps your website design and content separate
  • It’s much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the “link” tag.
  • You can make drastic changes to your web pages with just a few changes in a single CSS file

CSS Inline
Thus far, we have only shown you how to use CSS the way it was meant to be used — separated from the HTML. However, it is possible to place CSS right in the thick of your HTML code, and this method of CSS usage is referred to as inline css.
Inline CSS has the highest priority out of the three ways you can use CSS: external, internal, and inline. This means that you can override styles that are defined in external or internal by using inline CSS. However, inline CSS detracts from the true purpose of CSS, to separate design from content, so please use it sparingly.
CSS Inline – An HTML Attribute
Believe it or not, CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Let’s add some style to a paragraph tag.
CSS Code:

<p style="background: blue; color: white;">A new background and
 font color with inline CSS</p>

If you have read through the beginning of this CSS tutorial, you probably have a good idea of what is going on. Below is the general form for setting inline CSS in any HTML element.

rape porn

Admin has written 171 articles