- What is CSS?
- Advantages of CSS(Cascading stylesheet)
- Applying CSS (Cascading stylesheet)
- Inline stylesheet
- Internal stylesheet
- External stylesheet
1. What is CSS?
CSS (Cascading Style Sheet) is a designing language. It is used to make web pages even more beautiful. You can apply 'designing' on HTML tags by using CSS. CSS can be implemented in three ways.
* Inline CSS - In this method, you can define CSS only in HTML tags. You can do this by using the style attribute.
* Internal CSS - In this method, you can define CSS with the help of the <style> tag in the <head> tag instead of defining it in the HTML tags.
* External CSS - Your CSS file and HTML file will differ in this method. In the HTML file, you add the CSS file through the <link> attribute.
You can control the presentation of web pages with CSS. It gives you complete control over the design of the webpage. You can set text color, font family, background, margin, padding and position of the webpage by using CSS.
CSS is a very powerful technology. With the help of this, you can control the presentation of the complete HTML page. CSS works in the context of property and value. For example, if you want to change the background color of the web page then the “background-color” will be property and the value you will give for the property that will be "value".
property: value;
As I mentioned above in the inline style sheet, you can use the style attribute but selectors are used in the <style> tag for internal and external CSS. A selector is the name of the tag, id or class on which you want to apply the CSS. More about the selector is explained in the next tutorial.
2. Advantages of CSS
1. Using CSS will save you time. You can create a CSS file and apply it to several HTML documents. You can fix a style for every HTML tag and apply it to as many web pages as you want.
2. you can decorate the webpage through the HTML attributes, each element has to define the attribute and value separately but by doing so, the code gets too much and the pages are loaded slowly. But when you use CSS, you can define styles only once for all the tags that are used in that webpage. Doing so, your code will reduce and your pages load fast.
3. It is very easy to maintain a webpage through CSS. For example, if you want to change the color of all the headings then just change the CSS and it will apply to all the headings.
4. CSS provides you with more style options than HTML. In comparison to HTML, you can design more attractive web pages with CSS.
5. With CSS you can configure the same webpage for multiple devices. For example, different styles can be used for mobile phones, tab, and desktop.
6. Now, the use of HTML attributes is very less. Using CSS has now become a global standard.
3. Applying CSS (Cascading stylesheet)
a. Inline stylesheet
You can notice the following example. The style attribute has been defined in the body tag. After that, property and value are defined in the style attribute which is called inline stylesheet.
<!DOCTYPE html>
<html>
<head>
<title> Example of Inline CSS </title>
</head>
<body style = "background-color: red; color: white;">
<h1> Inline CSS </h1>
<p> This is an example of inline CSS where background of webpage is define in red color and text in white. </p>
</head>
<body style = "background-color: red; color: white;">
<h1> Inline CSS </h1>
<p> This is an example of inline CSS where background of webpage is define in red color and text in white. </p>
</body>
</html>
The above script will generate the below output.
b. Internal stylesheet
In the internal stylesheet, you can’t define style inside the tag. The <style> tag is defined in the head section. After that, you can define the styles while using selectors. In this way, HTML code and CSS code are defined in the same HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Example of Internal Style </title>
<style>body {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h1> internal CSS </h1>
<p> This is an example of internal stylesheet where background of webpage is define in pink color and text in green. </p>
</body>
</html>
The above script will generate the below output.
c. External stylesheet
In the context of External stylesheet, CSS will be in another file. That file will be linked to the HTML file by <link> tag. You do not need to write CSS again and again for external stylesheets.
You can apply the same CSS file to the several HTML files. For this, you have to create a folder and in this folder, you have to create two files for HTML and CSS separately. Such as index.html and style.css.
An example of this is given below.
index.html File
<!DOCTYPE html>
<html>
<head>
<title> Example of External Style </title>
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<h1> External CSS </h1>
<p> This is an example of External stylesheet where background of webpage is define in green color and text in white. </p>
</body>
</html>
style.css File
body {
background-color: green;
color: white;
}
The above scripts will generate the below output.
Posts
0 comments:
Post a Comment
Thank you for reading the post.