1. Advantage of Using CSS for the Background Image
CSS background images can be swapped based on the screen size using @media queries and the background-image property. This allows for different images on various devices.
To add a background image, use the background-image property and specify the image URL:
background-image: url(images/ImageName.jpg);
By default, the background image is placed at the top-left corner of an element and repeated both vertically and horizontally. To prevent repetition, either match the image size to your layout or use the background-repeat: no-repeat property.
2. Normalize CSS
Normalize.css ensures that browsers render elements more consistently, adhering to modern web standards. It only targets styles that need normalization.
Yes, you can attach multiple CSS files to your HTML. However, make sure the order is correct: Normalize.css should be listed first, followed by your custom CSS file, which will take priority.
3. Viewport Code
The following code should be added to the head of every HTML page to ensure compatibility with smartphones and tablets:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
4. Favicon
Favicons are small square icons that appear in the browser tab next to your site title. The ideal size is 16x16px at 72ppi. While they were traditionally saved as .ico files, they can now be saved as .png files.
It is recommended to use transparent pixels for the favicon’s background. To add a favicon to your site, use the following code:
<link rel="icon" href="images/favicon.png" type="image/x-icon">
5. Metadata and SEO
Metadata plays a key role in determining how easy it is for search engines to find your website. SEO stands for Search Engine Optimization. Important metadata includes robots, description, and title.
6. Robots
The robots meta tag tells search engines whether to index or ignore your site. To allow indexing, use the following code:
<meta name="robots" content="index, follow">
If you want the site ignored by search engines, use:
<meta name="robots" content="noindex, nofollow">
7. Description
The description meta tag provides key information that Google indexes if allowed. It is important for SEO, so make sure it is accurate to avoid a lower ranking.
To add a description, use the following code:
<meta name="description" content="Your page description here" />
For more information on SEO and site ranking, visit Google’s documentation:
Google Web Development Guidelines
To improve your site's ranking, sign up for Google Search Console, add your website property, and use the URL Inspection tool to request indexing:
8. Title
The title tag is crucial. If it’s missing, your page will be "untitled," making the site look incomplete. Update the title tag as follows:
<title>Your Page Title</title>
Additional metadata can also be included:
<meta charset="utf-8">
<meta id="MetaAuthor" name="author" content="J. Blake Johnson" />
<meta name="copyright" content="Copyright (c) 2015 J. Blake Johnson. All Rights Reserved." />
<meta name="rating" content="General" />
9. Optional Metadata
Although keywords are no longer as important for Google, they can still help with other search engines. Adding them to your page can still be beneficial.
<meta name="keywords" content="Place your keywords here" />
10. Z-index
The z-index property controls the stacking order of elements on a webpage. A higher z-index means the element will appear "in front" of others, while a lower z-index pushes it "behind." This property is useful for layered designs.
When using special positioning such as absolute or fixed, always define top, bottom, left, or right to specify its exact position.
11. X and Y Coordinates
On a webpage, the X-axis runs horizontally, while the Y-axis runs vertically. The coordinate (0,0) represents the top-left corner of the page.