What is CSS?
"C" Stands for Cascading "S" Stands for Style and Last "S" Stands for Sheet. In one word, CSS means for Cascading Style Sheets
Why CSS is important on web pages?
How HTML elements will be displayed on web pages, paper or in others media all those thing are dependent on CSS.
Why CSS is important on web pages?
How HTML elements will be displayed on web pages, paper or in others media all those thing are dependent on CSS.
Actually, CSS is used in web pages to control the layout of the web pages. That's why to control the layout of the web pages CSS is more important.
In 3 ways CSS can be added in HTML Elements.
Those are -
- Inline - It can be used in HTML Element, using style attribute.
- Internal - using <style> element in <head> section.
- External - It can be used by using an external CSS file. External CSS file can be created using css extension.
Inline CSS - Example:
<html>
<body>
<p1 style="color:red; background-color: black;">I am a simple text with color and Background Color.</p1>
</body>
</html>
Result:
Internal CSS - Internal CSS can be used in an HTML page between <style> </style> tag in <head> section.
Example:
<html>
<head>
<style>
body {
background-color: gray;
}
h6 {
color: red;
}
p2 {
color: green;
}
</style>
</head>
<body>
<h6>This is a simple heading</h6>
<p2>This is a simple paragraph.</p2>
</body>
</html>
Result:
External CSS - By using a External CSS file you can change the entire web pages look only to make change in the CSS file.
External CSS file have to create with css extension. Here you want to create a external css file then you have to give a specific name of the css file. I think this css file name is "style" then your css file name sholud be like style.css
Code sample in style.css file:
body {background-color: gray;}
h6 {color: red;}
p2 {color: green;}
Code sample in index.html file:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h6>This is a simple heading</h6>
<p2>This is a simple paragraph.</p2>
</body>
</html>
Result:
Here, by using Inline, Internal and External file we got the same output. Just, we learn 3 ways to link css in HTML page, but output is the same.
Which one is the best to write CSS code?
Best option to use always External CSS file. Because in Internal CSS, when we have a large size of CSS code then we can't find the specific CSS code easily in the file and it can be break the entire HTML page.
On the other hand, if we use aleays inline CSS the HTML page will be large and it also can be break the page and also code decoration will not well decorated.
That's why, Best option to use External CSS file to write the CSS code.
Use this syntax to change the style of an HTML element:
document.getElementById(id).style.property = new style
In the following video, I'm going to describe about 3 different ways to write CSS code for HTML pages. You can also watch our video to watch the ways.
Source code of the above video:
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo" style="font-size: 12px">HTML element can be changed using javascript.</p>
<button type="button" onclick="changeStyle();">Click Me!</button>
</body>
</html>
<script type="text/javascript">
function changeStyle(){
document.getElementById("demo").style.fontSize = '35px';
}
</script>
1 মন্তব্য(গুলি)
Thank you for sharing this on your blog! It is very helpful for my insight! Please update more posts about this. Would love to see more updates from you.
Melbourne Web Designer
EmoticonEmoticon