As I work on creating a flowchart, here is the code that I have developed:
#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>To enhance the headings ("step x") for each section to be bold and larger without affecting the content afterwards, what steps should I take?
Moreover, in order to introduce rounded corners instead of sharp edges, what modifications can be made?