Table of Contents
What is the definition of CSS?
CSS is a cascading style sheet. In CSS, cascading means the style provided to the parent element is also applied to the element called as child element within the parent element. CSS is used for formatting the layout of your webpage. By using CSS, you can add different font sizes, different colors, background colors, background images, and many more. If you are using CSS and you set body color text then it will change the overall color of your paragraph, heading off all the text elements.
What is the difference between HTML and CSS?
HTML | CSS |
HTML is a hypertext markup language used for designing your webpage. | CSS is a cascading style sheet that is used For modifying the designing and display of your HTML element. |
While writing an HTML document you can add CSS for formatting the web page | While creating a CSS document you cannot add HTML to it. |
HTML consists of tags. | CSS consists of sectors for declaration purposes. |
HTML does not use any fixed method. | For the implementation of the code, CSS uses three methods such as inline CSS, Internal CSS, External CSS. |
How we can add CSS in HTML?
In HTML, we can add CSS to the HTML document by using three methods.
- Inline CSS
- Internal and embedded
- external CSS
What is Inline CSS?
The inline attribute is a concept of adding a style attribute in the HTML element. While adding the HTML attribute we need to add the style attribute into the HTML start tag. Similar to the style attribute you can declare inline CSS in an HTML document.
Syntax- < html start tag style= attribute: value > your text < html end tag >
Example-
<html>
<head>
<title>inline css</title>
</head>
<body data-rsssl=1>
<h1 style=" color: black; text-align: center; background-color: antiquewhite ;">GEEKY4U.com(Learn with passion)</h1>
<h1
style="font-size: x-large; text-align: center; color: rgb(13, 14, 12);">
GEEKY4U.com(Learn with passion)
</h1>
</body>
</html>
Output:
What are Internal and Embedded?
Internal tag is used for defining style on the HTML page. This is used within the head section of the HTML document. For declaring internal CSS you need to create a separate style tag outside the body tag. In the style tag, you can add special attributes which are defined and declared within two curly brackets along with the start tag.
Example-
<!DOCTYPE html>
<html>
<head>
<title>internal style</title>
<style>
h1 {background-color: rgba(226, 73, 99, 0.356)}
h2 {color: rgb(88, 236, 175)}
</style>
</head>
<body data-rsssl=1>
<h1>
GEEKY4U.com(learn with passion)
</h1>
<h2>
GEEKY4U.com(learn with passion)
</h2>
</body>
</html>
Output:
What is External CSS?
External style CSS is used for providing the style attribute through the link which is provided into the HTML head by using an external style tag. HTML Style External style attribute is used for providing links into the head tag and by using this attribute HTML page will define style on different pages.
Example-
<!DOCTYPE html>
<html>
<head>
<title>Internal style</title>
<link rel="stylesheet" href="style.css">
</head>
<body data-rsssl=1>
<h1>GEEKY4U.com(learn with passion)</h1>
<h2>GEEKY4U.com(learn with passion)</h2>
<p>GEEKY4U.com(learn with passion)</p>
</body>
</html>
Output:
CSS color, font, size?
- CSS color is used for providing color to the text
- A CSS font family is used for providing different font styles to your text.
- CSS font size is used to provide font size to the text.
Example-
<!DOCTYPE html>
<html>
<style>
h1 {color: rgb(238, 39, 195);
font-family: 'Times New Roman', Times, serif;
font-size: x-large;}
h2 {font-size: xx-large;
color: rgb(12, 174, 238)}
</style>
<body data-rsssl=1>
<h1>
GEEKY4U.com(learn with passion)
</h1>
<h2>
GEEKY4U.com(learn with passion)
</h2>
</body>
</html>
Output:
What is CSS border?
CSS border is used for providing borders to your text.
NOTE: Most important thing about CSS border is you can give border to all the elements
Example-
<!DOCTYPE html>
<html>
<head>
<title>border color</title>
<style>
h2 {
text-align: center;
border: 2px solid rgba(228, 37, 31, 0.644);
}
</style>
</head>
<body data-rsssl=1>
<h2>GEEKY4U.com(learn with passion)</h2>
<h2>GEEKY4U.com(learn with passion)</h2>
</body>
</html>
Output:
What is CSS padding?
CSS padding is also used for providing a border to the text but the padding is used for providing space between text and border.
Example-
<!DOCTYPE html>
<html>
<head>
<title>border color</title>
<style>
h2 {
text-align: center;
border: 2px solid rgba(3, 39, 53, 0.644);
padding: 1cm;
}
</style>
</head>
<body data-rsssl=1>
<h2>GEEKY4U.com(learn with passion)</h2>
<h2>GEEKY4U.com(learn with passion)</h2>
</body>
</html>
Output:
What is CSS margin?
CSS margin is used for providing margin to the border element.
Example-
<!DOCTYPE html>
<html>
<head>
<title>margin in border</title>
<style>
h2 {
text-align: center;
border: 2px solid rgba(3, 39, 53, 0.644);
padding: o.5cm;
margin: 2cm;
}
</style>
</head>
<body data-rsssl=1>
<h2>GEEKY4U.com(learn with passion)</h2>
<h2>GEEKY4U.com(learn with passion)</h2>
<h2>GEEKY4U.com(learn with passion)</h2>
</body>
</html>
Output:
How we can provide a Link to External CSS?
CSS External style attribute is used for providing links into the head tag and by using this attribute HTML page will define style on different pages.
Example-
<!DOCTYPE html>
<html>
<head>
<title>link </title>
<link rel="stylesheet" href="style.css">
</head>
<body data-rsssl=1>
<h1>GEEKY4U.com(learn with passion)</h1>
<h2>GEEKY4U.com(learn with passion)</h2>
<p>GEEKY4U.com(learn with passion)</p>
</body>
</html>
