adding CSS into HTML

CSS 
G:hackHTMLmyCSS-Tutorial�3- adding CSS into HTML�1.jpg

You can add CSS into your HTML codes in 3 ways.

  1. External CSS: We can create CSS source code outside our HTML
    codes and then create a link to that CSS file using <link>
    element. This way we separate HTML from CSS which it helps us stay
    organized. Browsers also save external CSS files of a webpage so later
    on when a user revisited the webpage, browser doesn’t need to request
    the server for the CSS of the webpage again because it already has it.
    This increases the speed of webpage loading and creates a better user
    experience.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<link rel="stylesheet" type="text/css" href="css-files/example.css">
</head>
<body>
<p>With the help of external CSS, there's a visible border around me</p>
</body>
</html>
There are 3 attribute for <link> element:

1- “rel” attribute: We use “rel” attribute in order to define the relation of an external file to our webpage. The value of this attribute is “stylesheet” when we want to insert CSS file. Using this value, browsers know that this external file is the stylesheet of this webpage.

2- “type” attribute: We use “type” attribute to declare the media type of this external file. When you create a CSS file, you must save the file with “.css” as the extension (this is the format of CSS files). Because our file extension is “.css” we then set the value of this attribute to “text/css”. Using this value browsers know the accurate format of this external file. Basically using “type” attribute helps browsers to figure out how to read the content of the external file.

Also if you omit this attribute, browsers have to guess the type of the file using “rel” attribute. In this case because the value of “rel” attribute is “stylesheet”, browsers will choose “text/css” by default.

3- “href” attribute: “href” stands for Hypertext Reference and we use this attribute to declare the address of the external file.

Note: External CSS file should not have any HTML element.

Here’s how example.css file looks like:

p{
border: double;
}

  1. Internal CSS: we can insert CSS directly to an HTML source code.
    This is a good idea if we have just small number of webpages and we
    didn’t need large CSS codes for our webpages.

In order to add internal CSS, we use <style> element. Usually this element resides within the body of <head> element.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
border: double;
}
</style>
</head>
<body>
<p>With the help of internal CSS, there's a visible border around me</p>
</body>
</html>

The “type” attribute in <style> element has the same purpose as the “type” attribute within the <link> element.

  1. Inline CSS: Each HTML element has an attribute named “style”.
    With the help of this attribute, we can directly add CSS to an HTML
    element. We use this attribute when we want to add a unique style to
    only one element.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
</head>
<body>
<p style="border: double;">With the help of inline CSS, there's a visible border around me</p>
</body>
</html>

Note: You can have multiple external and internal CSS source codes in your HTML file at the same time.

Example:

Let’s say you have 2 external CSS files named css-file1.css and css-file2.css

The content of the css-file1.css is:

p{
font-size: 32px;
}

Basically the CSS code within the body of this file is used to change the font size of a <p> element.

Also the content of the css-file2.css is:

p{
color: red;
}

The CSS code of the css-file2.css is used to change the color of a <p> element.

Also let’s say you have an internal CSS file like this:

<style type="text/css">
p{
border: double;
}
</style>

The CSS code within the body of this internal CSS code is used to set a border around a <p> element.

Now let’s put all these 3 CSS codes into an HTML file:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<link rel="stylesheet" type="text/css" href="css-files/css-file1.css">
<link rel="stylesheet" type="text/css" href="css-files/css-file2.css">
<style type="text/css">
p{
border: double;
}
</style>
</head>
<body>
<p>css-file1 changed the font-size, css-file2 changed the color and internal CSS code set the border around this paragraph. </p>
</body>
</html>

When you run this example, you’ll see all three CSS resources applied their codes on the <p> element in this HTML source code.

One thing you should remember is the fact that browsers replace <link> elements with their actual CSS content. Somehow this is how these multiple CSS resources look like in an HTML file when a browser got the two external CSS files and combine all three CSS resources together:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
font-size: 32px;
}
p{
color: red;
}
p{
border: double;
}
</style>
</head>
<body>
<p>css-file1 changed the font-size, css-file2 changed the color and internal css code set the border around this paragraph. </p>
</body>
</html>

Note that the content of the css-file1 replaced at the top, right where <link> element of the css-file1 was and the content of the css-file2 came after because the <link> element of this resource was after css-file1. And the last CSS resource is the internal-CSS because it was placed after css-file1 and css-file2.

The order in which we place CSS resources (external or internal) in our HTML file is very important because of the “Cascading-concept” and the way in which Selector works.

We will explain what the Cascading and Selector are and how they work in the next section.