How To Style Images With CSS

How To Style Images With CSS

In this tutorial, you will learn how to style images with CSS to add a border, and change the shape, and size of the image. Using CSS to style images allows you to uniformly specify how images should appear across your website with only a few rulesets.

Introduction

In this tutorial, you will learn how to style images with CSS to add a border, and change the shape, and size of the image. Using CSS to style images allows you to uniformly specify how images should appear across your website with only a few rulesets.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Adding Images To index.html

First, you need to add an image to the images folder. You can download the image from the demonstration website or use any image in a JPEG/JPG or PNG format. This exercise will also work better if the dimensions of your image are around 150-200 pixels by 150-200 pixels.

Note : To download the image of Sammy the Shark, visit this link  and CTRL + Left Click  (on Macs) or Right Click  (on Windows) on the image and select “Save Image As” and save it as small-profile.jpeg  to your images  folder.

Once you have selected an image, save it to your images folder as small-profile.jpeg. If you save it as a different file name, you’ll need to modify the image file path in the step below.

Next, erase all the content in your index.html file (except for the first line of code: <link rel="stylesheet" href="css/styles.css">) and add the following code snippet:

index.html

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">

Copy

This code snippet uses the <img> tag to insert an image and gives the browser the location of the image file (images/small-profile.jpeg). Make sure the highlighted file path is correct if you have changed the file name of your image.

Note

To copy the file path of your image using Visual Studio Code, hover over the icon of the image file in the left-hand panel, click CTRL + Left Click  (on Macs) or Right Click  (on Windows), and select “Copy Path.” For an illustration of the process, please see the gif below:

Gif of how to copy an image file path

Make sure to copy the relative  or project  file path of the image rather than the absolute  or full file path of the image. The relative path refers to the file location relative to the current working directory (as opposed to the absolute  path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative  path would work if you decided to publish the website online. Since the end goal is to create a publishable website, you will start using relative paths now when adding <img>  elements to the document.

css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size.