CODEWITHSUNDEEP
htmlcssphotoshop
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

Psd to html but style not applying

I am learning psd to html and starting from scratch but I cannot get a div to apply my style.

I have the following for my div in styles.css

div header header-text
{
    top:25px;
    left:54px;
    font-size:30pt
    font-family: 'Roboto', sans-serif;
    font-weight: bold;    
}

This is my html 

<html>
<head>      
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>        
<body>
    <div class="header">
       <div class=header-text">100+ Years Of Combiend Expierence</div>
       <div class="header-logo"></div> 
    </div>
</body>
</html>

Are there any good plugins out their that would get the bare bones style sheet setup.

Upvotes: 1

Views: 92

Answers (3)

Rohan B&#252;chner
Rohan B&#252;chner

Reputation: 5393

Answer

Your selectors are wrong. The correct selectors would be:

div.header .header-text

or forgo the 1st div element selector completely, and just have:

.header .header-text

Some more context on the subject:

In the example above: div is an element selector & .header .header-text are class selectors.

The common selector types you'll most likely encounter (but not limited to) are:

  • ELEMENT - Where it'll just the the html element tag name such as div, span, body

    • Just know that whatever you apply to this selector will apply to ALL elements of that type (if you don't have sub selectors increasing the specificity)

  • CLASS - Where it'll be a (any name you decide upon) name pre-pended with a dot

    • E.g. .header-text, .myFancyClass

  • ID - Where it'll be a (any name you decide upon) name pre-pended with a hash

    • E.g. #some-id, #foo

Also...

In CSS the spacing between your classes/selectors matter. Thus in your html:

<div class="header">
   <div class="header-text">100+ Years Of Combiend Expierence</div>
        <div class="header-logo"></div> 
   </div>
</div>
  1. The header class is on the top div, thus you'd need div.header to target it.
  2. Then, header-text in a child element. Thus you'd need a space, then the class name (or whatever child selector), resulting in a final selector combo/group of div.header .header-text.
  3. If you want to go even deeper, add another space and another child selector.

To visualize the above:

div.header                // same element
  .header-text            // child
      .header-logo        // child of child

----------------------------------------------

// same elem  |child       |child of child
   div.header .header-text .header-logo

Have a look at this CSS cheat sheet to see what other options you have available at you disposal, also read up on CSS specificity to make sense of it all.

Upvotes: 3

Rafdro
Rafdro

Reputation: 790

Just use apply written CSS for classes, therefore you must use . (dot) before html tags and not space between div and header class:

div.header .header-text

Upvotes: 0

Halyna
Halyna

Reputation: 196

You need to read about the selectors. If you want to select an item by class, put it.

.header-text{
    top:25px;
    left:54px;
    font-size:30pt
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    
    color:red;
}
<html>
<head>

   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="header">
      <div class=header-text>100+ Years Of Combiend Expierence</div>

          <div class="header-logo"></div>                   

    </div>

</body>
</html>

Upvotes: 0

Related Questions