Tags for Styling
Understand how to use div and span tags to address visual styling challenges in Rails views. This lesson helps you manage float clearing with clear-fix classes and maintain semantic integrity while preparing for CSS styling.
We'll cover the following...
Use <div> and <span> for styling
Once our UI is laid out with semantic tags, providing a holder for each element, the next step is to actually style those views. In a subsequent chapter, we’ll talk about CSS, but to make the point about <div> and <span>, let’s create a design problem we can’t solve by styling the existing semantic tags. Our widget show page is just a semantic markup right now. Suppose our designer wants the rating section to look like the mockup below:
When we try to style the view, we’ll eventually hit a wall preventing us from completely achieving this design without adding more tags. Let’s see that in action. First, because we have a new element, we need to add that using a semantic tag before styling. We’ll use a <p> tag at the bottom of the existing <section>:
To get the <h3> and the ...