Ini!: CSS: Bagaimana Cara Membuat Background Color Selebar Tulisan
Taste of design is one the most visible differentiators between blogs, although without quality content it won't help blog owners to attract visitors. Still, if the cost is not that high, it's always good to make continuous improvements to blog's design however small they are.
The cost that blog owners should not spend with regard to blog design is that if it will sacrifice the speed of page loading rather significantly. Speed is one of the important factors that should always be in mind whenever having temptation to make changes to the current blog setting.
The simplest way to highlight a phrase is just using CSS background-color code, such as
CSS:
.hightlight{background-color:#555;color:#fff;padding:5px}HTML:
<div class="highlight">How to Set Background Color</div>
How to Set Background Color
But, as you can see, the background color fills the width of the whole row.There are a couple of ways when using CSS to set background color to be the same width of text, not the whole length of a row. The simplest one is using
<span> instead of <div>, such asCSS:
.hightlight{background-color:#777;color:#fff;padding:5px}HTML:
<span class="highlight">How to Set Background Color</span>
How to Set Background Color
Other option is using,
display: table;CSS:
h1{display:table;background-color:#999;color:#fff;padding:10px;font-size:1em}HTML:
<h1>How to Set Background Color</h1>
How to Set Background Color
Another option is using
display: inline-flex;CSS:
.hightlight{display:inline-flex;background-color:#222;color:#fff;padding:7px;font-size:1.2em}HTML:
<div class="highlight">How to Set Background Color</div>
How to Set Background Color
There are a couple of more ways on how to set background color to have the same width of text but most on them are rather impractical. However, you may want to find it yourself out here.
Label: Blogger, CSS, WordPress
Bagikan ke: WhatsApp, Email. Print!.
