My FeedDiscussionsHashnode Enterprise
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

How To Style Html Using External Css

Ogbonna Jeneven's photo
Ogbonna Jeneven
·Jun 30, 2022·

3 min read

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS can be added to HTML document in three (3) different ways

  1. Inline: by using the style attribute inside HTML document.
  2. Embedded: By using a style element in the section.
  3. External: By using a element to link to an external CSS file.

External CSS are created in a separate document with a .css extension. An external style sheet is simply a listing of CSS rules. It cannot contain HTML tags. The tag, which goes in the head of an HTML page, is used to link to an external style sheet. There is no limit to the number of external style sheet a single html page can use. You can link your CSS file to your HTML file by adding a link element inside the head element of your HTML file. This is how the html document will look like;

<html>
<head>
<title></title>
<link rel="stylesheet" href="Jenny.css">
</head>
<body>
</body>
</head>
</html>

Then it is connected to a special file called style.css. This file contains all the CSS rules:

/ Jenny.css /

body {

background-color: pink; color: purple; }

#h1 { color: brown; }

The style sheet looks just like a page-level style, except for a few key differences:

• The style sheet rules are contained in a separate file: The style is no longer part of the HTML page but is an entirely separate file stored on the server. CSS files usually end with the .css extension.

• There are no tags: These aren’t needed because the style is no longer embedded in HTML.

• The code begins with a comment: The / / pair indicates a comment in CSS. Truthfully, you can put comments in CSS in the page level. External CSS files frequently have comments in them.

• The style document has no HTML: CSS documents contain nothing but CSS. This comes closer to the goal of separating style (in the CSS document) and content (in the HTML document).

• The document isn’t tied to any particular page. The great advantage of external CSS is reuse. The CSS document isn’t part of any particular page, but any page can use it.

The link tag The tag is the key to adding a CSS reference to an HTML document. The tag is used to relate the document with another document. You use the tag to describe the relationship between documents. You will have to use a tag in your HTML document to specify which CSS document will be used by the HTML page. Unlike the other tags, the tag can occur only in the header. The tag has no visual presence the user can’t see the tag, only its effects. Here we use the rel and href attribute

  1. rel attribute: which defines the type of relationship. For now, the only relationship you’ll use is the stylesheet attribute. You'll write rel="stylesheet" to tell the browser that you are importing a stylesheet.

2. href attribute: which describes the location of the other document. You’ll write <link rel=”stylesheet” href=”style.css”

In addition, with the external style sheet, you can change the look of an entire website by just changing one file, you just need to reference the external style sheet in the HTML page