A Beginner’s Guide to Playing with CSS Using Developer Tools
CSS (Cascading Style Sheets) is the magic behind the beautiful websites we interact with daily. If you’re a beginner and eager to start tinkering with CSS, using browser developer tools is an excellent way to experiment without the fear of breaking anything. Here’s a beginner-friendly guide with examples.
First, open your browser. This guide will be using Google Chrome, but the steps are similar for Firefox and other modern browsers.
Navigate to a webpage you’d like to play with. For our example, let’s say it’s a simple blog. Right-click on an element you find interesting, maybe the title, and select “Inspect” from the context menu.
The Elements Tab
You’ll now see the Developer Tools panel open, usually at the bottom of your browser. The tab named “Elements” (in Chrome) or “Inspector” (in Firefox) should be active. Here, you’ll see the HTML structure of the page, and on the right, the CSS that is applied to the selected element.
Example 1: Changing Font Size
Find the title in the HTML. It might be inside <h1> tags. Click on it. On the right side, you’ll see some CSS rules. Let’s change the font size.
font-size property or create one by clicking on the element selector. Type
font-size: followed by the size you want, like
30px, and then a semicolon. It should look like this:
Press Enter and watch the title change size!
Example 2: Altering Colors
Let’s change the color of the title. Similar to the first example, in the right panel, find
color or create it. Set it to a color you like. You can use names like
green, or hexadecimal like
This will change the title’s text color to blue.
The Styles Tab
The Styles tab, usually below the Elements tab, is where you can add new styles to elements.
Example 3: Add a Background Image
Select an element, such as the body of the page by clicking on the <body> tag. Go to the Styles tab and click on the small plus icon in the top-right corner to add a new style rule. This will create a new block where you can enter your CSS.
Type the following:
Replace the URL with an actual image URL, and the page background will change to that image.
The Device Toolbar lets you see how the website looks on different devices.
Example 4: Testing on Mobile Devices
Click on the Device Toolbar icon, which looks like a phone and tablet. The page will change to look like it’s on a mobile device. You can select different devices from the dropdown. Try changing the CSS while in this view to see how it affects the mobile layout!
These examples only scratch the surface. You can play around with various CSS properties like
border, and more. Remember, the changes you make with Developer Tools don’t affect the live website; they’re only visible to you, and only until you refresh the page. So feel free to experiment as much as you like!