Targetting spans within div

Hi everyone,

I have the following code block:

<div class="medium-9 small-12 columns attribution" style="padding-top: 10px; margin-top: 0;">
        <h5 style="padding-bottom: 10px;"><a href="/testimonial-slider/name">Firstname Lastname</a></h5> <span style="line-height: 10px;">Managing Director,<br></span> <span style="line-height: 10px;">Company name</span> </div>

I’m trying to target the text within the following spans using css selectors:

<span style="line-height: 10px;">Managing Director,<br></span> 
<span style="line-height: 10px;">Company name</span>

I tried the following selector but I couldn’t get the font to change:

.attribution span {
font-family: 'Roboto', sans-serif;    
}

Can anyone tell me how to correctly target the spans so I can format them?

Would really appreciate any help.

It looks like you are targeting them correctly, so the problem must be elsewhere.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/targetting-spans-within-div/200449
gwnh
Sep 4,2015 7:01 AM
-->
    <style type="text/css">

.attribution span {
    font-family: 'Roboto', sans-serif;    
    color:red;
}

    </style>
</head>
<body>

<div class="medium-9 small-12 columns attribution" style="padding-top: 10px; margin-top: 0;">
    <h5 style="padding-bottom: 10px;">
        <a href="/testimonial-slider/name">Firstname Lastname</a>
    </h5>
    <span style="line-height: 10px;">Managing Director,<br></span>
    <span style="line-height: 10px;">Company name</span>
</div>

</body>
</html>

For more confirmation, you could practice moving those inline styles into the normal CSS.

Are you sure you are including the Google font “roboto” correctly?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.