Link to css file in html body

Linking CSS to HTML: a guide with examples

When it comes to websites, it’s not just the content that counts, but also its presentation. The style sheet language CSS is commonly used to format HTML appropriately. In this way, attributes such as layout, color, and shape of the individual HTML elements are defined. The CSS design instructions exist independently of HTML and must also be integrated into an electronic document.

Web hosting with a personal consultant

Fast and scalable, including a free domain for the first year and email address, trust web hosting from IONOS!

How to add CSS in HTML: which methods exist?

Linking CSS to HTML is possible with internal or external style sheets. With internal style sheets, the CSS instructions are located inside the HTML document. You can then integrate CSS at the beginning of the HTML file or place it in the source code. With this method, a good basic understanding of HTML and its syntax is an advantage. The most common and cleanest way to develop websites is to use external CSS style sheets. The CSS is integrated by linking the HTML document with an external CSS file. The following is an overview of the three methods:

• Inline style, i.e., directly in the source code
• At the beginning of the HTML document
• Outsourced to an external CSS file

The IONOS MyWebsite Website Builder includes a wide range of design templates so you can create a professional-looking website.

Include CSS: inline style

With this method, the design instructions are integrated directly into the source code using a style tag. The desired properties are only assigned to one element, so that deviating designs are possible throughout the HTML document. In the example below, the heading h1 is to be displayed in blue and font size 14:

With this type of integration, many of the advantages of CSS are lost. This includes the option to define a single command that then applies, for example, to all h1 elements in the HTML document. In some circumstances, there’s also a greater maintenance effort, because direct intervention in the HTML code is required.

Add CSS at the beginning of HTML

Here, you include CSS in the header of your HTML document. The style tag thus becomes part of the head element and applies to the entire file. The design instructions are contained in the document but are separated from the HTML code. In the example below, the same command applies as in the previous example. This time, however, all h1 headings in the file should be formatted according to the information.

    h1 
This is a headline
 
This is a paragraph
   

Integrate CSS with an external file

This is possibly the best method to link CSS to HTML. A website often consists of many pages, so it makes sense to save design instructions in a separate file. This enables a clean separation between content and design and eases maintenance. The exported file is simply linked to the HTML document. You save the external stylesheet with the extension .css and then use a link tag to include it in your HTML file. In the following example, the CSS file is named stylesheet.css.

    
This is a headline
 
This is a paragraph
   

The rel attribute defines the logical relationship type; and href refers to the CSS file to be embedded. Note that the link element can take on other attributes. With media = «print» you specify, for example, that the stylesheet is only used in the print view. The external stylesheet does not contain any HTML tags, just the respective selector and curly brackets with the declarations as in the following example:

Discover the best CSS tricks to optimize the design of your web project or trust our IONOS Website Design Service for professional results.

Related articles

How to compress CSS for consistent loading times

It’s rare to see creative information directly placed into HTML code. Colors, fonts, and sizes of HTML elements are normally defined in style sheets, such as CSS. The more complex a website becomes, the more the range and amount of required CSS files increase. The extra burden can have a considerable effect on your website’s loading time, but this can be avoided by compressing your CSS.

CSS Grid Tutorial

How can you create a nice-looking layout if you don’t know the size of the display area? With CSS Grid, it’s no problem at all! The technology allows web designers to define their own grid and then place all elements within it. Thanks to automatisms and smart functions, the CSS Grid Layout adapts dynamically to different displays.

Typography in responsive web design — part 3: technical implementation with CSS

Responsive typography is a much-neglected aspect of responsive web design, but it’s actually surprisingly easy to create a responsive design for both headlines and main text. So what’s the secret? Find out in part three of our series, as we give you a run-down of the implementation of a responsive font and share tips on how to embed CSS commands into your web presence.

Tailwind — The CSS framework

If you’ve already got some experience working with CSS and are looking for a particularly flexible and individual framework Tailwind CSS is a great choice. The solution for professionals simplifies work and offers numerous design options. Read on to find out more about the framework and why beginners may fare better using an alternative to Tailwind CSS.

How to use padding vs. margin in CSS

The multitude of commands that a programming language like CSS includes can be challenging. But there’s no need to worry. In our CSS padding vs. margin overview article, you’ll learn the key differences between these two formatting commands. We’ll also introduce you to the memorable box model so you can easily tell padding vs. margin apart.

Источник

Link to CSS and JavaScript in an HTML File

The purpose of this tutorial is to teach you how to link to CSS and JavaScript files within an HTML file. It is possible to write CSS and JavaScript directly inside an HTML document, but it is generally best to keep these three languages in their own separate files.

Contents

1. Directory and File Structure

It is a good idea to keep your HTML, CSS, and JavaScript files in separate directories. Create a directory for your project called css-and-js . Inside this directory, create three additional directories. Call them html , css , and javascript .

Inside your html directory, create a file called css-and-js.html . Inside your css directory, create a file called styles.css . And inside your javascript directory, create a file called script.js .

2. HTML

In order to link to your CSS and JavaScript files, you will need an HTML document within which to work. Open css-and-js.html and enter the following HTML:

  lang='en'>  charset='UTF-8'/> Linking to CSS and JavaScript   

Be sure to save your work any time you add code to your files. In the next two sections, we will go over what you need to add to your HTML document in order to link to your CSS and JavaScript.

3. CSS

First, you will need to add something in the body of your HTML to apply styling to. On the next line after the opening tag, indent and add the following:

 If this text is red, then you successfully linked your CSS file! 

As it stands, this text will appear in the color defined as the root color in the browser’s default stylesheet – usually black. In order to change the color of the text, open your styles.css file and add:

The final step in this section is to link to the CSS file inside your HTML document. Enter the following in the section on the line after the closing tag:

 rel='stylesheet' href='../css/styles.css'> 

The element must be placed in the section of the document. Notice that the element is an empty element, so it does not need a closing tag.

The rel attribute defines the relationship between the resource and the HTML document. The href attribute points to your CSS file.

Since the file is located in another directory, you must specify the path by going up one directory using two dots ( .. ), followed by a slash ( / ), the directory your CSS file is in ( css ), another slash, and then your CSS file name ( styles.css ): href=‘../css/styles.css’ .

This is what your HTML document should look like so far:

  lang='en'>  charset='UTF-8'/> Linking to CSS and JavaScript  rel='stylesheet' href='../css/styles.css'>   If this text is red, then you successfully linked your CSS file!   

4. JavaScript

Next, you will need to add some code to your JavaScript file. Open script.js and add:

alert('You successfully linked your JavaScript file!'); 

Save your work and navigate back to your HTML document. The final step is to link to the JavaScript file inside your HTML document. Enter the following in the section on the line after the element:

It is considered the best practice to place the element in the section just before the closing tag.

The src attribute points to your JavaScript file.

Since the JavaScript file is located in another directory, you must specify the path in the src attribute: src=’../javascript/script.js’ .

That’s the last bit of code you will need to enter. This is what your HTML document should look like:

  lang='en'>  charset='UTF-8'/> Linking to CSS and JavaScript  rel='stylesheet' href='../css/styles.css'>   If this text is red, then you successfully linked your CSS file!  src='../javascript/script.js'>   

Be sure to save your work in each of your three files. Now it’s time to see if the links work. Open your css-and-js.html file in the browser of your choice. When you open the file in your browser, you should first encounter an alert box with the message you wrote in your JavaScript file. After clicking OK, the text you entered in the of your HTML should appear red.

If the alert box does not appear or if the text is not red, go back through the steps in this tutorial to ensure everything is entered exactly as shown here.

Congratulations! You’ve now linked to CSS and JavaScript files within an HTML document.

Источник