Join Chris Converse for an in-depth discussion in this video Style section text area, part of Creating a Calculation Tool with AngularJS 1.
- Now we're going to style the div element…inside of each section, as well as the text.…So back to our CSS file.…After the rules that we just created…that bring in the colors and the bulbs,…come up here and copy the myCalculator,…I'll paste that on the next line,…hit a space,…we're going to target main, space, section.…Then we're going to use a greater than sign,…and type in div.…So what this greater than sign means…is I want to target the div elements…that are the direct descendent of the section element.…
This way, if we had more than one div inside of the section,…we would still only be targeting the main div container.…Let's put in our brackets.…Let's come in here and add padding.…So we're going to set five pixels on the top and bottom,…then a space, then zero pixels on the right and left.…Let's hit a space.…Then we're going to set a background color.…Now I want to set a semi-transparent black here,…so that the area behind the type is a little bit darker…than the base color.…So we'll just the RGBA color space for that.…
Using these lessons, and the free exercise files, you can build any kind of calculation tool for your clients, from shipping cost to mortgage payment calculators.
- Creating the HTML page structure
- Hooking in CSS and AngularJS
- Adding form elements
- Styling the layout with CSS
- Adjusting the layout for small (mobile) screens
- Defining the AngularJS application and controller
- Calculating usage and cost