In CSS, styling text is one of the core parts of creating visually attractive and readable web pages.
\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>\n
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 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.<\/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.<\/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.<\/p>\n Combined Example:<\/strong><\/p>\n .article-title {<\/em> .article-body {<\/em> Explanation:<\/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 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 Example:<\/strong><\/p>\n div {<\/em> section {<\/em> Best Practice:<\/strong><\/p>\n Use semi-transparent backgrounds (rgba) if you want backgrounds that allow layering effects without hiding everything underneath.<\/p>\n Definition:<\/strong><\/p>\n The background-image property places an image behind the content of an HTML element.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Example:<\/strong><\/p>\n header {<\/em> Additional Properties for Better Control:<\/strong><\/p>\n Complete Example:<\/strong><\/p>\n section {<\/em> Best Practice:<\/strong><\/p>\n Optimize background images for web to reduce page load times (use compressed .jpg, .webp, or .avif formats).<\/p>\n Combined Example:<\/strong> Styling Text and Background Together<\/p>\n .hero-banner {<\/em> Explanation:<\/strong><\/p>\n Summary Table:<\/strong><\/p>\n Summary Table:<\/strong><\/p>\n Important Accessibility Note<\/strong><\/p>\n Conclusion:<\/strong><\/p>\n Using color, background-color, and background-image properly in CSS allows you to create visually engaging, readable, and aesthetically pleasing web pages. Combining colors smartly improves both user experience and design professionalism.<\/p>\n In CSS, every HTML element is treated as a rectangular box, and the box model describes how the size of that box is calculated and how its parts (content, padding, border, and margin) interact. Definition:<\/strong><\/p>\n Key Points:<\/strong><\/p>\n Example:<\/strong><\/p>\n div {<\/em> Definition:<\/strong><\/p>\n Padding is the space between the content and the border. It pushes the border outward and adds extra space around the content.<\/p>\n Syntax:<\/strong><\/p>\n selector {<\/em> Example:<\/strong><\/p>\n div {<\/em> Best Practice:<\/strong><\/p>\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 \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.<\/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
\nbackground-color: lightblue;<\/em>
\n}<\/em><\/p>\n
\nbackground-color: rgba(0, 128, 0, 0.3);<\/em>
\n}<\/em><\/p>\n3. background-image (Setting Images as Backgrounds)<\/h3>\n
\nbackground-image: url(“path-to-image”);<\/em>
\n}<\/em><\/p>\n
\nbackground-image: url(‘banner.jpg’);<\/em>
\n}<\/em><\/p>\n\n
\nbackground-image: url(‘background.jpg’);<\/em>
\nbackground-repeat: no-repeat;<\/em>
\nbackground-size: cover;<\/em>
\nbackground-position: center;<\/em>
\n}<\/em><\/p>\n
\ncolor: white;<\/em>
\nbackground-color: #333;<\/em>
\nbackground-image: url(‘hero.jpg’);<\/em>
\nbackground-size: cover;<\/em>
\nbackground-position: center;<\/em>
\ntext-align: center;<\/em>
\npadding: 100px 20px;<\/em>
\n}<\/em><\/p>\n\n
\n\n
\n \nProperty<\/th>\n Purpose<\/th>\n Example<\/th>\n<\/tr>\n<\/thead>\n \n color<\/td>\n Sets text color<\/td>\n color: #333;<\/td>\n<\/tr>\n \n background-color<\/td>\n Sets background color<\/td>\n background-color: lightblue;<\/td>\n<\/tr>\n \n background-image<\/td>\n Adds an image as background<\/td>\n background-image: url(‘bg.jpg’);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \n
Box model: margin, padding, border, and content areas<\/h2>\n
\nUnderstanding the box model is crucial for layout, spacing, and proper element alignment in web design.<\/p>\n1. Content Area<\/h3>\n
\n
\n
\nwidth: 200px;<\/em>
\nheight: 100px;<\/em>
\n}<\/em><\/p>\n\n
2. Padding Area<\/h3>\n
\npadding: value;<\/em>
\n}<\/em><\/p>\n
\npadding: 20px;<\/em>
\n}<\/em><\/p>\n\n
\n