In CSS, styling text is one of the core parts of creating visually attractive and readable web pages. Introduction to CSS<\/a> provides a quick refresher on CSS fundamentals. Definition:<\/strong><\/p>\n The font-family property specifies the typeface (font) to be used for the text inside an element.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Example:<\/strong><\/p>\n p {<\/em> Explanation:<\/strong><\/p>\n Best Practice: Always provide fallback fonts to ensure good rendering across different devices.<\/p>\n For a quick refresher on font fundamentals, see Introduction to CSS<\/a>.<\/p>\n Definition:<\/strong><\/p>\n The font-size property sets the size of the text, controlling how large or small the text appears.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Common Units:<\/strong><\/p>\n Example:<\/strong><\/p>\n h1 {<\/em> Best Practice: Use rem or em for more responsive and accessible designs. Modern typography also benefits from fluid approaches like clamp() to combine rem units with viewport-based scaling.<\/p>\n For practical guidance on responsive typography, see Best Practices and Optimization<\/a>.<\/p>\n Definition:<\/strong><\/p>\n The font-weight property defines how thick or thin the characters of the text appear.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Common Values:<\/strong><\/p>\n Example:<\/strong><\/p>\n strong {<\/em> Best Practice: Prefer numeric weights for precise control, especially with modern web fonts. Consider variable fonts for finer weight adjustments and performance benefits. Best Practices and Optimization<\/a>.<\/p>\n Note:<\/strong> With variable fonts, you can access a continuous range of weights rather than a fixed set, enabling finer typography control without multiple font files.<\/p>\n<\/p>\n Definition:<\/strong><\/p>\n The text-align property sets the horizontal alignment of text inside a block-level element.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Common Values:<\/strong><\/p>\n Example:<\/strong><\/p>\n h1 {<\/em> <\/p>\n Best Practice:<\/strong>\u00a0Use justify for longer paragraphs to create a neat column of text; use center for headings and call-to-action texts. For layout and alignment strategies in more complex designs, see CSS Positioning<\/a>.<\/p>\n Combined Example:<\/strong><\/p>\n .article-title {<\/em> .article-body {<\/em> Explanation:<\/strong><\/p>\n Summary Table:<\/strong><\/p>\n Summary Table:<\/strong><\/p>\n Conclusion Color and background styling are fundamental in web design because they control how your webpage looks and feels. Definition:<\/strong><\/p>\n The color property in CSS sets the color of the text inside an element.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Value Types:<\/strong><\/p>\n Example:<\/strong><\/p>\n p {<\/em> h1 {<\/em> Best Practice:<\/strong><\/p>\n Use a consistent color palette and ensure enough contrast between text and background for readability (especially for accessibility).<\/p>\n For accessibility considerations, you can explore WCAG guidance in the related course content linked above. See Best Practices and Optimization<\/a>.<\/p>\n Definition:<\/strong><\/p>\n The background-color property sets the background color of an element.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Value Types:<\/strong> (Same as the color property \u2014 names, hex, rgb, rgba, hsl)<\/p>\n
\nThe main properties used for text styling include font-family, font-size, font-weight, and text-align. Each controls a different aspect of how text appears to users.<\/p>\n1. font-family (Choosing the Font Type)<\/h3>\n
\nfont-family: “Font Name”, fallback-font, generic-family;<\/em>
\n}<\/em><\/p>\n
\nfont-family: “Arial”, “Helvetica”, sans-serif;<\/em>
\n}<\/em><\/p>\n\n
2. font-size (Controlling the Size of Text)<\/h3>\n
\nfont-size: size;<\/em>
\n}<\/em><\/p>\n\n
\nfont-size: 32px;<\/em>
\n}<\/em>
\np {<\/em>
\nfont-size: 1.2em;<\/em>
\n}<\/em><\/p>\n3. font-weight (Setting Text Boldness or Lightness)<\/h3>\n
\nfont-weight: weight-value;<\/em>
\n}<\/em><\/p>\n\n
\nfont-weight: bold;<\/em>
\n}<\/em>
\nh2 {<\/em>
\nfont-weight: 600;<\/em>
\n}<\/em><\/p>\n4. text-align (Aligning Text Horizontally)<\/h3>\n
\ntext-align: alignment;<\/em>
\n}<\/em><\/p>\n\n
\ntext-align: center;<\/em>
\n}<\/em>
\np {<\/em>
\ntext-align: justify;<\/em>
\n}<\/em><\/p>\n
\nfont-family: ‘Georgia’, serif;<\/em>
\nfont-size: 28px;<\/em>
\nfont-weight: bold;<\/em>
\ntext-align: center;<\/em>
\n}<\/em><\/p>\n
\nfont-family: ‘Open Sans’, sans-serif;<\/em>
\nfont-size: 16px;<\/em>
\nfont-weight: normal;<\/em>
\ntext-align: justify;<\/em>
\n}<\/em><\/p>\n\n
\n\n
\n \nProperty<\/th>\n Purpose<\/th>\n Example Value<\/th>\n<\/tr>\n<\/thead>\n \n font-family<\/td>\n Sets the font type<\/td>\n “Arial”, sans-serif<\/td>\n<\/tr>\n \n font-size<\/td>\n Controls text size<\/td>\n 16px, 1.5em, 100%<\/td>\n<\/tr>\n \n font-weight<\/td>\n Adjusts thickness or boldness<\/td>\n bold, 400, 700<\/td>\n<\/tr>\n \n text-align<\/td>\n Aligns text horizontally<\/td>\n left, center, justify<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\nBy using font-family, font-size, font-weight, and text-align, you can control almost every important aspect of how your text looks on a web page \u2014 making it readable, visually appealing, and aligned with your design goals. As you scale your styles, consider exploring related topics like CSS Selector and CSS Positioning.<\/p>\nColor and background styling: background-color, background-image, color properties<\/h2>\n
\nCSS provides specific properties to customize both the text color and the background of HTML elements.<\/p>\n1. color (Text Color)<\/h3>\n
\ncolor: value;<\/em>
\n}<\/em><\/p>\n\n
\ncolor: #333333;<\/em>
\n}<\/em><\/p>\n
\ncolor: rgb(255, 0, 0);<\/em>
\n}<\/em><\/p>\n2. background-color (Background Fill Color)<\/h3>\n
\nbackground-color: value;<\/em>
\n}<\/em><\/p>\n