Posted on Jul 9 Welcome 👋 to this blog. This blog is for beginners who just started the web development journey or professionals who just wanted to revise their CSS knowledge. We will learn the essential of CSS. Let's get started 🚀. One more thing for this blog I have created a website which helps me for the demonstration purpose.CSS stands for the Cascading Style Sheets, which help us to style our website. for example background colour, font color, font size etc.We have three options hereLet's time to take a look at each of these.This is the CSS that is applied to the particular HTML Element with the help of HTML attributes. If you are not familiar with these terms I highly recommend you to read my previous blog 🤠.Let's time to look at the code.You notice how we are using the style attribute in the h1 element to change the font colour to red.You look at the website I created for the demonstration before this code e.g. inline style and after the style.Before styleAfter styleInternal CSS is the CSS that is written inside the tags. Note: You MUST include the style inside the head tag. for exampleLet's time to look the full code.You can look at the live website here. You will see there is no difference between this live website and the previous one. Because we are doing the same thing but in a different manner.Note: Here we are using h1{//code } this is the tag selector which is selecting h1 HTML element or tag. We will cover more later in this blog.The name is self-explanatory. In this method, we are creating a separate CSS file for example styles.css and write the CSS code and link the HTML file to the CSS file and everything works fine.We can link the external CSS file to the HTML like this.Let's time to view the codeindex.htmlstyles.cssLive websiteNote: 🤨 index.html and styles.css must be in the same file hierarchy level.We are covering the most commonly used selectors in CSS. If you want to learn more click hereWe are writing all the code below in the styles.css file .😇This selector helps us to select the HTML element simply by using the element or tag name.for exampleindex.htmlstyles.cssLive websiteThe class selector is used to select the element by its class name. In the element we have to define a attribute named class and in the CSS file we have to select the class name by . for example .heading.Note: 🤨 A HTML element may have different - different class namesindex.htmlstyles.cssLive websiteSame as the class selector the id selector selects the element by its id name and in the CSS file we have to select the id name by # for example #main-heading.index.htmlstyles.cssLive websiteNote:You revised a lot of fundamentals for the CSS. Thanks for reading till the end. If you have any feedback, the comment section is yours.Till then let's grow together.CodeContact me: [email protected] LinkedIn TwitterTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Vidyasagar Machupalli - Jun 10 Omar.unwrap(); - Jun 1 Alvaro Saburido - Jun 20 Shivesh Tiwari - Jun 1 Once suspended, ankur0904 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, ankur0904 will be able to comment and publish posts again. Once unpublished, all posts by ankur0904 will become hidden and only accessible to themselves. If ankur0904 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Ankur Singh. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag ankur0904: ankur0904 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging ankur0904 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.