-
Web Page Alignment Basics using HTML & CSS
We’ll look at horizontal and vertical alignment basics using various HTML and CSS properties. Ways to horizontally align items using CSS Using text-align property This is used to horizontally align text within a block-level element, such as a <div> or <p> tag. Using the margin property This property is used to horizontally adjust the block-level…
-
What is box-sizing : border-box in CSS?
Introduction This property specifies the behaviour of the width and height of a container, more specifically a div. To understand this property you have to use it on more than one div elements which stack on top of each other, or, on div tags which are in a parent-child hierarchy. Explanation with examples Example 1…
-
All HTML & CSS hacks to make a Website Responsive
Using Percentages If you’re traditionally using pixels, your boxes or images will have a fixed size. For example, if you have a really large image embedded on you site, it might look good on a big screen, but, if you see the same image on a smartphone, the image falls off the screen. It looks…
-
How to fix background image displaying as repeating tiles using CSS
Sometimes when you set a background image on your web page, it displays as repeating tiles on the page. So, the problem looks like this : As you can see, the tiles may be vertical, or horizontal or both. It looks very bad when it comes to web designing. To fix this problem, the best…
-
The concept of position : absolute and position : relative in CSS
Let me first type in the basic HTML and CSS files like so, and then I’ll explain this in detail (you’ll need to follow along to understand it fully well) : So, we’ve created three basic boxes (boxA, boxB & boxC) one inside the other, as parent and child. Render the code and observe the…
-
justify-content: center vs align-items: center in CSS
In CSS, justify-content: center aligns items (such as text, divs or boxes) horizontally and align-items: center aligns things vertically. Both these CSS properties can be used by activating the display: flex property first. These properties applies to the parent container. Here are the illustrations to explain the same :
-
How to add white space around a web page using CSS?
Let’s say you have a a simple web page like so: Now, to add some white space around this web page, you can use these two methods: Method 1 Say, you want to add 50px space on the left an right side : In the above code, the first parameter ‘0’ represents top-bottom, and the…
-
How to make images responsive using CSS
To make an image responsive, all you need to do is to set the image width in terms of percentage rather than pixels. Let me demonstrate this with an example : Say, we have an image called image_file.jpg in the HTML file. All we need is to go to the CSS file and set the…
-
How to Scale Image without distorting the aspect ratio using CSS
Here’s a simple web page with a dog photo : Say the image dog_photo.jpg is huge, around 4500 X 2200 pixels in size, and falls off the container. You just have to change the height or width to a smaller size. Remember, height OR width, not both of them. If you change both, the image…
-
Flat button with rounded corners – CSS
Simply do this : In order to make the button appear flat rather than the default look (which is a bit 2D’ish) first specify a background-color to it and then specify the CSS border property to zero. Note that if you specify the border : 0 without the background-color, the code won’t work as expected.…
