Style CSS
CSS is all about presentation. Discover how Style CSS works to transform plain HTML into a premium user experience in the guide below.
Introduction
When attempting to construct a webpage without utilizing HTML, it becomes an impossible task. HTML plays a crucial role in generating various elements such as headings, paragraphs, images, tables, forms, and lists within the web page. However, the design and responsiveness of the webpage cannot be achieved solely through HTML. To accomplish this goal, CSS assistance becomes essential.
What is CSS?
CSS stands for Cascading Style Sheets. By utilizing CSS, we are able to assign various style attributes to the webpage. This includes defining properties such as background color, font size, font family, color, and more for different elements on a webpage. Additionally, CSS plays a crucial role in dictating the layout and presentation of content within the webpage.
How to Add CSS to HTML
We can add CSS inside the HTML in three ways. These are as follows.
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS
In inline CSS, CSS properties are specified within the opening tag of the HTML element in the body section. This method is referred to as inline CSS and can be achieved using style attributes.
How to Add Inline CSS to HTML
Inline CSS is also referred to as an embedded style sheet. The following syntax must be adhered to in order to incorporate CSS within HTML.
<element style="CSS property: value">
The inline CSS has the ability to take precedence over other CSS styles due to its proximity to the HTML element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px; text-align: center;">Welcome to C# Programming</h1>
<p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333;">This is an example of inline CSS. Inline styles are defined directly within the HTML elements using the 'style' attribute.</p>
<div style="background-color: #f2f2f2; padding: 10px;">
<p style="font-style: italic; font-weight: bold; color: green;">This is another paragraph with different inline styles applied.</p>
</div>
</body>
</html>
Output
Explanation:
We've utilized inline CSS to implement diverse styles for the h1, p, and div elements within the code snippet provided above.
Internal or Embedded CSS
When dealing with a solitary HTML file and needing to apply styles to it, the suitable choice is to opt for Internal or Embedded CSS. The CSS rules can be defined within the head section of the HTML document. To specify the styles, the style tag within the head section can be utilized.
How to Add Internal CSS to HTML
We have the option to include internal CSS within the head tag by using the <style> tag. The syntax for writing internal CSS is as follows:
<head>
<style>
selector { CSS property: value; }
</style>
</head>
Utilizing internal CSS is considered a superior approach when contrasted with inline CSS. By employing internal CSS, we can assign styling properties to multiple elements simultaneously. This method allows us to segregate the CSS and HTML while requiring them to be contained within a single document, consolidating all code into one file.
Nevertheless, employing inline CSS is not advisable when dealing with multiple HTML pages. In such scenarios, opting for external CSS becomes necessary.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
line-height: 1.6;
margin: 0;
padding: 0;
}
h1 {
color: #007bff;
text-align: center;
}
p {
margin-bottom: 20px;
}
.highlight {
background-color: #ffc107;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Welcome to C# Programming</h1>
<p>This is an example of an internal CSS. It allows you to apply styles directly to HTML elements within the <style> element.</p>
<p>You can also use classes to style specific elements, like this <span class="highlight">highlighted text</span>.</p>
</body>
</html>
Output
External CSS:
In external Cascading Style Sheets (CSS), it is necessary to generate a separate CSS file and establish a connection with the HTML element. The CSS file should be stored with the appropriate ".css" file extension. The linkage between the CSS file and the HTML document is established using specific tags to ensure that the styling is applied uniformly across the entire HTML file.
How to Add an External CSS File to HTML
We need to connect the CSS file using the following syntax. The syntax should be inserted within the <head> element.
Syntax:
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyles.css">
Before writing the example, let's know about some best practices for the reason during the writing of the code. These are as follows.
- Whenever we need to provide the CSS property to the HTML file, we need to change this in the external file. It is the most time-effective method.
- It is the most SEO-friendly software. It is very easy to read by the search engine.
- It also enables the browser for the visitor to load the CSS file.
Example:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>Welcome to C# Programming</h1>
<p>This is a paragraph with some text. <a href="https://www.C# Tutorial/">Click here for C# Tutorial</a>.</p>
<a href="https://www.C# Tutorial/" class="button">Click for C# Tutorial</a>
</div>
</body>
</html>
CSS CODE:
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
p {
color: #666;
line-height: 1.6;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
Output
