Contact Us:
07002007332
CheapDeveloper
CheapDeveloper » Webmaster » Articles » How to properly link CSS to HTML

How to properly link CSS to HTML

14 December 2021, Tuesday By Priyanka Boruah
101
0

Let's take a look at how to apply CSS to websites and applications. 

CSS is a style sheet. It determines how your site will look, colors in the design, fonts, arrangement of elements, etc. Therefore, it is impossible to do without CSS when creating websites and web applications. It is important to be able to use this tool correctly during the development of your project. 

Styling HTML

There are several global tags in HTML:

  • <html> - the entire page is wrapped in it.
  • <script> - it can store application logic or a link to individual scripts.
  • <style> is a block where you can write CSS-markup.

In the <style> block, you can use all the existing CSS properties. Change the color of individual page elements, access and resize selectors, make media queries to create a responsive layout, and do a lot of other tasks. 

In code, it might look like this:

<html>
 <p>Some content</p>
 <p class="text">Some other content</p>
</html>

<style>
 p {
  color: red;
 }
 .text {
  font-size: 24px;
 }
</style>

We have applied CSS to the page. There is no need to add additional styles to our site.

inline styles

It is not necessary to write styles in a separate block. You don't have to use the <style> tag at all. You can use the attribute of the same name. 

Attributes are parameters specified in HTML elements. class or id are attributes. If you want to change the style for the div block , then after its class you need to write style and specify the styles in CSS format one by one. In real code, it might look like this:

<html>
 <div class="container" style="display: flex;">
  <p style="color: blue;">Greetings</p>
 </div>
</html>

We set the flex property on the div and changed the color of the text inside to blue. 

This approach is very convenient if you need to quickly adjust the design of an element or select a specific one in a series of identical blocks with content and style it differently. By styling one div, you won't affect the rest. If you need to customize the styles more widely, you still have to use the <style> block or a separate file with CSS markup.

Styling in a separate CSS file

This is the most common method for connecting CSS to a website or application. It is used both when working with the classic HTML/CSS/jаvascript stack and when connecting frameworks in the spirit of React. 

Styling in a separate CSS file

The connection is made in different ways depending on the technologies used. 

Related: What is jаvascript: purpose, features and scope of the language

Standard HTML connection

You need to add the link meta tag in the HTML file. The link meta tag - link type - the  address of the style file.

<link rel="stylesheet" href="styles.css">

The HTML file will automatically collect all the styles from the included file based on the classes and other parameters specified in the markup. 

Connecting with Webpack

If during development you use a package builder, then you need to register a special plugin in it. For example, css-loader, which converts all added CSS files into a single set of styles used in the application. 

Connecting to the React framework

React uses the ECMAScript2015 standard. The import directive is used to work with CSS. 

Dividing styles into groups

Placing styles in separate CSS files not only makes it easier to edit and manage styles, it also saves you having to add more code to a single document. 

To do this, you can use any of the methods described above, but repeat it several times. For example, write the import directive several times, specifying different addresses. Or add additional links to CSS documents to the list of meta tags. 

Connecting someone else's CSS styles

If desired, other people's styles can also be used. In the <link> tag, for example, you specify the local address of the site, but you can also insert a link there.

This can be useful if you want to use a normalizer (a special file with CSS code that removes specific tags and properties, trying to eliminate any discrepancies in the work of different browsers). 

Also, external styles can be used to add a single style from some generally accepted design system (often component). 

other methods

Some frameworks use CSS without CSS files as they are. This is how the TailwindCSS framework works. Immediately after installation, it automatically becomes available in the application at the global level, and you just have to use the added classes in any part of the application without the need to separately include CSS.

Also, some component libraries, such as Vue and Svelte, do not require storing styles in a separate directory and move the user to use styles within <style> blocks.

Instead of a conclusion

CSS can be different, and in some situations it is better to use external styles, and in some situations it is better to write them directly in tags with HTML elements. You will learn with experience which method is better and you will be able to vary the method depending on the technology used. The main thing is to write correct CSS code.

Related: The "rel =" attribute: what it is and what it is for

Discuss
Add a comment
Comments (0)
Comment
Partners