How do I apply CSS style to ASCII character


Tags: html,css-font-weight

Problem :

I'd like to reduce the weight of a my ascii degree character ° in my html document. Does anybody know how?

HTML:

<html>
<body>
    <table>
        <tr>
            <td>
            <div style="position:absolute; top: 70; right: 0;">
                    72
                    <span>&deg;</span>
                    F
            </div>
            </td>
        </tr>
    </table>
</body>
</html>

CSS:

body {
    height: 100%;
    font-weight: 400;
    color: white;
    background-color: #000000;
    overflow: hidden;
}

div{
font-size: 80px;
margin: 2px;
padding: 2px;
}

@font-face {
    font-family: aFont;
    src: url(ostrich-rounded-webfont.ttf);
}

.fontclass{
    font-family: aFont, Helvetica;
    color: #FFFFFF;
 }

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
 text-decoration: none;
}

a:active {
 text-decoration: none;
}

div span{
    font-weight:1;
    font-size:1px;
}


Solution :

Try like this: Demo

CSS:

p {
    font-weight:bold;
}
p span {
    font-weight:100;
    font-size:11px;
}

HTML:

<p>Test test Test test Test test  <span> &deg;</span> Test test Test test Test test Test test </p>

Edit: Updated demo

CSS:

p, div{
    font-weight:bold;
}
p span, div span {
    font-weight:100;
    font-size:11px;
}

HTML:

<div stile="position:absolute; top:70; right:0;"> 89 <span> &deg;</span> </div>

    CSS Howto..

    Css How to add round corners when hover li element?

    How can I change the css properties of a google visualization table and it columns?

    In jQuery how do I make multiple changes to css in a function?

    How to dynamically change CSS class of DIV tag?

    How to select multiple objects of a class for css manipulation

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    how to bring two blocks closer

    How to following a link without modifying the displayed url and triggering css animation?

    How would I re-position my 2nd bg image “ url(repeat_bg_right_side.png) ” to the right side of page using css?

    How to load dynamic CSS files based on condition

    How do I add box shadows when the parent div has a background image?

    How to include .css file in smarty template file?

    How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate?

    How to achieve a CSS footer “curtain” effect?

    How to create live event for css

    How to write CSS3 animations with JavaScript objects?

    How to create desired shapes and position them accordingly using CSS, CSS3?

    Jquery how to set active link css color

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    How to animate the position change or float: left on window size change?

    How to have the nav and footer more than 1000px?

    How to make inner div of Flexbox height of parent

    How to access an object from a webpage in selenium

    How do I style all anchor tags inside a certain div?

    How to efficiently update css on multiple selector classes in jquery

    How to insert a div in between flexbox rows and keep everything responsive?

    How to use variable in CSS? [duplicate]

    jquery/css how to rescale and crop a large image to fit my display div?

    How to have an image zoom in and out automatically in the background

    How to set min-height for bootstrap container