let’s play with the CSS
Basics of CSS part 1
Lets understand basics of the CSS
To keep it simple we will directly jump into the CSS without wasting our time but before that let me introduce you to my self I am Vrushabh Bayas you can visit my linked in profile by clicking on my name.
CSS (cascading style sheet) is the simple mechanism to add style to the web documents e.g. font, color,spacing etc.
There are three ways in which we can use CSS in our web page
- Inline CSS
- CSS using <style> tag
- External CSS
We will see example of each of this and which one is recommended and why?
Inline CSS
lets discuss about the first type that is inline CSS below is the example of how we use inline CSS in the code
It is not recommended to use inline CSS because if we create bigger web pages with many styles it quickly becomes very hard to understand and read your code. Because your style is always applied to the element you wanna change and if you ever want to change the style of an element again you have to find that element in DOM and some time it is very hard to debug. One more disadvantage is that if we want to add multiple styles to the same element it looks very difficult to read in one go and we may loose readability of the code as shown in blow code snippet
With <style> Tag
Below is the code snippet that show how we can use style tag to write the CSS code .
We include style tag as shown above in the header of our HTML document . We use selectors in style tag to select the specific element from the DOM like in above example we have used section which is predefined HTML tag above style will be applied to all the section tag from our HTML document .
There is one disadvantage of using <style> tag that is if we include our style in header then due to this size of our HTML file will be increased and browser will download this CSS on every new page so we cant take advantage caching mechanism of the browser. Solution to this problem is our third approach that is external CSS.
External CSS
we need to create separate file for writing style we can give any name we want to the file for example style.css
style.css
content of the style.css
index.html
As you can see in above code snippet we use <link> tag to link the CSS file with our web page.It’s always recommended to use external CSS because by doing this we keep our code clean and separate and it helps when our CSS code grows.
Additionally if we use same CSS in multiple web pages then browser can cache style-sheet and does not re-download style for every new page it renders.
This is enough for now lets meet in part two.if you liked it don’t forgot to clap that will motivate me for writing some good stuff for you guys :)
