Embark on a journey of knowledge! Take the quiz and earn valuable credits.
Take A QuizChallenge yourself and boost your learning! Start the quiz now to earn credits.
Take A QuizUnlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.
Take A Quiz
This chapter focuses on the art of visual presentation
through text styling, fonts, colors, and backgrounds. Typography is key
to both readability and brand identity, while proper styling adds polish and
professionalism to your web interfaces.
🧠 Why This Chapter
Matters
CSS gives you powerful tools to:
In this chapter, we’ll cover everything you need to design
visually stunning UI components.
✅ 1. CSS Text Styling
Control the appearance of text using a variety of
text-related properties.
Common Properties:
p
{
color: #333;
text-align: justify;
text-decoration: underline;
letter-spacing: 1px;
text-shadow: 1px 1px 2px gray;
}
Property |
Description |
color |
Sets the text color |
text-align |
Aligns text (left, right, center, justify) |
text-decoration |
Adds underline, overline, etc. |
letter-spacing |
Adjusts space between characters |
text-shadow |
Adds shadow to text |
✅ 2. CSS Fonts
Fonts define your site’s voice and personality. Use web-safe
fonts or import custom fonts.
Font Properties:
h1
{
font-family: 'Arial', sans-serif;
font-size: 2rem;
font-weight: bold;
font-style: italic;
}
Property |
Description |
font-family |
Font stack |
font-size |
Size of the text (px, rem) |
font-weight |
Thickness (normal, bold, 100–900) |
font-style |
normal, italic, oblique |
Importing Custom Fonts (Google Fonts)
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
body
{
font-family: 'Roboto', sans-serif;
}
✅ Always include fallback fonts
for performance and accessibility.
✅ 3. CSS Colors
Colors are defined using:
Example:
.primary
{
color: hsl(220, 80%, 60%);
background-color: rgba(0, 0, 0, 0.1);
}
✅ Use color tools like Coolors or Adobe Color to create
palettes.
✅ 4. CSS Backgrounds
Use background properties to add color, images, or gradients
to elements.
🔹 Basic Background
.hero
{
background-color: #f4f4f4;
}
🔹 Background Image
.banner
{
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
🔹 CSS Gradients
.gradient-box
{
background: linear-gradient(to right,
#4facfe, #00f2fe);
}
Property |
Description |
background-color |
Solid color |
background-image |
File or gradient |
background-repeat |
no-repeat, repeat-x, etc. |
background-size |
cover, contain, custom sizes |
background-position |
Aligns the image (center, top) |
✅ 5. CSS Icons
Use icons to enhance UI without heavy image files.
🔹 Font Awesome (Most
Popular)
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i
class="fas fa-user"></i>
🔹 Using SVG Icons
<svg
width="24" height="24" fill="currentColor">
<use
xlink:href="#icon-arrow-right"></use>
</svg>
✅ SVGs are scalable, lightweight,
and styleable with CSS.
✅ Recap Table: Typography and
Visual Styling
Feature |
Common Properties |
Text Styling |
text-align, text-shadow, letter-spacing |
Fonts |
font-family, font-size, font-weight, italic |
Color Formats |
hex, rgb, rgba, hsl, named colors |
Backgrounds |
background-color, background-image, gradient |
Icons |
Font Awesome, SVGs |
Inline CSS is written inside HTML tags, internal CSS is placed within a <style> tag in the head, and external CSS is stored in a separate file and linked to the HTML. External CSS is preferred for maintainability.
CSS applies rules in a cascading manner: browser default → external → internal → inline. Specificity, importance (!important), and source order also affect which styles are applied.
The box model describes how elements are structured with content, padding, border, and margin. Understanding it is essential for layout and spacing.
Specificity determines which rule takes precedence when multiple rules target the same element. Inline styles > ID selectors > Class selectors > Element selectors.
Flexbox is best for one-dimensional layouts (row or column), while Grid is suitable for two-dimensional layouts (rows and columns together).
Media queries apply styles based on device conditions like screen width. They are essential for creating responsive websites.
Pseudo-classes like :hover and :focus apply styles based on user interaction. Pseudo-elements like ::before and ::after style specific parts of an element.
Using !important overrides all other rules, which can make debugging harder and affect maintainability. Use it only when absolutely necessary.
Tools like SASS, LESS, Tailwind CSS, and PostCSS help in writing cleaner, more scalable CSS with features like nesting, variables, and mixins.
Efficient CSS can improve load time and user experience. Avoid unnecessary styles, minimize CSS files, and use compression tools like cssnano.
Please log in to access this content. You will be redirected to the login page shortly.
LoginReady to take your education and career to the next level? Register today and join our growing community of learners and professionals.
Comments(0)