Why BSS apply CSS on the HTML code?

Bootstrap Studio Help
1

So, I just exported my design and noticed that some (or all?) of the CSS is included in the generated HTML. Is this normal? Why wouldn't it be on the CSS file?

                    <thead style="background-color: #15616d;border: 32px;font-style: normal;">
                    <tr style="color: rgb(255,236,209);font-size: 16px;font-family: 'Montserrat Alternates', sans-serif;font-weight: normal;">
                        <th style="width: 156px;">Name</th>
                        <th style="width: 167px;">Age</th>
                        <th style="width: 171px;"> Class</th>
                        <th style="width: 173px;">City ($)</th>
                        <th style="width: 42px;max-width: 37px;"></th>
                    </tr>
                </thead>
2

Your css is "inline style"

Usually, CSS is written in a separate CSS file (with file extension .css) or in a <style> tag inside of the <head> tag, but there is a third place which is also valid. The third place you can write CSS is inside of an HTML tag, using the style attribute. When CSS is written using the style attribute, it’s called an “inline style”. In general, this is not considered a best practice. However, there are times when inline styles are the right (or only) choice.

You can convert your inline styles which should be showing up in the html as style attributes to be applied to a css file by going to the styles tab and clicking the vertical dots and choose Extract Rules for each inline style.

3

Thank you! Question is, how can I quickly extract rules without having to go through each element manually? EDIT: Also, when extracting rules to some elements, it's actually changing the style (I assume its un-applying the CSS). Should there be a way to override the Bootstrap styles without having it on the actual HTML?

Thanks a lot

4

So the key is to not have to extract rules. If you are assigning css styles to a html element in a stylesheet you will need some sort of reference to target the html element. This is called a css selector. Some of the most common are the type (like h1), class (like .myclass) or ID (like #myid).

You should first add the selector class or id to the html element. The type is already there as it is the <tag> name.

Then you should go to Appearance and click the dropdown Style Attribute and choose Create CSS Block. A blue colored box in the Styles tab will appear and you can now put in the css selector you would like to use like .myclass, #myid, or h1. Start typing your css.