Join Joseph Lowery for an in-depth discussion in this video Inserting drop caps, part of Typography with CSS in Dreamweaver.
- View Offline
- Exercise Files
A drop cap is an enlarged first letter of the first word of a paragraph,…typically set so that the other letters of the paragraph flow around it.…There are a couple of CSS techniques for creating a drop cap, but hands…down, the easiest and cleanest one from a code perspective uses the first…letter pseudo-class.…Let me show you how it works.…Now, I have the tours.htm file from Chapter 5 > 05_07 open.…We're in Live View.…Let's go down to the tour descriptions.…
I want to scroll down just enough there so I can see the first one, and still…have my blue color here available, because I will be sampling that as part of…the drop cap creation.…I'll put my cursor into that first line which has been styled already with a…first line pseudo-class and click New CSS Rule.…Now I'm going to make my Selector a little less specific, and then add in…the pseudo-class which you do by starting off with a colon, and typing in first-letter.…
Click OK.…Now we want to do a fair amount of things here.…We'll start off in the Type category, and let's give it the same color as the first line.…
- 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
Creative Inspirations: Doyald Young, Logotype Designerwith Doyald Young1h 41m Appropriate for all
1. Modifying Type in Dreamweaver
2. Establishing the Proper Type Unit
Working with pixels2m 34s
3. Choosing Site Typefaces
4. Integrating Color
Applying color to type4m 52s
5. Selecting Type Styles
6. Using Advanced CSS Text Effects
7. Structuring CSS Text
8. Defining Lists with HTML and CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.