A website is a beautiful convergence of art, tech, and science. It reflects all in the web design field. To craft a fully functional, appealing, intuitive, user-friendly HTML, CSS, and Javascript are the three major parts of web design. HTML is like a document skeleton; CSS manages the visuals and layout, and JS manages events and functionality. The blend of three languages makes a perfect front end.
Here, in this blog, we are sharing some CSS rules to make essential adjustments and make the webpage look more impressive and intuitive across all screens.
CSS Rules in Web Design for All Screens
Table of Content
Types of Screen
People have different sizes of devices. Suppose you want the website to look the same across all devices and engage large groups of users. In that case, CSS rules can help us achieve responsiveness and enhance usability across various screens with full consistency. Each screen has a different resolution, and it’s the web designer’s responsibility to keep the content and visualization fit across all screens and devices.
Below, we are giving a bride on various types of screens:
- Desktop Screen: They have small to extra-large screens. It is a bit complex to optimize the interaction, web design, and content, but necessary.
- Laptop: Screen size range is 11 inches to 17 inches. The resolution is smaller, but because of the portability characteristic perfect for everyone. So, the website should be responsive as per the laptop screen resolution.
- Tablet: They are available with 7-12 inch screen size with touch input interactions, keyboard, and track, so web design should be as per the standards.
- Smartphone: We need to focus on usability for better touch interaction. These devices generally are available with input, 4-7 inch screen size, and resolution.
- Television: They have different screen resolutions so, they need to optimize the web design considering the distance and navigation with a remote controller and tv.
- Game Console: They have unique interfaces with input methods, and can be accessed over web or tv.
- Wearable Devices: Need to optimise clear vision, glances, and content for AR glasses and small head-up.
- Smartwatch: Need to optimize design and usability for tiny screen focusing on minimalistic design and clear visuals.
- E-reader: The devices that display digital content: ex: Amazon Kindle
CSS Syntax Rule
A CSS Syntax associates three things: selector, property, and value.
- Selector: To target an HTML element to style
- Property: What style do you want to add on an element
- Value: The value you want to assign to that style property.
Selector{
Property1:value; property2:value; property3:value;
}
For example, we have an h1 heading tag. If you want to change the color of the heading, do it as follows:
h1{
Color:blue;
}
Here, we have used the semicolon to add on other style properties.
In CSS, there is a list of selectors; we can talk about them later separately. A few we have mentioned here:
ID selector, class selector, element selector, * (astric) selector, child selector, Pseudo selector, etc.
CSS Implementation
We can implement the CSS in three ways: Inline, Internal, and External. Inline CSS is the most powerful, overlapping the other two implementations. However, it’s not a best practice from a development perspective.
- Inline: It is written in the same line to style an element uniquely.
<p style=”color:green; font-size:0.75rem;”>This is a pragaraph</p>
- Internal: It is wrapped in the head section inside the style markup of the webpage.
Example:
/* Add this tag in the HTML file */
<style>
p {
color: green;
font-size: 0.75rem;
font-family: sans-serif;
}
</style>
- External: We create an external file and import it via a link tag. It is the best practice in web development.
Example:
/* Use this line in the head tag of HTML file */
<link rel=”stylesheet” type=”text/css” href="style.css">
/* style.css */
p{
color: green;
font-size: 0.75rem;
font-family: sans-serif;
}
CSS Rules/ Strategies for Better Visibility across Different Screen
By the time developers are progressing and adapting the best rules for faster development. CSS has also evolved and launched new rules to drive consistency and efficiency. Get to know them and practice in your next project:
Adapt Percentage Units
Gone are the days when you mentioned pixels for different elements of images. If you want to make your website look responsive, perfectly fitting the screen resolution, embrace relative unit to fluid layouts. Leave the pixel count and define the exact percentage for different tags. It will make everything consistent and visually appealing.
For example:
If you want to set the height and width for a “container class” write it as follows:
.container{
width:100%;
height:60%;
}
If there is any progress-bar class, set its width into percentages as follows:
.progress-bar{
width:60%;
}
Adapt Rem
Like height width for containers and tags, adapt the relative unit for text. Nowadays, professional developers set the text/ font in ‘’rem. It manages the perfect proportion of the root element and drives flexibility. Ensure that text looks readable with perfect spacing over large and small screen sizes.
Note: 1rem=16px;
Example:
p{
Font-size:1rem;
}
Image Optimization
The images and media elements often get out of their length. Large images slow websites’ speed and impact the core web vitals and appearance. Implement CSS rules and characteristics to avoid such scenarios and manage the pixels.
Define max-width property in percentage or relative unit.
Further, you can manage the screen resolution of media files using a picture element with ‘srcset’ attribute.
Try out other CSS properties to optimise the images per the different screen resolutions.
Example: For image, you can write as follows:
img{
width:100%;
}
If there is any background image inside the header class, you can adjust it as follows:
.header{
background-image: url(‘bg1.jpg’);
background-size:100%;
}
Media Queries
Get deep into the CSS using the media queries characteristic to optimize the websites. Try out the different rules to modify the style and layout. Adjust the breakpoints, padding, margin, border, font style, and size for perfect rendering and visibility across different devices. Legibly keep everything.
Example:
Typography makes a big difference in UI/ UX design; thus, to make it responsive and adaptive to all screen devices, apply media queries as follows:
@media screen and (min-width:320px){
h1{
font-size:24px;}
}
Touch and Hover behavior
There is a different base of non-touch and touchscreen users. Use CSS wisely to target both audience bases and improve the user experience. Adjust the padding, background color, border, or other properties to modify the button appearance and better hover targeting.
Example:
If you want to adjust the Touch-friendly hover interaction for a button. Here is the example. Button is also a class.
.button{
padding: 12px 24px;
background-color: green;
transition:background-colour 0.2 sec;
}
.button:hover{
background-color:blue;
}
Positioning and Formatting
Ditch the float property and embrace Flexbox to achieve a well-aligned website layout. It avoids unnecessary spacing and markups, giving you full control over the layout in one dimension. Flexbox makes everything seamless in web design without needing float and position properties, regardless of your target device and screen size.
Example:
Adapt a responsive column layout using flex and flex-wrap and properly manage spacing.
.columns{
display:flex;
flex-wrap:wrap;
}
.column{
flex:1;
Margin:8px;
}
Conclusion
HTML, CSS, and JS are the three main building blocks of the web design. With that, launching an engaging and responsive web interface is more effortless. If a web developer understands the basic and advanced concepts and some tricks of web design rules, they can develop fantastic web design for all screen sizes. Embrace and practice these rules to achieve top-notch accessibility and usability for your websites.