Technically, it's possible to create a web page using only the capabilities of HTML, but its appearance will not seem modern and pleasant to the eye. In order to give the web page a unique design without resorting to programming and overly difficult logic, you can use the CSS (Cascading Style Sheets) technology. With the help of CSS, it is possible to change the color of the elements, the font, text style, as well as the size and location of individual blocks on the page.
You can connect CSS styles found on the Internet to your HTML file or write your own. An example of ready-made CSS templates is Bootstrap. CSS styles are saved in files with the corresponding extension .css. The number of styles you can connect is unlimited. However, remember that heavy styles may slow down the rendering of the page.
This topic covers the several ways to connect CSS files to an HTML document.
External CSS
CSS styles written in a separate file are called External Style Sheets. To include External Style Sheets in an HTML document, use an unpaired <link> tag. Take a careful look at the syntax in this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Connecting External CSS to HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>The href attribute specifies the file's address, and the rel attribute with the stylesheet value tells the browser that we are connecting styles and not something else.
It is best to include the styles inside the <head>, but it's not a strong requirement. The <link> tag will also work fine elsewhere on the page.
Internal CSS
You can write CSS styles directly in HTML markup instead of a separate file. We call these sets of styles Internal Style Sheets. They go inside a paired <style> tag within the <head> section:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Connecting Internal CSS to HTML</title>
<style>
There should be a CSS code here
</style>
</head>
<body>
</body>
</html>This method of connection is good only when there are very few styles. Remember to always put the CSS code in a separate file. This practice makes HTML code cleaner and lets you reuse CSS for other web pages.
Inline CSS
You can also define a style for a single element using the HTML attribute style. In this case, CSS properties are written as attribute values:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Connecting Internal CSS to HTML</title>
</head>
<body>
<p style="css property; css property;">Inline CSS</p>
</body>
</html>CSS priority
When applying CSS to HTML document, there's a hierarchy of specificity that determines which styles take precedence. This hierarchy is especially important when dealing with External CSS, Internal CSS, and Inline CSS:
Inline CSS: Has the highest priority. Styles applied directly to an element using the style attribute will override other styles.
Internal CSS: Defined within the
<style>tag in the HTML document. It has higher priority than external CSS, but lower than inline CSS.External CSS: Linked using the
<link>tag. It has the lowest priority among these three methods.
When using multiple external CSS files, the order of linking in the HTML document matters. Files linked later in the document have higher priority over those linked earlier.
For example:
<link href='styles.css' rel='stylesheet' type='text/css'>
<link href='theme.css' rel='stylesheet' type='text/css'>
<link href='layout.css' rel='stylesheet' type='text/css'>In this case, layout.css has the highest priority among the external stylesheets, theme.css has medium priority, and styles.css has the lowest priority. This principle allows developers to organize their stylesheets effectively, with more specific styles overriding more general ones.
Conclusion
Now you know how to connect CSS to your web page in three different ways, so you can make your page truly appealing and very unique. Understanding how to effectively use and prioritize these methods will enable you to create visually appealing and well-structured web pages. Remember to use external stylesheets for large and reusable styles to keep your HTML clean and maintainable.