I am trying to clone https://www.sovereignselfdefense.com/ in HTML. The site was built in kajabi. Client wants to move it to a Wordpress theme. When I downloaded the site, I see code such as: I did some googling and this is outdated incorrect HTML convention. How would you separate the tag into an external CSS? I tried separating the CSS into

Cloning Site, in , how do I convert it to regular CSS?

I am trying to clone

https://www.sovereignselfdefense.com/

in HTML. The site was built in kajabi. Client wants to move it to a WordPress theme.

When I downloaded the site, I see code such as:

   <div class="container ">
      <div class="row align-items-center justify-content-center">
        
          <style>
  
  #block-1589827030126_0 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  #block-1589827030126_0.block-type--blog .block {
    padding: 0; 
  }
  #block-1589827030126_0.block-type--offer .block {
    padding: 0;  
  }
  #block-1589827030126_0 .block {
    border: 4px none black;
    border-radius: 4px; 
  }
  @media (min-width: 768px) {
    #block-1589827030126_0 {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
    #block-1589827030126_0.block-type--blog .block {
      padding: 0;  
    }
    #block-1589827030126_0.block-type--offer .block {
      padding: 0; 
    }
    #block-1589827030126_0 .block { 
    }
}
  @media (max-width: 767px) {
    #block-1589827030126_0 {
      text-align: left;
    }
  }
</style>

I did some googling and this is outdated incorrect HTML convention.

How would you separate the tag into an external CSS? I tried separating the CSS into an external stylesheet for the tag as shown above and the design broke. Client wants the design converted to WordPress. I figured I would clone the site first, then create a custom wordpress theme. Currently organizing into separate HTML, CSS and JS files. ‘

Thank you for your help.

Answer

Make sure your are including the correct element with the id in your HTML. In your example, the CSS is not selecting any of the HTML tags. #block-1589827030126_0 is a CSS selector that targets an HTML element with that id. I checked the source code of the site and it’s a sibling of that <style> tag:

Other then that, there shouldn’t be a problem. It’s still CSS so it will work just fine when you load it from the CSS file. Don’t forget to link the external CSS in the HTML because original HTML won’t have that in it.

<link rel="stylesheet" href="styles.css">

Advertisement

Answer