- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
7 CSS Hacks Every Developer Should Know
CSS is an abbreviation for Cascading Style Sheets. It is used to make visually appealing websites. Using it would make the process of producing effective web pages easier.
The design of a website is critical. It improves the aesthetics and overall quality of the website by promoting user interaction. While it is possible to create websites without CSS, styling is required since no user wants to interact with a boring, unattractive website. In this article, we have discussed 7 CSS hacks which every developer will need at some point of time during web designing.
Creating responsive images using CSS
Using a variety of techniques known as responsive images, the right image may be loaded regardless of the device's resolution, orientation, screen size, network connection, or page layout. The picture shouldn't be stretched by the browser to match the page layout, and downloading it shouldn't take too long or use too much internet. Because pictures load quickly and seem crisp to the human eye, it improves user experience. To make responsive images, always write the following syntax −
img{
max-width: 100%;
height: auto;
}
The simplest technique to create photographs with high resolution is to establish their width and height values as only half of what the actual size is.
Position the content of an element in the center
If you want to centrally align the content of any element, there are various methods. Easiest ones are mentioned below.
Position Property
Use the CSS position property to centrally place the content by specifying them using the following syntax −
element{
position: absolute;
left: value;
top: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
}
div{
position: absolute;
left: 45%;
}
</style>
</head>
<body>
<h1> Position property </h1>
<div> This is an example. </div>
</body>
</html>
Use <center> tag
The content you want to be aligned in the center should be written within a <center> tag. Then, the whole content will be centrally aligned.
Use text-align Property
If the content to be aligned centrally contains only text then, you can simply use the textalign property.
text-align: center;
Use of Universal Selector
CSS asterisk (*) selector, also known as CSS universal selector, is used to select or match all the elements or some part of the element for the entire web page at one go. After selecting, you can use any CSS custom properties to style it accordingly. It matches the HTML elements of any type like <div>, <section>, <nav>, <button> etc., It can also be used to select and style the child elements of a parent.
Universal selector is literally used to style every element in a web page. Generally maintaining a particular style format for the whole page is difficult since there are default values set by the browsers. It enables the developers to prepare a default style for a web page. The most common use is to style all the elements of the web page all together.
Syntax
*{
Css declarations
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
text-align: center;
font-family: Imprint MT shadow;
}
</style>
</head>
<body>
<h1>Css Universal Selector</h1>
<h2>This is an example. It shows how to style the whole document altogether.</h2>
<div>
<p class = "para1"> This is the first paragraph. </p>
<p class= "para2"> This is the second paragraph </p>
</div>
</body>
</html>
Overriding CSS Styles
Usually, for overriding CSS styles, we use CSS classes. However, if you want to specify a particular style must be applied to an element, then, use !important.
Syntax
element{
property: value !important;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
}
.demo {
color: red !important;
}
</style>
</head>
<body>
<h2> This is an example #1 </h2>
<h2> This is an example #2 </h2>
<h2> This is an example #3 </h2>
<h2 class= "demo"> This is an example #4 </h2>
<h2> This is an example #5 </h2>
</body>
</html>
Scroll Behaviour
Fine and efficient user experience is the most crucial factor in web designing. If your website is not user-friendly, then there is no point in making the website. In order to ensure smooth user experience, you should add smooth scrolling effect to your website.
The scroll-behaviour property enables the developers to specify the Behaviour of the page during scrolling.
html{
scroll-behaviour: smooth;
}
Add a media query and make typography responsive
When a media type matches the type of device the document is being shown on, media queries with that media type are used to apply styles to the content.
@media (max-width: 100px){
{CSS rules….
}
}
If your website is to be viewed in different devices, then it will be best if you use the viewport units. It ensures that the content will resize itself according to the viewport.
vw – viewport width
vh – viewport height
v min – viewport minimum
v max – viewport maximum
CSS Flexbox
A CSS Flexbox is a container that includes a number of flex elements. The flex elements can be arranged into rows or columns as necessary. Flex items are subelements of the flex container, which is its parent element. Each element is given a polished and appealing appearance using CSS flexbox.
display:flex helps the developers to make every component appear appropriate and lovely. It arranges the element's children into rows or columns by aligning them.
It aligns the children in the parent element into rows or columns.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: #097969;
align-items: center;
justify-content: center;
width: 60%;
}
.demo1, .demo2, .demo3, .demo4 {
background-color: yellow;
height : 50px;
width: 90%;
margin: 10px;
padding: 12px;
font-size: 17px;
font-weight: bold;
font-family: verdana;
text-align: center;
align-items: center;
color: brown;
}
.demo1{
order: 1;
}
.demo2{
order: 4;
}
.demo3{
order: 2;
}
.demo4{
order: 3;
}
</style>
</head>
<body>
<h1>Order of Flex Items</h1>
<p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
<div class="flex-container">
<div class= "demo1" > This </div>
<div class= "demo2"> example </div>
<div class= "demo3"> is </div>
<div class= "demo4"> an </div>
</div>
</body>
</html>
57 Views
