CSS: Working with Links and Images
At the heart of web design are anchor and image tags. How to work with and manipulate images and HTML links? This question is trendy among front-end developers.
Anchor tags are very important to web design. They give meaning to the word, World Wide Web. They are the links that connect web pages in a spider-web like structure, allowing users to move seamlessly between pages of different sites and within pages of the same site.
Website images add to the beauty and the aesthetics of every web tool. Designers use them in headers, lists, profile pictures, descriptions, and galleries. A picture speaks a thousand words, and this is just as valid in eCommerce. As online commerce booms, images have become key components in product promotion and when attracting more visitors.
Anchor Tag (<a>)
The anchor tag is written as <a> in HTML. HTML links are also called hyperlinks. The <a> tag is notably different from normal text. By default, it is underlined, has a blue color, and when the mouse is hovered over it, the cursor changes to a little hand. You can style anchor tags using CSS in different ways.
An essential attribute of the <a> tag is the href, which sets the link destination. The <a> tag, with the href attribute is the default standard for writing hyperlinks in HTML.
Syntax
The basic syntax for writing a hyperlink in HTML is,
<a href="https://www.codecoda.com/en">Visit Codecoda</a>From the syntax, the text in the href quote is the link's destination, while the text between the <a> </a> tags is the text the reader sees. A reader who wants to visit Codecoda for more information will see 'Visit Codecoda', but not the actual link to Codecoda. And when the user clicks Visit CodeCoda, they will end up on CodeCoda's homepage. Any other link can replace the link https://www.codecoda.com/en according to the desired destination.
You can place the <a> in the body and head section of a document. The head section defines the link to external resources like Google fonts, external CSS, and external Javascript.
Types of Links
Absolute Links
Absolute links are links that point to a specific path. They always begin with a protocol name. Absolute links are mainly used to define other sites within the internet. The link - https://www.codecoda.com/en is an absolute link. It refers to a specific website on the internet, and it starts with an HTTPS protocol.
Relative Links
Relative links are links referenced within a working directory/folder. The file path is usually relative to the current page. A relative file path is usually specified when linking to pages within a website. It doesn't need a protocol or address, just the filename.
<a href="aboutus.html">About us</a>
<!-- In this case, the aboutus.html file is located in the same folder as the working document.-->The file path could also include folders that are outside the working directory.
<a href="/Employees/employees.html">Employees</a>Relative links remain the same - on the working machine and the webserver if uploaded. They should also be closely monitored. If a file path were to change, the URL would become void.
In-Page Anchors
Have you ever seen pages with a 'go to the top' link or button at the bottom? And when you click on it, it takes you all the way to the top of that page or document? Or a long web document is sectionalized with a 'table of contents' where each item is a link to different sections within the same page. This style of linking is called in-page anchors since they happen within the same web page.
To have this linking style within a web page, you must first set the location where the users will go. You can achieve this through the 'name' attribute. The defined name will be referenced by the href attribute with a pound sign. Here's a demo.
<html>
<body>
<h1> Table of contents </h1>
<p><a href="#links">HTML Links</a></p>
<p><a href="#images">HTML Images</a></p>
<h1> MAIN CONTENT </h1>
<h2><a name="links"></a>HTML LINKS</h2>
<p>Insert Long Text Here....... </p>
<h2><a name="links"></a>HTML IMAGES</h2>
<p>Insert Long Text Here....... </p>
</body>
</html>Characteristics of a link
By default, all links are underlined.
- An unvisited link is blue.
- A visited link is purple.
- An active link is red.
- Links are not just text. They could be images, buttons or other HTML elements.
- During coding, you better leave dummy links empty or add the pound sign between quotes. This maneuver allows the element to be clickable, but the link goes nowhere.
<a href=" ">Dummy link</a>
<a href="#">Dummy link 2</a>Link states (Pseudo Classes)
Links are dynamic and occur in individual states. Link pseudo-classes allow developers to style the different states of a link in CSS. HTML links have five main active states - link, active, hover, visited, and focus. You can style all five of these at the same time for one link.
The :link state is the default state of a link, while :active denotes the currently selected link. The :hover state occurs when the mouse is over the link. The :visited state is a link that has been clicked. The :focus state occurs when a user focuses on a link.
You can attach different styles to these states. Here is a code that changes the text color as each state occurs.
a:link{
color: #000000;
text-decoration: none;
}
a:visited{
color: #bbffcd;
}
a:hover {
color: #ffcc99;
}
a:active {
color: #f2f2f2;
}
a:focus {
color: #b1b1b1;
}
<html>
<a href="https://www.codecoda.com/blog/en">Visit our blog</a>
</html>The pseudo-classes of the <a> tag follow an order. :link comes before :visited followed by :hover and :active. If a pseudo-class is omitted, the succeeding pseudo-class follows immediately.
Like other HTML elements, <a> tags can have classes and ids attached to them.
Common Types of Links
- Default link - This is the default link style of either relative or absolute linking:
<a href="contactus.html">Contact us</a> - Image links - This type of link makes an image clickable. The anchor tag wraps around the image tag.
<a href="https://www.codecoda.com/blog/en"> <img src="codaheaderimage.jpg" alt="header image" /> </a> - Button Links - This link makes a button clickable. If the button tag is inside the <a> tag, then the entire button becomes clickable. If the <a>tag is inside the button tag, only the text inside it is clickable.
<button><a href="https://www.google.com">Click Me</a></button><!--only the text in the button is clickable --><a href="https://www.google.com"><button>Click This</button></a> <!-- entire button is clickable --> - Navs - Here is how to use linking for navigations and menus. Usually, you can attach the anchor tag to a list and style it according to your preferences.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">About Us</a></li> </ul> </nav>/* CSS */ li { display: inline-block; padding: 2px; } ul { list-style-type: none; margin: 0; padding: 0; } a { font: 18px; color: maroon; text-decoration: none; } a:hover{ color: red; text-decoration:underline; }The above code snippet will create an excellent, simple top bar navigation menu for a website.
IMAGES <img>
We cannot overemphasize the importance of images on a website. As web development advances, the need for good, highly optimized, responsive images also increases.
The image tag is written as <img> in HTML. It takes two important attributes, src and alt. Src specifies the path to the image, while alt specifies an alternative text for the image. Something that briefly describes the image if, for any reason, the image does not load.
Other attributes of the image include srcset, width, height, and longdesc. Attributes like width and height can be written inline with <img> tag or specified later in the CSS.
Background Images
Background-image sets an image as the background for a specified element. Background images are quite popular in web design, and web designers usually use them in headers since they make it easy to have text written on them.
By default, a background-image repeats both vertically and horizontally. You can take care of this by using the no-repeat property.
In CSS, the background property is set using the URL value. The URL path could be relative or absolute. Background images could be adjusted, positioned, and manipulated using other background properties.
The following code snippet will create a background image with a text overlay positioned in the middle of the image.
<div class="header-image">
<div class="header-text">
<h1>TechBuddies</h1>
<h4>We love tech</h4>
</div>
</div>.header-image{
background-image:url("https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png");
background-color: #fbfcfb;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.header-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}Responsive images
A responsive image is one that adjusts automatically to fit the size of the screen display. It might seem like a headache trying to create different media queries for other screen sizes, but responsive images are relatively easy to define.
img {
width: 100%;
}Setting the width or max-width property to 100% automatically makes an image responsive, allowing it to fill up any element size.
Centered Images
Trying to handle alignment and responsiveness can be quite tricky. The default for centering an item uses text-align: center, but this doesn't always work, especially when other display properties counter it.
To horizontally center an image, you could also margin auto value.
img {
margin: 0 auto;
}Flexbox provides a more robust way of centering images. To center an image horizontally, along the x-axis, use
img {
justify-content: center;
}To center an image vertically, use
img {
align-items: center;
}You can use either of these to center an image both horizontally and vertically perfectly.
Rounded Images
Rounded images are the rave for profile pictures. To make an image rounded, set it's border-radius to 50%. It will give all the border edges an equal rounded touch.
img {
border-radius: 50%;
}Figures and Captions
Images work with HTML tags, <figure> and <figcaption>. The figure tag represents self-contained content that encloses images, charts, illustrations, etc. The figcaption is a description of the figure tag. Images placed within the figure element and described with a figcaption can create a beautiful gallery with notes.
IMAGE GALLERY WITH FIGURE AND FIGCAPTION
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
color: black;
font-style: italic;
padding: 2px;
text-align: center;
}<div>
<figure>
<img src="https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Trulli" style="width:100%">
<figcaption>Puglia, Italy</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1486591913781-4bee9ed65bfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Paris" style="width:100%">
<figcaption>Paris, France</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1484503369601-c5f45a1bf914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="spain" style="width:100%">
<figcaption>Madrid, Spain</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1504019347908-b45f9b0b8dd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Island" style="width:100%">
<figcaption>Trogir, Croatia</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1509840841025-9088ba78a826?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Turkey" style="width:100%">
<figcaption>Istanbul, Turkey</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1512753360435-329c4535a9a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Rome" style="width:100%">
<figcaption>Rome, Italy</figcaption>
</figure>
</div>OUTPUT
CONCLUSION
There are hardly any websites today without any links or images. They are necessary to influence web users, but they matter to search engines and SEO. Careful utilization of these two HTML elements will boost the relevance and credibility of a website. Learning how to use media in web design effectively is a fundamental requirement for any web project.
