Wordpress, Roots theme, header - php

Question

A guy did a website for me and I'm trying to understand it. It's here:
http://www.brilliantzenaudio.com
Note that there's a logo image at the top left. I'm trying to understand where this came from. The relevant code seems to be partly in header.php and partly in app.css. From header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-2">
<h1 class="logo"><?php bloginfo('name'); ?>">Brilliant Zen Audio</h1>
... stuff removed here, other items in header ...
</div>
</div>
</div>
</header>
And the app.css contains lines as follows. Looking at the php above, I see that there is a element of class "banner", so clearly there is css code addressing that (giving it a color, a position, border, and z-index). I also see that the header tag is also given the "role" of "banner". Does that serve any immediate purpose or is that for screen readers?
We can also see that the php contains h1 elements, and 'a' elements within 'h1' elements. CSS entries are there for those things. I'm not clear on what their purpose is. For one thing, the logo is an image. Why is it put in an h1 tag? I understand the need for the tag because the logo should be clickable (to get back to the home page). But what is put as the text of the link is some next (I'm not clear on how to parse the PHP there. What's clever is that the image gets put there because it's the background in an "h1.logo a" css entry.
I've added some general questions in comments below.
.banner { }
header.banner {
background:#603913;
position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
border-bottom:solid 1px #fff; // question: is this bottom border important for some reason?
z-index:9999; // what does this do?
}
h1.logo {
margin:0; // is there a need to define these on h1.logo?
padding:0;
}
h1.logo a {
display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
text-indent:-9999px; // what is this?
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // what does it mean when you set the width and height of an <a>
height:103px;
margin:0 auto;
}

Answer 1

.banner { }
header.banner {
background:#603913;
position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
border-bottom:solid 1px #fff; // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
margin:0; // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
padding:0;
}
h1.logo a {
display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
text-indent:-9999px; // The text-indent property specifies the indentation of the first line in a text-block.
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // Sets the width of this a, because it is a block element.
height:103px;
margin:0 auto;
}

Answer 2

Whilst this isn't necessarily an answer as Veelen's response hit the nail perfectly on what each element does, but below is a screenshot of Google Chrome's Web inspector (Or Firebug for Firefox). Hover over any DOM Element and it'll tell you everything about it, click the CSS rules and modify anything on the fly.
Experiment with it, see how things look & feel and it's constructed. It's how most Developers test & see how changes would look without having to Code/Re upload, and whatever you touch & change during Web Inspector, aren't saved =)