Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use CSS to separate content and design?
A good website is always made up of a perfectly structured HTML document paired with a beautifully created design that grabs the user’s attention. This kind of website is what enhances the overall interactivity of the site making it more engaging.
When applying styles to our webpages, we employ Cascading Style Sheets, or CSS for short. We can more easily make a website presentable by using CSS. It distinguishes between the HTML document's structure and the presentation, which refers to the elements that users see and interact with.
As opposed to a plain and uninteresting appearing website that can be created using simply HTML, having a unique and creative style has become a must-have feature for a website.
Incorporating CSS
There are three different methods through which, we can incorporate CSS into our website −
Inline styling − When we apply the styling to each individual HTML tag, it is referred to as inline styling.
Embedded styling − The head tag is contained inside the style tag, giving the appearance that CSS is incorporated within an HTML file. The term "Embedded styling" is then used.
External styling − This is the most suggested technique to use CSS because it uses to separate the CSS from HTML. The HTML content is connected to a CSS file that contains all the style information. Using this styling approach, we may attach many CSS files.
We can significantly reduce the length of the code being used by using a separate file and grouping the similar type of formatting in a same property. This helps in the maintaining the code as less line of codes makes the bug finding process easier and along with greatly enhancing the overall readability of the code.
Another advantage of using a separate file for CSS means that you can reuse the same file as many times as you want; as compared to conventional formatting, where you had to repeat the formatting in each page separately. You can reuse the file by either importing it or linking the sheet.
Linking the file using the link tag
As already discussed, we can separate the content (structure) of the web page from the design (formatting and styling) of the web page by using a .CSS file which will be linked to the HTML document. We can make use of the html tag to link the CSS file to the HTML file.
We use a link tag to specify how the two documents are related to one another and it is an empty element, meaning neither does it have any opening or closing tags, nor it is a self-closing tag. All the information that it needs is stored within its attributes. There are many attributes which can be used within a link tag, but the ones we need to use are defined below.
Rel − it is a must have attribute for link tag and it is used to specify how the document being used currently is related to the document we are trying to link. Usually, we only tend to have stylesheets or favicons as relationships.
Href − It is used to specify the URL where the file which is to be linked is kept.
The link tag is used in the head tag. We can have more than one instance of link tags in the same document where each tag; points to a different file. The syntax for using a link tag to link a CSS file in HTML is given below −
<link rel=”the Relationship” href=”source” >
Example
Let us look at the example of using a link tag to separate the content and the design part of the 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 external styleheet with 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 the Import Statement
We can also make use of the import statement found in CSS to separate the content from design. We use this statement whenever we have to import styles stored in a separate file. We just have to provide URL or the source path where the CSS file is located inside the inverted commas.
Optionally, we can also use media queries along with this statement. It is a flexible statement that also supports cascading of stylesheets.
While using this for separating the design and content, the only thing we have to change is remove the link tag from the example code above and add the following statements in its place.
<style> @import(‘LinkedStyle.css’) </style>
The output of the code will be the same as of the example code above.
Conclusion
In conclusion, CSS is a powerful tool for web designers that allows them to separate content from design. By using CSS, designers can create a unified look across multiple websites and devices while keeping the content organized and easy to update. With the right knowledge of HTML and CSS, any designer can easily take advantage of this feature in order to create stunning designs without compromising on usability or accessibility.
624 Views
