As HTML is usually referred to as the skeleton of the Web, the language (not programming language) responsible for a website's aesthetics is CSS. CSS is an acronym for Cascading Style Sheet. As the name implies, it's a series of styles responsible for the beauty of a website. To an extent, when properly applied, CSS provides some basic functionality for a webpage, notwithstanding, its main job is to beautify.
In this article, you'll be briefly introduced to CSS, learn the three different ways of adding CSS to your HTML file, and situations in which each of them is most appropriate for use.
Applying CSS
CSS can be deceptively simple from the perspective of a beginner working on a small project. As the project scales, complexity rears its ugly head, leaving a weak-hearted beginner no choice but to quit and seek other easy, available jobs. Although it is not a programming language, CSS requires a high level of creativity and witty thinking to grasp its concepts and apply them appropriately.
CSS controls how the browser renders HTML elements. It alters the appearance of any HTML elements in styles other than their default settings. CSS offers 3 different approaches to including styles in an HTML file. Each method works well, however, knowing the right method to use increases the flexibility of a project. The three methods—inline, internal, and external styles—are outlined with examples in the following section.
Inline Styles
The inline method is the simplest way to add CSS styles in HTML. To use this method, you define a style attribute with a key-value pair for a style property and its value respectively in the HTML element to be styled.
<h1 style="font-size: 24px; color: green;">Largest Heading</h1>
Styles applied using this method are specific and private to the HTML tag. They rank higher in the order of specificity above styles applied using other approaches—internal and external styles. However, when the same style is to be used in other elements in the same HTML file, it’s better to go for the internal style method.
Internal Style
The internal style method is used to add the same CSS styles to multiple elements or a specific style for a single element. Internal styles are coupled inside a style tag which is placed within the head tag of an HTML file.
<head>
<style>
selector {
property: value;
}
</style>
</head>
<body>
...
</body>
Depending on the selector used, internal styles can be used to style every similar tag or a specific tag in an HTML file. For instance, to set the font-size of all h1 elements to 24px and a color of green, you pass h1 as the selector, font-size and color as the properties, and 24px and green as their respective values. However, to define a specific style for an element, you may decide to opt for the inline style method or use the id style selector for the element. More on selectors will be explained in my future CSS beginner articles.
h1 {
font-size: 24px;
color: green;
}
The internal style approach is good for styles specific to an HTML document, however, to apply the same styles to multiple HTML files, the best bet is the external style method.
External Styles
External styles are used to apply CSS to single or multiple HTML files. Unlike the inline and internal style methods, a separate file with a .css extension is created for external styles—e.g. styles.css. Then the external stylesheet file is linked to the HTML files inside a link tag placed within the head tag of the HTML document, and the styles are applied to the HTML elements through selectors.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 class="red-text">This is a Red Header</h1>
<p class="red-text">This is a Red Paragraph</p>
</body>
In the styles.css file, the styles are defined as in the internal style—a selector with a key-value pair or properties and values, respectively wrapped in curly braces.
.red-text {
color: red;
}
Conclusion
CSS is an essential piece of web development and a strong understanding of its application to HTML documents is important to developing aesthetic and easy-to-maintain websites. The inline styles are good for specific styling, internal styles are good for single-page styling, and external styles are good for multi-page styling. In all, the external style method is the best as it is more maintainable and scalable. In future articles, I’ll be explaining CSS selectors and their applications. Stay tuned!
For more web development tips, engage me @theDocWhoCodes on Twitter or reach out to me via email at gabrielshoyombo2002@gmail.com to contact me.
Top comments (3)
Oh, how I wish I knew all that when I started my adventure with webdev :) Especially the internal styling. Quite often I had pages with styles only reserved to them, used nowhere else on the website - and I would inline when I could and begrudgingly resort to external styles when I couldn't. Internal is the perfect compromise: keeps the styles close to its targets, and has all the elegance and functionality of a stylesheet.
Yeah, that's true for single-page websites. But when you're developing a multiple-page website with similar layouts, an external stylesheet is the best. Aside from being good for a multiple-page website, it makes the HTML file cleaner by separating styles from the structure👍.
Not questioning that. I also often hear the argument that you should always keep your CSS external for debugging - but actually never had an issue there myself. It all comes down to creating an environment that lets you work proficiently, and we all have different preferences and limitations.