April 30, 2017
0
What is CSS?
The term CSS stand for Cascading Style Sheets which is the language used design a website and also control the display of HTML tags on a webpage in a browser. Cascading Style Sheets can save a lot of work by working in layers. The CSS of an HTML page can be saved or used external and internal both ways. You can also use Cascading Style Sheets in inline format.Why CSS?
One of the major question asked by millions of people around the world is why we use CSS the answer of the question is HTML is a very defined language used to create a web page for example with the tag of p (paragraph) you can write the paragraph in predefined HTML definition which may vary from browser to browser and device to device.We can use CSS to change or manipulate the HTML definitions so that your web page looks different and unique then the other websites in the world.
Normal the CSS file is saved with .css extension externally. So that you don't have to create a separate coding for each web page. This not only easy your work but also helps toy in branding of the website.
CSS Syntax
Procedure Syntax mainly consist of two parts:- Property
- Value
In the property element of CSS we used to define what type of property we want to change or manipulate in HTML.
In the value part of CSS we use to define the value of the change we want in the property we have define before the vale.
For example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>CSS simple example</p>
<p>These paragraphs are blue due to the use of CSS.</p>
</body>
</html>
Output
CSS simple exampleThese paragraphs are blue due to the use of CSS.
We can use CSS in many ways:
- By describing the element
- By giving it to the CSS
- By creating a class
Describing the elements
With the help of CSS we can define each HTML element separately. We can define it in the head part of the HTML or we can use the inline technique. For example<!DOCTYPE html>
<html>
<head>
<style>
p {
color: Green;
}
</style>
</head>
<body>
<p>This line is green due to CSS</p>
</body>
</html>
Output
This line is green due to CSS
Creating an ID
First you will be thinking why we use this technique, so let me explain first by defining the HTML element the whole page will be changed but if you want to specifically change a line of code then creating an ID could be the best approach.
To create a CSS id you can start with # and then give it a unique name. for example :
<!DOCTYPE html>
<html>
<head>
<style>
#CSS {
color: red;
}
</style>
</head>
<body>
<p id="CSS">This is red</p>
<p>This paragraph is simple by the style.</p>
</body>
</html>
Output
This is red
This paragraph is simple by the style.Creating a Class
According to me, the best approach to add CSS in your HTML code is by creating classes of CSS in the header or external file. Start Creating your class with period (.) then write the name of the class. For example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<h1>Normal heading</h1>
</body>
</html>
