How CSS Separates Content and Design
How to Separate Content and Design with CSS
A good website is always composed of well-structured HTML documents and beautiful design that can attract users’ attention. Such a website will enhance the overall interactivity of the website and make it more attractive.
When we apply styles to web pages, we use Cascading Style Sheets, or CSS for short. By using CSS, we can more easily make our websites presentable. It distinguishes between the structure of an HTML document and its presentation—the elements that users see and interact with.
Having a unique and creative style has become a must-have feature for a website, as opposed to simply using HTML to create a bland website.
Incorporating CSS
There are three different ways to incorporate CSS into our website –
- Inline Styles – When we apply styles to each individual HTML tag, it is called inline styling.
-
Inline Styling – The head tag is enclosed within the style tag, giving the impression that the CSS is incorporated into the HTML file. This is when the term “embedded styles” is used.
-
External Styles – This is the most recommended technique for using CSS because it separates the CSS from the HTML. The HTML content is linked to a single CSS file that contains all the styling information. Using this styling method, we can attach multiple CSS files.
We can significantly reduce the length of code we use by using a single file and grouping similar formatting types into the same attributes. This helps maintain your code, as fewer lines of code make it easier to find errors and greatly improves the overall readability of your code.
Another benefit of using a separate file for your CSS is that you can reuse the same file as often as you like, unlike traditional formatting, where you have to repeat the formatting on each page. You can reuse the file by importing it or linking it to a form.
Linking to Files Using the Link Tag
As already discussed, we can separate the content (structure) of a web page from the design (formatting and style) of the page by using a .CSS file, which will be linked into the HTML document. We can use the html tag to link a CSS file to an HTML file.
We use the link tag to specify a relationship between two files. It’s a blank element, meaning it doesn’t have any opening or closing tags, nor is it a self-closing tag. All the information it needs is stored in its attributes. There are many attributes that can be used with the link tag, but the ones we’ll use are defined below.
- Rel – This is a required attribute for the link tag. It specifies the relationship between the document we’re currently working on and the document we’re trying to link to. Typically, we only use stylesheets or bookmarks as relationships.
-
Href – This is used to specify the URL of the file we’re linking to.
The link tag is used within the head tag. We can have multiple instances of the link tag in the same document, each pointing to a different file. The syntax for using the link tag in HTML to link to a CSS file is as follows:
<link rel=”the Relationship” href=”source” >
Example
Let’s look at an example of using the link tag to separate the content and design of a web page.
HTML part
<html>
<head>
<title>Separating Content and Design using the link HTML tag</title>
<style>
body {
background-color: rgb(230, 228, 228);
}
h1 {
color: rgb(125, 211, 125);
}
h3 {
color: rgb(40, 15, 57);
}
h1,
h3{
text-align: right;
font-family: fantasy;
}
.formattedContent {
text-align: justify;
font-family: sans-serif;
margin-left: 2%;
margin-right: 2%;
color: rgb(149, 84, 72);
}
</style>
</head>
<body>
<div>
<h1>Example of separating content and design using an external stylesheet with a link tag.</h1>
<h3>External Stylesheet and link tags</h3>
<p class="FormattedContent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum eligendi, dignissimos nobis a nam similique animi tenetur expedita pariatur nulla recusandae repellendus sequi quisquam corporis, voluptates nisi iure perferendis?
</p>
</div>
</body>
</html>
Using Import Statements
We can also use import statements in CSS to separate content and design. We use this statement when we need to import styles stored in a separate file. We simply provide the URL or source path to the CSS file and include inverted commas.
Of course, we could also use media queries within this statement. This is a flexible statement that also supports the style cascade.
To use this method to separate design and content, the only change we need to make is to remove the link tag from the example code above and add the following statement in its place.
<style>
@import(‘LinkedStyle.css’)
</style>
The output of this code will be the same as the example code above.
Conclusion
In summary, CSS is a powerful tool for web designers, allowing them to separate content from design. By using CSS, designers can create a unified look across multiple sites and devices while keeping content organized and easy to update. With the right knowledge of HTML and CSS, any designer can easily leverage this power to create stunning designs without compromising usability or accessibility.