Now it’s hard to imagine changing the appearance and formatting of HTML documents without using CSS stylesheets, since HTML has long ceased to be a self-sufficient language for design and began to fulfill its original functions of structuring and marking up web documents. In this article, we will explain in detail how to connect CSS to an HTML document.
CSS and HTML in brief
Previously, web pages were designed exclusively with HTML. Now this approach is not practiced, and CSS tools are used for styling, which have very wide possibilities for creating an amazing design.
In order for the site design to display correctly, you need to connect CSS to an HTML document, these tools work inextricably from each other - HTML creates a structure, and style sheets are responsible for the appearance.
There are several basic ways that you can customize the display of styles in HTML code, each of which has its pros and cons.
CSS file attachment
This is the main method, which is considered by developers as the most practical and convenient.
Using this method, you can quickly change the design of a web page if you have the specified structure of an HTML document - for example, for the same site you can write several design options and connect them depending on the corresponding need.
In order to connect a file with styles, you must first configure the file structure - this is done so that you can register the correct path to the desired document directly in the code.
Create a directory where the main HTML document will lie, in the same folder, create a file in the text editor with the name style and save it in .css resolution. It will contain CSS code with all the specified rules for styling the document.
CSS is connected using the HTML <link> tag with the href attribute. It looks like this:
<head> <link href="style.css" rel="stylesheet"> </head>
Here the code is located in the <head> tag, this is considered optimal, but not necessary. It can be located anywhere in the document.
This method is convenient because all changes to the stylesheet are made in a separate file, which facilitates understanding and readability of the code and makes the document more accurate.
If you make changes to style.css and open index.html in a browser, you can see all the changes that have been registered.
In the same way, you can specify not only the path to the file in the structure of the site, but also a link to a page with a style located on the Internet. In this case, it also fits in quotation marks after the href attribute.
The method of connecting a stylesheet from a separate file optimizes the site, as it allows the browser to load data from the cache, as a result of which the pages load faster.
Style Sheets Inside an HTML Document
Sometimes the value of a style parameter is set directly in the body of an HTML document using the style attribute.
Syntax:
<p style="color:red"> </p>
The obvious drawback is the lack of versatility, you will have to register a value for each tag.
Also, connecting CSS to HTML using internal style sheets does not allow the browser to cache information, unlike the previous method.
This method is not recommended, it overloads the document and slows down browser perception. If a document uses several styling options, then the internal style sheets will be in priority.
Global style
If you want to style a specific element in the entire HTML document, use the <style> tag. In this case, you do not have to register the values each time, but you can specify them once.
The code will look like this:
<head> <style> H1 { font-size: 130%; font-family: Georgia; color: #000000; } </style> </head>
The specified style will be applied to the <h1> tag as soon as it is registered on the page.
Connecting CSS in this way will be in the priority of reading the browser higher than the external style sheet.
How to connect a font to the site
A font is one of the basic design elements of any web page. The impression that the site makes on the user depends on the font used. Fortunately, you can not be limited to standard headsets, it is possible to connect any others - we’ll tell you how to do it.
Using CSS, fonts are connected as follows:
- Find and download a suitable headset.
- Open the CSS file and write the following code in it:
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans.ttf") format("truetype"); font-style: normal; font-weight: normal; }
First, the font name is set, then the path to it, at the end - parameters. Please note, in this example, the font file is located in the fonts folder, which, in turn, is located in the root directory. For convenience, it is better to create separate folders for various files and elements (images, scripts, style sheets, etc.).
So, in the fonts folder we have a file called OpenSans.ttf, with the usual parameters. Now it will be displayed in the browser.
We connect a font through Google Fonts
One of the most common ways to include fonts in CSS and HTML is the Google Fonts service.
The interface is intuitive - you need to find a suitable font by name or given parameters, click the Select this font button, and the service instantly generates code that is inserted into the <head> tag field of the HTML document, as well as into the corresponding CSS file with styles.
How it should look in HTML:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
And in the CSS file with styles:
font-family: 'Open Sans', sans-serif;
This method is convenient in that it allows you to quickly find the desired font from a very large database and saves a lot of time, and also eliminates the problems that arise due to incorrect display of fonts in some browsers.
To summarize
So, we looked at the main ways to connect CSS styles to HTML documents. Based on the tasks that are set before the developer in each case, you can choose the most priority option.
Web page design is a creative process that requires, however, a neat approach. Take the opportunity to comment on the code and do not forget about website optimization.