HTML style using CSS
Web structure starts with solid HTML. Learn how HTML style using CSS contributes to accessible and semantic web pages in the tutorial below.
Imagine we have developed a webpage using basic HTML code, and now we desire a method to display our webpage in a proper layout that is visually appealing. To achieve this, we can enhance the appearance of our webpage by applying CSS (Cascading Style Sheets) attributes.
CSS is essential for styling web pages composed of HTML elements. It defines the visual appearance of the webpage.
CSS offers a wide range of styling attributes, including options like background color, padding, margin, border color, and numerous others, to customize the appearance of a webpage.
In CSS, every property consists of a name and a value, with each property being delimited by a semicolon (;).
Note: In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial.
Example
<body style="text-align: center;">
<h2 style="color: red;">Welcome to our tutorial</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">This is a great website to learn technologies in very simple way. </p>
</body>
Output:
A centered <h2> heading with red italic text, large font, and 25px padding on top.
Explanation
In the example shown earlier, a style attribute was utilized to apply a specific styling format to our code.
Three ways to apply CSS
To use CSS with HTML document, there are three ways:
- Inline CSS: Define CSS properties using style attribute in the HTML elements.
- Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
- External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.
Inline CSS:
CSS can be applied directly to an HTML element using inline CSS. This allows for unique styling to be applied to individual elements.
In order to incorporate inline CSS, the style attribute must be utilized within an HTML element. Multiple properties can be employed, with each one requiring separation by a semicolon (;).
Example
<h3 style="color: red;
font-style: italic;
text-align: center;
font-size: 50px;
padding-top: 25px;">Learning HTML using Inline CSS</h3>
Output:
Learning HTML using Inline CSS
Note: Inline CSS is not recommended for large projects or production use, as it mixes content with presentation. Prefer internal or external styles for better structure and maintainability.
Internal CSS:
The CSS properties for a webpage are stored within an Internal stylesheet section in an HTML document. Class and id attributes can be utilized to apply Internal CSS.
Internal CSS can be utilized to add styling to an individual HTML page.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
/*Internal CSS using element name*/
body{background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p{font-size: 20px;}
/*Internal CSS using class name*/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<h2>Learning HTML with internal CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Note: In the above example, we have used a class attribute which you will learn in the next chapter.
External CSS:
A standalone CSS file, known as an external CSS, holds styling instructions for class names, id names, tag names, and more. This CSS file can be linked to an HTML file by inserting a <link> element within the <head> section of the HTML file.
When dealing with an application that comprises multiple HTML pages utilizing similar CSS styles, it is advisable to implement external CSS.
There are two files need to create to apply external CSS:
- First, create the HTML file
- Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
- Link the CSS file in your HTML file using tag in header section of HTML document.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
CSS file
body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
font-size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}
Commonly used CSS properties:
| Properties-name | Syntax | Description |
|---|---|---|
| background-color | background-color:red; | It defines the background color of that element. |
| color | color: lightgreen; | It defines the color of text of an element |
| padding | padding: 20px; | It defines the space between content and the border. |
| margin | margin: 30px; margin-left: | It creates space around an element. |
| font-family | font-family: cursive; | Font-family defines a font for a particular element. |
| font-size | font-size: 50px; | Font-size defines a font size for a particular element. |
| text-align | text-align: left; | It is used to align the text in a selected position. |
Modern CSS Practices
While the fundamental principles of CSS remain consistent, modern web design emphasizes the importance of responsiveness, maintainability, and accessibility. Below are key CSS techniques that should be integrated into your development process:
1. Use CSS Variables for Consistency
Custom properties in CSS, also known as variables, play a crucial role in ensuring consistency in design elements like color, spacing, and typography across a project.
Example
:root {
--primary-color: #4e9af1;
--font-size-base: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size-base);
}
Utilize the :root selector to establish universal design variables for better maintenance and streamlined theme updates.
2. Responsive Layouts with Flexbox and Grid
Flexbox is excellent for creating layouts along one dimension, such as in either rows or columns.
Example
.container {
display: flex;
justify-content: center;
align-items: center;
}
The grid system is intended for organizing content in a two-dimensional format, as outlined below.
Example
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
Combining Flexbox and Grid allows for the creation of intricate and adaptable layouts.
3. Mobile-First and Responsive Design
Employ media queries to adjust the design and text style for varying screen dimensions by utilizing the @ symbol.
Example
body {
font-size: 18px;
}
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
Begin by designing styles for mobile devices and then gradually adjust them for bigger screens, following a strategy known as "mobile-first".
4. Support Dark Mode
The preference of the user can be identified by utilizing the media query called prefers-color-scheme.
Example
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #f1f1f1;
}
}
This feature enables the automatic switching between light and dark themes.
Conclusion
The field of CSS is in a constant state of development, prompting the need to progress beyond fundamental styling techniques and embrace contemporary, adaptable, and inclusive design practices. By employing CSS variables, Flexbox, Grid, media queries, and integrating dark mode functionality, users can enhance the scalability and usability of their web projects. Acquiring knowledge about these recommended methodologies ensures that your websites remain current, efficient, and compliant with industry standards.
