- CSS Introduction
- CSS - Overview
- CSS - Understanding the Basics : Syntax, Selectors, and Declarations
- CSS - Using Inline, Internal, and External Techniques to Integrate CSS into HTML
- CSS - Complete working code of using CSS into HTML
- CSS The Box Model
- CSS - Components of the CSS Box Model
- CSS - Managing Layout with the CSS Box Model
- CSS - Box Model Properties
- CSS Styling Text and Fonts
- CSS - Color, alignment, decoration, and transformation of text
- CSS - Font properties : Family, size, weight, and style.
- CSS - Web-Safe Fonts and Custom Fonts Integration
- CSS - Web-Safe Fonts
- CSS - Custom Fonts Integration
- CSS - Code Sample : Using Web-Safe and Custom Fonts
- CSS Layout Technique
- CSS - Display properties and Box manipulation
- CSS - Display Properties
- CSS - Box Manipulation
- CSS - Code Sample : Display Properties and Box Manipulation
- CSS - CSS Layout Technique : Positioning Elements
- CSS - Static Positioning
- CSS - Relative positioning
- CSS - Absolute Positioning
- CSS - Fixed Positioning
- CSS - Sticky Positioning
- CSS - Complete working code for positioning elements
- CSS - Flexbox : Basics, alignment, and building a layout with Flexbox
- CSS - Flexbox Basics
- CSS - Alignment in Flexbox
- CSS - Building a Layout with Flexbox
- CSS - Grid : Grid basics, creating layouts with grid-template columns, rows, and areas
- CSS - Grid Basics
- CSS - Creating Layouts with Grid Template Columns and Rows
- CSS - Creating Layouts with Grid Areas
- CSS Transitions and Animations
- CSS - Transitions : Property, duration, timing function.
- CSS - Code for Transition
- CSS - Animations : Keyframes and Animation Properties
- CSS - Code for Animation
- CSS Advanced Styling
- CSS - Pseudo-classes and Pseudo-elements
- CSS - Styling Lists, Tables, and Forms
- CSS - Creating and Styling Navigation Bars and Dropdown Menus
- CSS Visual Enhancements
- CSS - Backgrounds: Colors, Images, and Gradients
- CSS - Borders and Box Shadows for Depth and Emphasis
- CSS - Using Transitions and Animations for Dynamic Effects
- CSS Responsive Web Design
- CSS - Responsive Images and Videos for Faster Page Loads
- CSS - Media Queries for Device-Specific Styling
- CSS - Mobile-First versus Desktop-First Strategies
- CSS Transforms and Effects
- CSS - 2D and 3D Transforms : Rotate, Scale, Translate, and Skew
- CSS - Visual Effects: Box-Shadow, Text-Shadow, Blend Modes
- CSS Advanced Features
- CSS - Variables for Maintainable Style Sheets
- CSS - Advanced Selectors and Combinator Usage
- CSS Advanced Layout Techniques
- CSS - Multi-column Layouts, Flexbox, and Grid Advanced Techniques
- CSS - Overlapping and Layering with z-index
- CSS SASS
- CSS - Introduction to SASS/SCSS : Variables, Nesting, and Mixins
- CSS - Organizing CSS with Partials and Imports
- CSS - Advanced SASS : Functions, Loops, and Conditionals
- CSS - Functions
- CSS - Conditionals
- CSS - Loops
- CSS Working with SVGs and Icons in Web Design
- CSS - Implementing Scalable Vector Graphics and Icons in Web Design
- CSS - Styling and Animating SVGs with CSS
- CSS Best Practices and Optimization
- CSS - Writing Efficient, Maintainable, and Scalable CSS
- CSS - Methodologies like BEM for Organizing CSS
- CSS - Performance Optimization : Minification, Concatenation, and CSS Sprites
- CSS Sample Project
- CSS - Create a home page with HTML and CSS
- CSS - HTML Structure
- CSS - Styling
- CSS - Conclusion
CSS - Font properties : Family, size, weight, and style.
Font Properties in CSS
When dealing with web typography CSS offers options, for designers to control how text appears. Some used properties include font family, size, font weight, and font style. Knowing how to use these features is crucial for creating content that's both readable and visually pleasing.
Font Family
The font family property determines the type of font used within an element. You can specify fonts as a system in case the browser doesn't support the primary one.
Font Size
Font size dictates the size of the text. It can be defined in units like pixels (px) points (pt) ems (em) percentages (%) among others. The choice of units impacts how well the text scales and adapts across devices.
Font Weight
Font weight controls the thickness of characters with options like bolder, lighter, and numerical values from 100 to 900 (where 400 is normal weight and 700 is bold). This property is handy, for emphasizing text elements.
Style of Text
The font style property is commonly used to indicate italicized text. It usually includes values, like normal, italic, and oblique. The use of italics can help draw attention to text or set words apart from the rest of the content.
Code Sample: Font Properties
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font Properties Example</title> <style> body { font-family: Arial, sans-serif; /* Sets a default font family */ } .font-family { font-family: 'Times New Roman', serif; /* Sets a specific font family */ } .font-size { font-size: 20px; /* Sets the font size */ } .font-weight { font-weight: bold; /* Makes the font bold */ } .font-style { font-style: italic; /* Makes the font italic */ } </style> </head> <body> <p class="font-family">This text uses a specific font family, 'Times New Roman'.</p> <p class="font-size">This text is set to a larger font size of 20 pixels.</p> <p class="font-weight">This text is bolded to draw attention.</p> <p class="font-style">This text is italicized to emphasize or distinguish it.</p> </body> </html> |
Explanation of the Code:
The .font family class applies the 'Times New Roman' font type, with a fallback option to any serif font if 'Times New Roman' is not supported.
The .font size class sets the text size to 20 pixels, which improves readability and highlights information.
The .font weight class bolds the text, which is great, for headings or important statements that require emphasis.
The .font style class italicizes the text often used to highlight words or phrases that express thoughts or for purposes.
