GOAT's profile picture

Published by

published
updated

Category: Web, HTML, Tech

using inspect element to craft dank blogs

anyone remember that guide to html && css from a few months back??

well here it is again in case ya missed it :o

blog.spacehey.com/entry?id=1601060

anyway what we're gonna be doing here is using that same blog post to explain how inspect element works and how it's a crucial component when it comes to making your very own layout!!

1st, right click any section of your profile, blog, whatever (i'm going with my blog title header here) and choose inspect (q), or whatever your browser's option for code debugging is (feel free to talk bout that in the comments if you want)

you should see something v similar to this

what we can see here is the blog title uses the attribute .title, h1 - btw, did you also notice that little dashed square right next to that??

selecting that highlights the section of the page you're interested in (which imo is very handy and you will almost certainly find it the most helpful aspect of all of this but anyway)

for demonstration purposes, i'm just gonna quickly change some values of my blog title to show you exactly how easy it really is :3

see?? all i did there was change the font, the size of the font, the colors, added a border, changed the bg color, not a huge amount of change really.

ofc when you make these changes in inspect mode, it DOESN'T actually change your spacehey profile. but what you CAN do is copy and paste the code INTO your spacehey profile!!

copying mine right here from inspect mode gives me:

.title, h1 {
font-size: 40px;
font-family: cursive;
color: #b01400;
text-shadow: 1px 1px 0 #ff3df9, 2px 2px 0 #dbdeff;
animation: radtext 1.5s infinite;
border: 3px solid blue;
padding: 5px;
background-color: beige;
}

ofc, once you got that code, it's just a case of going to spacehey, selectin the edit profile option and then pasting that code onto a new line anywhere between yr <style></style> tags

there

that's how easy it is :3

yw btw xoxo


90 Kudos

Comments

Displaying 3 of 3 comments ( View all | Add Comment )

Martin

Martin's profile picture

You truly are The Goat


Report Comment

ash

ash's profile picture

ty!!


Report Comment

kiko!

kiko!'s profile picture

Giving this blog lots of lovings


Report Comment