Photoshop Question posted in
The official user guide can be found here.

Psd to html but style not applying – Photoshop

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.

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search