How do I use and in HTML

Embed CSS in HTML: Instructions with examples

When it comes to a website, it's not just the content that matters, but also its presentation. The stylesheet language CSS is used to format HTML in an appealing way. 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 first be integrated into the electronic document.

Inexpensive web hosting packages from IONOS!

Trust in flexible, scalable and reliable web hosting including a personal advisor with IONOS!

Free domain
SSL certificate
DDoS protection

Integrate CSS: Which methods are there?

If you embed CSS in HTML, this is through internal or external style sheets possible. With internal style sheets, the CSS instructions are located directly in the HTML document. Here you have the option of using CSS at the beginning of the HTML file to integrate or to accommodate directly and continuously 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

With the MyWebsite website builder, you can choose from many ready-made design templates and thus achieve a professional look for your website.

Include CSS: Inline style

This method uses a style-Tags integrated directly in the source code. The desired properties are only assigned to one element, so that deviating designs are possible in the course of the HTML document. In the example below, the heading should be h1 can be displayed in blue and font size 14:

With this type of integration, it should be noted that many of the advantages that CSS brings with it are lost. This includes the option of defining an overarching command which, for example, applies to everyone h1Elements in the HTML document applies. Under certain circumstances, there is also a greater maintenance effort, as there is direct intervention in the HTML code.

Include CSS at the beginning of HTML

With this variant, you include CSS in the header of your HTML document. The style-Day becomes so to part of headElements and applies to the entire file. Here, the design instructions are still in the document itself, but are much better separated from the HTML code. In the example below, the same command applies as in the previous example. This time, however, everyone should h1- Headings in the file can be formatted according to the specifications.

Integrate CSS with the swapped file

This is probably the best way that you can wrap CSS in 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 makes maintenance easier. The exported file is simply linked to the HTML document. You save the external stylesheet with the ending .css and then use a link-Dayto include it in your HTML file. In the example, the CSS file has the name stylesheet.css.

The attribute rel defines the logical relationship type here and href refers to the CSS file to be embedded. Note that the linkElement can also have other attributes. With the property media = "print" For example, you can specify 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:

Learn the best CSS tricks to optimize the design of your web project or trust the MyWebsite Design Service for a professional implementation.

Similar articles

Compress CSS and improve performance

Design information that is directly in the HTML code is rather rare. Colors, fonts or the size of HTML elements are nowadays defined as standard in style sheets such as CSS. If the website becomes more complex, the size and number of CSS files required also increase, which can have a significant impact on the loading time. Then it helps to compress this CSS.

Typography in Responsive Web Design - Part 3: Technical Implementation with CSS

Typography is an often neglected field in responsive web design, although the design of an adaptable font is not an expert secret. How can this be achieved? And which web fonts are suitable for a responsive typeface? We give you an insight into the technical implementation of responsive web typography and how you can add it to your website using CSS ...

CSS Grid: layout with intelligent functionality

How are you supposed to create a nice looking layout if you don't know the size of the display area? This is no problem with CSS Grid! The technology enables web designers to define their own grid and to place all elements in it. Thanks to automatisms and intelligent functions, the CSS grid layout adapts dynamically to different displays.