Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Skill Level Intermediate
While every designer generally does his or her level best to make their sites legible, there's no way you can please everyone. One option is to let the users of your site set the size of the type themselves, as you'll see in this example. So I'm in Live view and if I move over the larger A and click once, the type gets bigger. I'll click again and it gets even bigger still. I can go to the smaller A, click again to make it smaller one more time, so that it is back to the original size and then let's click one last time to make it even smaller.
So I'll give it an ID of typeSize. Now I already have a CSS rule that will float these to the right for this particular ID. So it's important to get that right, and I'll close out the span tag and let Dreamweaver's auto-complete do its magic for me. Now we're going to put in the two images, so I'll put my cursor between the opening and closing of the span tag and go up to the menu and choose Insert > Image and I'm here in my _images folder of Chapter 2 > 02_04 > _images and let's put in the small one first.
I'll let code hints help me out there. And next we're going to give it the source attribute, and then you pass in an absolute URL, http://code.jquery.com/ jquery-latest.min, for minified, .js.
Let's go to fontSize.js, and I'll go to Code View, so that you can see the code itself. Now explaining it fully is really beyond the scope of this course, but I'll definitely give you the high points here. So first, after setting up the click method that indicates what should happen when each image is clicked. So the first line in the actual code function is an array that holds all the elements I want to modify. You can include or exclude whatever you'd like. Next, I set up another variable that will save the reference for the clicked element as we go through the loop, which is established next with the keyword "each" and this will be applied to each of the array elements: h1, h2, h3, and so on.
So in the primary function, I get the current size, change it to a number, and then get the measurement unit with the slice function. Next, there are two if statements that increase or decrease the font size, depending on which of the two images are clicked, and here is where those IDs come into play. Finally, we put it all together and create a new font size. Okay, let's try this out and see how it works.
So I'll go back to Design view, make sure that you're in Live view, and move your mouse over the larger A and give it a click, and I do have larger text here. Everything is looking pretty good. What about going smaller? Yes, I'm definitely going smaller. Everything seems to be working and the design is basically expanding smoothly to compensate for larger text. Feel free to incorporate this code and technique into your own sites.