Usage of CSS Rules for Web Development
Hey, everyone! 💛
Here’s to learning about CSS, and the amazing things it can do, whether you’re unsure about how it works, or thinking about ways to create good designs, yes? Then, I hope this article meets you there, with you openly knowing more about it!
But first things first, what is CSS?
“Short for cascading style sheets, CSS is a language used to describe reusable styles for presenting documents written in a markup language.” — Computer Hope
Or, in other short words, a collection of #RULES. These rules implying how we can target content within our HTML (web document) and then apply visual properties to them.
So, let’s imagine these CSS rules/properties being divided into 3 components :
- Selector
- Property
- Value
The first component being the Selector, is what we use to select the element that we want to style. And I will give you a quick demonstration, showing you how this works:
Cool!
Now, let’s move to the second component, being the property. Although, briefly mentioned in the display above, I will explain this a little more and give you another example.
So…. let’s say that we want to create a new rule which targets all classes than targeting all “p” tags as we did before. And in creating such classes, we start to think about how we’re going to want it to look. So at this point, a custom property like “font-size” can be applied, to change the size of certain font.
Just, like so;
Nice! Don’t stop there, though.😉 Keep having fun with it. You can find plenty examples @w3schools.com, and try out different ones!
As for the final component, being the value, this is where you specify what variable that you want to give to your style property. For example, a given property being “<background-color:>”, and the value variable being “<green;> since we’re specifying the value of that property.
But, ohhh wait, it doesn’t stop there! 😏
I’ll show you more examples of this, like so;
Sweet!
Another common feature used in CSS, for controlling appearance and behavior, are the use of transitions or animations. And here’s a classic example, below:
Awesome! Other cool examples, for modifying such values, can also be found:
Let’s move on now to our last section: CSS positioning.💖
Initially, we can use CSS positioning, to give us different (element) layouts/arrangements.
#Relative Position;
-By using relative position, we can move elements based on its original position. And then use different values like ‘top’, ‘bottom’, and ‘right/left’, to see what effect it gives. For example, in the case shown above, relative position can be set, to move ‘small-box1’ 30pixels right from its original position.
#Absolute Position;
-Yeah, but… What if we want to place an element anywhere we want? Then, CSS position can be done using absolute. Take the example above, where the absolute position moves its position relative to its parent being (box).
#Fixed Position;
-And how about, placing an element relative to its viewport, so that such element can stay right where it is when the page is scrolled? Then, for that to work, we can use #fixed position.
#Sticky Position;
Much like fixed position, CSS position (sticky) can keep elements on screen when scrolling. And this can be a really cool feature to use when designing headers/navbars.
#Floats;
So far we’ve seen how to use 5 different CSS positions, but we can also take a look at using CSS float property, if we’re needing to control the positioning or formatting of content on page.
Other Proposals
Sometimes you want to use flexbox or grids, so that elements can visually position, as either in a two-dimensional grid layout or in a one-dimensional rows/column layout. And this usually being a better consideration when you’re trying to produce a website that is responsive.
For further examples with flexbox and grids, then following links can be found below:
ENJOY, and happy coding! :)
