This post is going to give you a head start to know about CSS. How to approach it and how can you go into more details at your own.
The objectives are:
- What is CSS?
- What are the ways to use CSS?
- Syntax for writing the CSS
- Cascading order
- Frequently used selector cheat sheet.
Cascading Style Sheet
So, what cascading means? “Cascading” in this context means choosing the css rules by cascading down the more general rules to the more specific rule required.
What are the ways to use CSS?
In general, there are three ways of using CSS which is given below:
1. External: <link> tag inside <head> tag to use external CSS files.
<link rel="stylesheet" href="styles.css">
2. Internal: <style> tag (mostly used in the <head> tag)
<head>
<style>
/* styles goes here */
</style>
</head>
You might be wondering that why are we using
/* */inside html. Because, in CSS, the comment works this way only. Whether you write CSS in external file with.cssextension or inside the<style>tag.
3. Inline: using style attribute on HTML elements
<div style="background-color: red;"></div>
Please note the style="background-colour: red;" text above. More properties can be added after semicolon.
Syntax for writing CSS
There is only one syntax so you do not need to remember much of the things here. Below is the example given:
Selector {
property: value;
}
An explanation:
-
Selectoris the value which will determine which element the style need to be applied. -
propertyis the name of the style property to be used -
valuehere denotes the style value that a property should have which will be visible on the element with particular selector -
;denotes the end of that particular property/value pair and we can add another property/value pair after that - Curly brackets denotes one block of style properties for the
Selector
Cascading Order
As I have explained earlier about cascading, here is the priority order when Cascading happens for selecting the rules:
- Priority 1: Inline styles
- Priority 2: External and Internal stylesheets
- Priority 3: Browser defaults
Important thing to note here is that if a style is defined with same priority, the last one has the highest priority. (Cascading rules)
Frequently used selector cheat sheet
So, as we are coming to conclusion, here are the list of frequently used selectors. Please practice at your own pace and time.
No one is perfect in this world and No one knows everything. Take your time to learn but do not stop learning.
Here are the list:
*.class#idelementelement, elementelement > elementelement + elementelement element:hover:first-child:last-child-
!important(avoid using it)
There is an accompanying video which explains the usage of these selectors. Here is the link and it is worth watching it to understand how these selectors is written and how it works.
Summary
That’s all.
I hope you have enjoyed this article and learned something out of it. If you like this post, I'll appreciate share and likes.
PS. Title photo by Sai Kiran Anagani on Unsplash
Top comments (0)