I have embedded HTML using an embed element but the embedded CSS is not working.
Here are the HTML and CSS. I have tried with both inline and embedding CSS class in of page.
<style>
.lightslider_wrapper {
width:420px;
margin: 0 auto;
}
</style>
<ul style="list-style: none outside none;padding-left: 0;margin-bottom:0;" id="lightSlider">
<li style="display: block;float: left;margin-right: 6px;cursor:pointer;" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img style="display: block;height: auto;max-width: 100%;" src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
<li style="display: block;float: left;margin-right: 6px;cursor:pointer;" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img style="display: block;height: auto;max-width: 100%;" src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
</li>
<li style="display: block;float: left;margin-right: 6px;cursor:pointer;" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
<img style="display: block;height: auto;max-width: 100%;" src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
</li>
<li style="display: block;float: left;margin-right: 6px;cursor:pointer;" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img style="display: block;height: auto;max-width: 100%;" src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li style="display: block;float: left;margin-right: 6px;cursor:pointer;" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img style="display: block;height: auto;max-width: 100%;" src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li style="display: block;float: left;margin-right: 6px;cursor:pointer;" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img style="display: block;height: auto;max-width: 100%;" src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li style="display: block;float: left;margin-right: 6px;cursor:pointer;" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img style="display: block;height: auto;max-width: 100%;" src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
</ul>
Even the inline CSS, as shown above, is not working. Can anyone help?
It would be better if I can write both CSS and HTML in separate embed elements? I tried it but didn’t work?