How deeply does Tiny CSS Projects cover ::first-letter pseudo-element?

Works through two selectors and their declarations, including font sizing, line height, and float for a drop cap.

::first-letter pseudo-element

The CSS ::first-letter pseudo-element selects the first typographic character of an element's rendered text.

Use `::first-letter` to style the first letter of an element’s text without wrapping that letter in an HTML element. The double colon identifies it as a pseudo-element: it selects part of an element rather than the whole element. section 1.6.3

Accent the opening paragraph

Start with a paragraph immediately after a header. Add `header + p::first-letter { color: crimson; font-style: italic; }`. The adjacent sibling selector picks that paragraph; `::first-letter` makes only its opening letter crimson and italic. section 1.6.3

For a drop cap, `p:first-of-type::first-letter` combines a pseudo-class that picks the first paragraph with a pseudo-element that picks its opening letter. Increase its font size, adjust its line height, and float it left so the following text wraps beside it. An ornate font can make the letter stand out, but such fonts are better kept to short pieces of text. section 7.1.3

Listing 7.4 Styling and positioning the first letter of the first paragraph

@import url(
  'https:/ /fonts.googleapis.com/css2?
 family=Passions+Conflict&display=swap'                #1
);
 
p:first-of-type::first-letter {                          #2
  font-size: 6em;                                        #2
  float: left;                                           #2
  line-height: .5;                                       #2
  font-family: 'Passions Conflict', cursive;             #2
}                                                        #2

See the complete drop-cap CSS, including the imported font, font size, line height, and left float. section 7.1.3

How Tiny CSS Projects covers it

liveBook manning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

float propertyused by · The CSS float property positions an element toward one side of its containing block and allows surrounding content to flow around it.
pseudo-elementkind of · A CSS pseudo-element is a selector construct that represents a conceptual part of an element or generated content for styling without a separate document element.
drop capproduces · A drop cap is an enlarged initial letter at the beginning of a paragraph that extends vertically across multiple lines of text.
font-size propertyuses · The CSS font-size property specifies the nominal size of an element’s rendered text.
color propertyuses · The CSS color property specifies the foreground color of an element’s text and other rendered content.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.