Adding CSS properties to our website
CSS is Cascading Style Sheet and it is used for decorating our webpage or it is used for styling the website.
As we have been constructing a website as discussed in the past story, let us continue that:
Before css is not being used:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tourism</h1>
<p>Plan the trip wherever you want to go</p>
<button>Get Started</button>
</body>
</html>
As we can see the text is aligned in the center of the page, so now we will be learning about how to keep the text in the center by using CSS.
Inorder to write css syntax, first we need to create the css file. css syntax is a set of rulesets.
Ruleset:
selector{
property1: value1;
property2: value2;
}
Selector-Name:
First we need to select the proper Selector-name.
For Example:
As we are planning to align the text in the center we can use the selector name as:
horizontal, horizontal-center, h-center, horizontal_center, HorizontalCenter etc.
So, the css rule set to center elements is:
.h-center{
text-align:center
}So, we need to use selector with the “.” because it is rule of the syntax.
.h-center is the selector from the above syntax, text-align is the css property and center is the css property value.
HTML Attribute:
Html attribute provide additional information about the html element.
So, now we will be adding html attribute to the html element:
<tag attribute=”value”>content</tag>
attribute is the syntax name of attribute and value is the attribute value
For example:
<h1 class=”h-center”>Tourism</h1>
In the above example there is no need to use . infront of attribute value i.e “h-center”
Class attribute is used for adding css property to the html and if we use
<h1 class=”h-center>Tourism</h1> it align only the Tourism to the center of the page and to add this property to all the elements we need to wrap the elements.
The wrapping means grouping all the requirements at one place and it can be done by “container”.
For Example:
If we want to delivery the 10 products to the same address then we delivery them at a time by gathering all the products and hence that could be easy and such a way this container helps to move all the text to the center at a time.
In html container element is “div”.
<div> other element</div>
other element here is content
CSS:
.h-center{
text-align:center
}HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="static.css">
</head>
<body>
<div class="h-center">
<h1>Tourism</h1>
<p>Plan the trip wherever you want to go</p>
<button>Get Started</button>
</div>
</body>
</html>
This is how we align the text in the center.
No comments:
Post a Comment