PAB - CSS - File Including in Html

Css - Article 1

Programming a Baby series

PAB ( Programming a Baby ).
CSS.
Doc Include (Include CSS in HTML).
This article belongs to one of my collections of articles with same reference.

CSS means Cascading Style Sheets
CSS is from far, the best way to style your Html Document, a very organized Code Language that transform completely any web page.
In this Article i will tell you how to Include a Css document inside a Html file, and i will show you how it happens the interaction between the two.

Lets work ;)

In the Sample 1.1 we have a simple web page with no refering to XHtml or Css
In the Sample 1.2 we give a ID to an Div element that we also create in the Body

Sample 1.1 - a simple HTML code with no references

<html>
<head>
<title>My Title</title>
</head>
<body>
</body>
</html>

Sample 1.2 - another HTML code with some references

<html>
<head>
<title>My Title</title>
</head>
<body>
 <div id="myID1"> 
  ...Some Text
 </div>
</body>
</html>

IDs are Identifiers which can be used by the styling arguments or by script languages to model each element inside you HTML document.
You can only have an unique ID per element.
If you desire to give the same format to several HTML elements, you must use a CLASS instead of using an ID.

Create your CSS file now

With a Notepad text file document we create a Css document by rename it for example design.css
Open the Css file and Write some Css code like the one you can see in the Sample2
Note:

You must see the entire file name with it's extension in your desktop e.g.: [ myFile.txt ] and not only [ myFile ] .

if you cannot see the file extensions in WINDOWS OS, then do this:
in WINDOWS 10 open your [FILE EXPLORER], click [File - change folder and search options - view ] and uncheck the [hide extensions for known file types]
in WINDOWS 7/8 open your [FILE EXPLORER], press the [ALT] keyboard key, [Folder options - view ] and uncheck the [hide extensions for known file types].
You have to place the HTML and the CSS file inside the same folder.
To open the CSS file for editing, right click the file and click on EDIT or open with... notepad.

Sample 2 - CSS file with 2 IDs and 1 CLASS

	
#myid1 {
 font-size:18;
 color:blue;
 background:yellow;
}

#myid2 {
 font-size:14;
 color:blue;
 background:yellow;
}

.myclass1 {
 font-size:16;
 color:yellow;
 background:black;
}

Now we return to our HTML document and:

In the HTML Head we Link to the Css document with the link head's element
See how the ID that is mentioned in this document will capture all information from the Css document bringing the font size, color, background color...etc to the Div element that owns this ID

Check the Sample 3 where you can see the HTML code with the LINK calling the other CSS file.

Sample 3 - HTML file with the include CSS file reference

	
<html>
<head>
<title>My Title</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <span class="codeComment">...Some Text</span>
</body>
</html>

Go to the Next article >> My First CSS file

<< Return to the index of CSS Articles

Author: Paulo Portela : created between 2009 and 2013