Flowchart with CSS/HTML - html

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

i made a quick fiddle of what you wand dude. http://jsfiddle.net/jalbertbowdenii/NY973/1/

Answer 2

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.

Answer 3

Use this to generate the round corners css for you border-radius.com
.myClass{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

Answer 4

.no1
{
width: 390px;
border: 1px solid #444;
margin: 0 auto;
border-radius:5px; //add this
}