CSS for Beginners: What is CSS and How to Use it in Web Development?Cem EygiBlockedUnblockFollowFollowingApr 26Photo by Fabian Grohs on UnsplashHTML, CSS and JavaScript… 3 main languages of Web Front-end Development.
In this article, I will cover the basics of CSS.
So if you have no idea about CSS, or don’t know how to use it, this article is for you :)We will have a look at what CSS is, how to write CSS rules and how to add them to HTML.
As a pre-requisite, if you don’t know anything about Web Development, I recommend you to understand HTML first.
What is CSS?CSS (Cascading Style Sheets) is a language for styling the webpage.
We can change the appearance and the layout of the webpage by using CSS.
We can also define how a website’s view changes in different screens like desktops, tablets, and mobile devices.
CSS is not a programming language, like C++ or JavaScript.
However, CSS is not as easy as it seems.
If you try to use it without understanding, you will have difficulties in web development.
Therefore, learning CSS is as important as learning a programming language.
Let’s continue with an example to reveal the effect of CSS on a website.
Below you see how the Facebook Webpage looks as usual (with CSS):https://www.
facebook.
com/And here you see how Facebook looks without CSS:Facebook without CSSAs we can see, CSS makes a website’s visual presentation much better.
CSS Syntax:Let’s write our first CSS code.
For instance, I would like to change the color of the <h1> tag.
<h1>I'm a Header</h1>Firstly, we need to tell CSS how to find the HTML element.
We can do it with a feature called “selector”.
A selector in CSS is used to find HTML elements by their tag name, class name, id and much more.
So below I define a selector for the HTML element, based on its tag name <h1>:h1 { } // An example of a selector After that, we can declare CSS rules, between brackets of the selector, each ending up with a semi-colon:h1 { // CSS rules between brackets color: red;} So based on the defined selector (h1), CSS can now understand where to apply the new rules:There are many different ways to define a CSS selector, below you can see some examples of the selector types:Class Selector: finds HTML elements by their class attributeId Selector: finds elements by their specific IdElement Selector: finds elements by their tag nameYou can check here for more about CSS Selectors.
How to Add CSS in HTML?Now you’ve learned why and how to define a selector and write some CSS code.
But that’s not enough.
We also need to add CSS inside HTML otherwise it doesn’t recognize the changes.
We can add CSS in an HTML file in 3 different ways:1.
External CSS File:Keeping CSS code in a separate file is best practice.
In real programming world, we need to keep HTML, CSS and JavaScript code in separate files and later import them where necessary.
We can create a separate CSS file with an extension of .
css and include it to HTML.
For example, we can create a CSS file like this one: index.
cssInside index.
css, we can write our CSS code:p { color: red;}Then we can import index.
css to HTML with a <link> tag like below:<head> <link rel="stylesheet" href="index.
css"> </head><body> <p> I'm a Text </p></body>So now the HTML file has the CSS code and the changes will apply to the elements.
2.
Internal CSS with <style> tag:Another way where you can write CSS code is inside a <style> tag in HTML.
This will keep the CSS code directly inside the HTML file, rather than in a separate file.
<style> p { color: red; }</style><body> <p> I'm a Text </p></body>3.
Inline Style:The third way is to write CSS rules directly inside an HTML element, with the style attribute.
In this method, we define the CSS rules directly inside the tag and don’t need to create a class for it.
<p style="color: blue; font-size: 22px;"> I'm a Text </p>This approach is not an example of clean code and it’s not recommended to use.
ConclusionCSS is an essential part of Web Development.
In this article, I tried to explain the very basic usage and syntax of CSS.
If you have any questions, don’t hesitate to ask them below in the comment section.
There are many other rules and features to explore in the world of CSS.
I will be covering them in my following articles.
Thank you very much & till next time!This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +446,678 people.
Subscribe to receive our top stories here.
.. More details