What if you want to center all the texts and not just the <h1> and <p>? There is a simple way to achieve that. You have to understand the parent and child element. Basically, if you style a parent element, all the child elements will have the same styling, unless you specify a specific style for the child element. The following is our example:
<body> <!--This is our parent element -->
<h1>John Doe</h1>
<p>I'm an <b>amazing</b> Designer</p>
<input type="email" placeholder="Your email">
<input type="submit">
<img src="img/designer.jpg">
<a href="http://twitter.com/philippehong">My Twitter</a>
</body>
The <body> tag is the parent of every element that is inside it, which includes the <h1>, <p>, <input>, <img>, and <a> elements.
Let's remove the previous style and style the <body> element with text-align: center;:
<style>
body {
text-align: center;
}
</style>
Let's save the HTML document and reload the page in Chrome. Note that every element has the property text-align: center;.