Introduction to CSS
 |
| CSS-Language-Learning |
CSS (Cascading Style Sheet)
CSS is a language that lets us give an HTML document an attractive look. Where HTML shapes a webpage, we give that page an attractive look. To write CSS as HTML, we also need a text editor (like notepad, or notepad ++), and the changes made in the page are seen on the baby browser.
Through CSS, we can give different elements to HTML Elements which we will discuss next.
There are three different ways to write CSS, we can use any of these methods -
Inline CSS
Internal CSS
External CSS
1. Inline CSS
When we write CSS within an HTML tag, it speaks Inline CSS. In this manner the properties of CSS are written in the "style" attribute. for example
<div style = "color: red; height: 50px; width: 50px; background-color: blue;"> test </ div>
Eg above In this, we have written the CSS of the div element inside it. From this CSS we will get a box whose height and width will be both 50px, the background color will be blue and the text will be red.
2.Internal CSS
In this manner, CSS is written in an HTML page, which also affects the same page. In this manner, CSS styles write inside tags and live inside the style tags head tags.
Note: - Here we have used the #box. We have given an id to the box "box", and we are giving properties that div only on the basis of its id. When we select an element based on its id, we use the first # of the id. It speaks id selector (like here #box).
If we have to apply similar properties on two or more elements, we use the Class Selector.
For example
<html>
<head>
<title> </ title>
<style>
.myboxes
{
color: red;
height: 50px;
width: 50px;
background-color: blue;
}
</ style>
</ head>
<body>
<div class = "myboxes"> Test 1 </ div>
<div class = "myboxes"> Test 2 </ div>
</ body>
</ html>
Here we have given both div a similar class and have written CSS based on their class. This CSS will apply to both of these. If we have more than two divs, all of which are class "my boxes" then this CSS will apply to all of them. Here we have inserted the dot (dot) before the class of element. We will call my boxes as a class selector.
We can also give CSS an element based on its name.
For example
<html>
<head>
<style>
p {color: red; }
</ style>
<body>
<p> This is a test </ p>
</ body>
</ html>
Here we have given the CSS element by selecting CSS based on its name. This is called an element selector.
External CSS
In this way, we create a separate CSS file. And link it to the HTML file. For example, if we have a file named basic.html and its CSS has a file named style.css.
basic.html
<html>
<head>
<title> </ title>
<link rel = "stylesheet" href = "style.css" type = "text / css">
</ head>
<body>
<p> This is a test <p>
</ body>
</ html>
style.css
p {color: red; }
We have included our stylesheet in the HTML page with the link tag.
Some basic properties of CSS
height: - This property is used to give an element a certain height.
width: - Use this property to give an element a fixed width.
color: - Use this property to give color to an element's text.
background-color: - Use this property to change the color of the background of an element.
border: - Use it to make an ordered border.
In it, we define three things. Border thickness, its style, and it's color.
For example, We have a div whose id is "my box". In this, we understand how many ways we can make the order.
<div id = "mybox"> This is a test </ div>
On this div, we are applying the internal CSS.
<style>
#mybox
{
border: 1px solid black;
}
</ style>
In this case, there will be the thickness of the 1px border, solid will be its style and the color will be black. We can increase or decrease the thickness of the border by pixels (px). Such as 1px, 5px, 2px, 10px, etc. And the style and color of the border can also be varied. like -
2px solid blue;
5px dotted red;
4px dotted green;
10px double gray;
With "border" property, we can give the thickness, style, and color of the border at a time. But if we want, we can also offer different offers of Border -
border-width: - To give the thickness of the border.
border-style: - To give the styling of the border.
border-color: - To give the color of the border.
For example
#mybox
{
border-width: 2px;
border-style: solid;
border-color: red;
}
We can also give an element a different border around it. For example, if we only give top div to our div, then we will write
#mybox
{
border-top: 2px solid black;
}
We can also give different border all around.
For example
#mybox
{
border-top: 1px solid red;
border-left: 2px dotted green;
border-bottom: 2px double blue;
border-right: 4px solid black;
}
6. Margin: - This property is used to create space around the elements.
There are various presentations for adjusting the margin of any element.
margin-top
margin-right
margin-bottom
margin-left
Margin Properties ofThere can be no values -
auto: - If we assign margin auto to an element, then it calculates the margin browser.
length: - You can also give an element in the form of margin, px, pt, or cm.
%: - In the margin% form of an element, which is calculated according to the height/width of the parent element of that element.
Inherit: - An element can apply the margin of its parent element on its own.
In the following example, we are setting different margins around an <div> element -
div {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
margin-short hand property:
We can also give the margin around an element with the same property. Rather than giving different margin properties for top, bottom, left, right, we can refer to the margins all around in a single margin property. See how -
If the margin property has four values -
margin: 20px 34px 50px 70px;
so,
top-margin will be 20px.
The right margin will be 34px.
The bottom margin will be 50px.
the left margin will be 70px.
div {
margin: 20px 34px 50px 70px;
}
* If there are three values in the margin property -
E.g., margin: 10px 15px 25px;
So, the top margin will be 10px, right margin and left a margin, both will be 15px, bottom margin will be 25px.
* If there are two values in the margin property -
E.g. margin: 10px 20px;
so,
The top and bottom margin will be 10px and the left and right margin will be 20px.
* If there is only one value in the margin property,
E.g. margin: 45px;
So, the margin all around will be 45px.
* margin auto value: - This property is used to make an element horizontally in the center inside its container. By doing so, the height and height specified in the element will occupy it and the remaining space will be equally distributed in left and right margins.
Padding: -
We can define the padding as the space inside the border of an element. The thing to keep in mind is that every one HTML is the border of the element, which we can show by its border property. To set the padding of an element, there are four properties of CSS that give you the padding of each side freely. These four properties are -
padding-top, padding-right, padding-bottom, padding-left
If we want to give uniform padding around, then we can give it to a single property 'padding'.
Padding values are defined in pixels and we can not give the negative value of padding.
* padding-left property: - This property defines the padding of the left side of an element.
For example
p {
padding-left: 25px;
}
This eg On the left side of p element 25px extra space will be created.
* padding-right property: - This property defines the padding of the right side of an element.
For example
p {
padding-right: 20px;
}
This eg In the right side of the p element 20px extra space will be created.
Note: - In any padding property the space that is created is within the bounds of that element.
* padding-top: - This property creates an upward space inside an element's border.
For example
p {
Padding-top: 50px;
}
This eg In the top of the element of the p element 50px will create additional space.
* padding-bottom: - This property creates space on the bottom side of an element's border.
For example
p {
padding-bottom: 40px;
}
This eg In the bottom of the p element, there will be an extra space of 40px on the bottom.
* 'Padding'-shorthand property: - We can also adjust the padding around an element from a single property' padding '.
If there are four values of padding
div {
padding: 20px 25px 30px 35px;
}
so -
Top-padding is 20px.
Right-padding is 25px.
The bottom-padding is 30px.
left-padding 35px;
* If there are three values of padding -
div {
padding: 20px 30px 40px;
}
so -
top padding will be 20px.
right and left paddings will be 30px.
bottom padding will be 40px.
* If there are two values of padding -
div {
padding: 10px 20px;
}
so,
top and bottom paddings will be 10px
right and left paddings will be 20px.
* If there is a value of padding -
div {
padding: 40px;
}
So the padding around will be 40px.
* Height and Width: - Use 'height' and 'width' properties to set the height and width of an element.
The value of height and width can be given in px, cm, or%.
For example
div {
height: 200px;
width: 50%;
}
In the example above, width: 50% means 50% of the width of the parent element of the div.
No comments:
Post a Comment