Note that there are some explanatory texts on larger screens.

plurals
  1. POStyling email link / href="mailto:" with CSS
    primarykey
    data
    text
    <p>Thanks to StackOverflow I finally found a way to style my email link, but I wonder why it doesn't work without the solution I found on here.</p> <p>Since the link is part of the span with the attributed class "about", which has font size and style defined, shouldn't the email link show up in 11px and sans serif?</p> <p>and while </p> <pre><code>a[href^="mailto:"] { font-family: sans-serif; color: black; font-size: 11px; } </code></pre> <p>works great, as soon as i try to change it into</p> <pre><code>.about a[href^="mailto:"] { font-family: sans-serif; color: black; font-size: 11px; } </code></pre> <p>it does not function as it's supposed too.</p> <p>do tags not listen to span formatting or class nesting? </p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; html { height:100%; } body { height: 100%; margin-left: 20px; margin-top:0px; } .bottom-left { position: absolute; font:sans-serif; bottom: 15px; left: 15px; } .bold { font-family: serif; } .about { font-size: 11px; font-family: sans-serif; } /*a[href^="mailto:"] { font-family: sans-serif; color: black; font-size: 11px; }*/ .address { font-size: 11px; border-bottom: 1px grey dotted; } &lt;/style&gt; &lt;title&gt;TEMP&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="bottom-left"&gt; &lt;span class="about"&gt; &lt;span class="bold"&gt;XYZ&lt;/span&gt; is a project space .&amp;nbsp;&amp;nbsp;&amp;#124;&amp;nbsp; &lt;span="address"&gt;Website Information&lt;/span&gt; &amp;mdash; &lt;a href="mailto:info@info.eu"&gt;info@info.eu&lt;/a&gt; &lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload