Centered and Responsive Page using CSS

Centered and Responsive Page using CSS

 
VIEW DEMO   DOWNLOAD SOURCE

First of all Welcome to the very first tutorial of CSS (that’s what we say “CSS Tuts”). Here we are going to “Design a Custom Page” using simple properties of CSS. So lets get started…

Make a Note: The examples shown here serve as inspiration, they are dummies & strictly not meant for production.

Here in this example i am just explaining the primary things. So, lets see the part of HTML code i’ve used here.

<body>
<center>
<img class="myLogo" src="pg_logo.png" width="145" height="145">
<h1>ProgrammingGuide.in</h1>
<p>Coders Don't Sleep...</p>
</center>
</body>

You can see clearly that on the line no. 3 i’ve used the <img> tag with the class attribute having the value “myLogo” then the src, width & height as well. Using the “myLogo” class i’ve centered the PG logo. Similarly i’ve assigned different properties to the <h1> & <p> tag. i.e. to the “ProgrammingGuide.in” & “Coders Don’t Sleep…” texts respectively.
Now coming to the main part i.e. the CSS part. Now what i’ve done in the CSS file to make everything come in the center & responsive is shown in the below code.

h1 {
  position: absolute;
  top: 50%;
  left: 0;
  margin: auto;
  margin-top: -100px;
  line-height: 200px;
  color: #F63B04;
  width: 100%;
}

p {
  position: absolute;
  top: 50%;
  left: 0;
  margin: auto;
  margin-top: -200px;
  line-height: 500px;
  color: #000000;
  width: 100%;
}

img.myLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -180px;
  margin-left: -73px;
}

So, in the above CSS Code the highlighted lines are making every tag’s property to make it the center of the page & responsive. These properties are explained in the below table.

Property Description
position This property specifies the positioning method used for an element (maybe static, relative, absolute or fixed)
top The top property sets the top edge of an element to a unit above or below the top edge of its containing element (for the absolute positioning)
left The left property sets the left edge of an element to a unit to the left or right of the left edge of its containing element (for the absolute positioning)
margin It clears the area around an element
margin-top sets the top margin of an element
line-height specifies the line of height

Author Description

humanz

Our mission is to bring the affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world. - Follow @program_guide

No comments yet.

Join the Conversation