Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
Cascading Style Sheets (CSS) is a style sheet language which is used for designing the webpages and their layouts developed in a markup language like HTML. In this article, you will learn how to use CSS in your projects and some of its basic and most useful CSS properties and rules to design your websites.
Note: Before starting to learn CSS, make sure you have a basic understanding of HTML and its tags. Besides that, no other prerequisites for this tutorial.
But, why CSS?
In the early 90s, when people wanted to design websites, they had limited tools and options. They only had an option to use HTML to design and develop their websites. There was a lot of limitation designing the website only with HTML.
Earlier, to design a layout for a website, you would use tables to structure your website. But using tables, you had to write a lot of code and it became difficult to debug and modify.
With using only HTML, the website would look like this,
Then to solve the problem, people started using style language called CSS which makes it easier to design and style layout for a website.
The solo purpose of CSS is to style the markup language like HTML, XML code.
Using CSS
Let’s see how you can include and use CSS in your projects. There are generally three ways you can do that.
1. Inline CSS
You can integrate CSS directly into your HTML elements/tags inside your HTML file. You can then add properties to that element. Properties are defined as style = "property : value" enclosing inside double quotes(" "). You can learn more about CSS properties here
For e.g.
<body style = "background-color:blue">
You can add multiple properties to a single element by seperated each property with a semicolon(;).
For e.g.
<h1 style = "color:red; text-align:center">This is heading</h1>
2. Internal CSS
You can add the style tag inside the head section of your HTML file.
To add style to a element, select the element by typing its name and open curly braces, inside the style tag. Define all properties inside the curly braces. End each property with a semi-colon.
For e.g.
<html>
<head>
<title> My Website </title>
<style>
h1{
color:blue;
text-align:center;
}
</style>
</head>
<body>
<h1> My heading </h1>
</body>
</html>
3. External CSS
This is the most preferred and recommended way to integrate CSS into your projects. You need to create a file with (.css) extension and add the file inside the head section of your HTML file. You will write all our CSS properties in this file, that's why we call this as External CSS file.
To integrate the external CSS file, use link tag. You also need to define some properties to this link tag to add your CSS file. First is the rel = "stylesheet" and other is the href = "your_css_file.css".
rel generally defines the type of file we are integrating. In our case, its stylesheet for the CSS file inside double-quotes.
href defines the location of your file. When HTML and CSS both files are kept in the same folder, then we define the file name with double-quotes.
For e.g.
<html>
<head>
<title> My Website </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<h1> My heading </h1>
</body>
</html>
a style.css file below
h1{
color:red;
}
Now, you can write all the CSS code in the separate style.css file. You can easily manage your code here when your codebase increases.
There are a few things to keep in mind when writing CSS. It is necessary to add a colon (:) at the end of a CSS property. You should always indent your CSS code. Write each property in a separate line and add a semicolon (;) at the end of the line.
Note: The target HTML element which you use inside your CSS is called selector.
You can also write comments in a CSS file. In CSS a comment should be surrounded by /* comment here */.
Commonly used CSS properties.
1. Color.
In CSS, font colors are defined by hexadecimal values.
h1{
color:#ffffff;
}
You don't need to remember these values, but you can search all of them online for other colors.
2. Font size.
The size of a font can be set-up with the font-size property. The unit for setting up the font-size is px (pixel).
h1{
color:red;
font-size: 20px;
}
Always remember to write px at the end of your font size.
3. Font Family.
you can specify the type of font with the font-family property, .You can do this by setting font-family: "font name";.
h1{
color:red;
font-size: 20px;
font-family: "Lucida Grande";
}
If the font name contains a space, you need to enclose it within double quotes.
4. Background Color.
The background-color property is used to change the background color of a web page or a particular section of your HTML file.
body{
background-color: red;
}
5. Width and Height Property.
To change the width and height of an element, use the width property and height property. Both of these properties are set up with pixel(px) unit.
img{
width:100px;
height:200px;
}
Conclusion
In this article, You have learned why you need CSS and why you should use CSS. You also learned how to integrate CSS in your projects. There are three different ways of doing that. The most recommended way is External CSS. You got familiar with the basic syntax for writing CSS and and most commonly used CSS properties. I hope you have enjoyed reading and have got an overview of CSS. Thanks for reading!
