Question

Currently I’m trying to make a flowchart, this is the code I’ve got so far:

 #flowchart {
        width: 580px; 
        text-align: center;
        font-family: sans-serif;
        font-size: .8em;
        margin: auto;
    }  
    #flowchart a {
        display: block;
        color: white;
        text-decoration: none;
        background-color: #2F41B1;
        padding: 2em 1em;
    }
    #flowchart a:hover {
        color: #111;
        background-color: #EFA707;
    }
    .no1 {
        width: 390px;
        border: 1px solid #444;
        margin: 0 auto;
    }
    .line1 {
        width: 1px;
        height: 20px;
        background-color: #000;
        margin: 0 auto;
    } 
    .clear {
        clear:both;
    }         

    <div id="flowchart">
        <div class="no1"><a href="http://example.com/page1">Step 1:
    Blah blah blah, do this.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="http://example.com/page2">Step 2: 
    Then this and that.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="example.com/page3">Step 3: 
    Now finally go here and there.</a></div>
    
    </div>​

How can I make only the headings (“step x”) for each section be bold and larger? (and not the content after, “blah blah then this etc”)

Also, how can I make rounded corners instead of sharp edges?

Answer 1

To make the Step x styled differently, you need to wrap it in a <span class="flowchartHeader">...</span> tag, then add this to your CSS:

.flowchartHeader {
    font-size: 1.2em;
    font-weight: bold;
}

As for rounding, add border-radius: 6px to .no1.