Which CSS styling?
Starting our programming journey can be very beautiful, knowing the more we climb, the more we see how there is more to know. It opens our minds to growing and improving our everyday lives beyond sitting in front of a computer to write codes. Out of curiosity, sometimes we want to learn it all and know it all.
When we got introduced to CSS, an acronym for Cascading Style Sheet, there was a probability, we got introduced with one method. But as we climb, we begin to see how wide the programming world can be. Funnily, it begins to get more interesting and wows your interest the more.
When we visit a website and get attracted to its colors, fonts, layouts and so many others, that is CSS. I remember when I gave my first website colors, I really could not believe I did that. well, yes, that is the magic that CSS adds to our websites and web applications.
However, there are so many kinds of CSS styling. The more we keep climbing, the more we begin to see them. Not just CSS, even other languages. But the emphasis here is CSS. Now, let us dive into it. My emphasis would be on 5 kinds of CSS.
- Inline styling
- External CSS
- Styled components
- CSS modules
- Tailwind CSS
There is no perfect method to be used in styling our web application. Each one is unique and should be used when needed. Just like every developer is unique, we have to identify which unique method works well for us.
Inline styling is used to apply a unique style to a single HTML element. Here is an example below.
<h1 style="color:blue;">A Blue Heading</h1>External CSS is a separate CSS file that can be accessed by creating a link within the head section of the webpage. Here is an example below.
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>external css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Styled Components is a library built for React and React Native developers. It allows you to use component-level styles in your applications. Styled-components leverage a mixture of JavaScript and CSS using a technique called CSS-in-JS.
CSS Modules is a CSS file in which all class names and animation names are scoped locally by default. CSS Modules let you write styles in CSS files but consume them as JavaScript objects for additional processing and safety.
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
