Hello everyone! Today, I continued my journey into the world of CSS, diving deeper into topics like pixels, fonts, and colors, and even exploring developer tools. I'm excited to share my discoveries with you!
What is a physical pixel?
A physical pixel is the smallest unit of a digital display, like a computer monitor or smartphone screen. It's important to understand pixels when working with CSS, as they help us create designs that look great on various devices.
Various font properties
I learned that there are several font properties in CSS that allow us to control the appearance of text. Some of these properties include:
font-family: Specifies the typeface to be used.
font-size: Sets the size of the font.
font-weight: Controls the thickness or boldness of the font.
font-style: Applies styles like italic or oblique.
line-height: Adjusts the spacing between lines of text.
- How we can use font-family in CSS
To use font-family in CSS, simply specify the desired typeface within the property. For example:
p {
font-family: Arial, sans-serif;
}
Web-safe font families and external font families
Web-safe font families are fonts that are commonly installed on most devices, ensuring that your text will appear consistently across different platforms. Examples include Arial, Times New Roman, and Georgia.
External font families, on the other hand, are fonts that are not pre-installed on devices. To use them, you'll need to import them from a source like Google Fonts. For example:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
How to use color in CSS
Colors play a crucial role in web design, and CSS provides various properties to control them. Some examples include color (for text color), background-color, and border-color.
Various formats of using colors in CSS like RGB, hex, HSL
There are several ways to represent colors in CSS:
RGB: Specifies colors using red, green, and blue values. For example: rgb(255, 0, 0) for red.
Hexadecimal: Represents colors using a six-digit code preceded by a hash symbol. For example: #FF0000 for red.
HSL: Specifies colors using hue, saturation, and lightness values. For example: hsl(0, 100%, 50%) for red.
What is a fallback system in terms of font-family?
A fallback system in CSS allows you to specify multiple font families in case the user's device doesn't support the primary font. For example:
p {
font-family: "Roboto", Arial, sans-serif;
}
In this example, if the "Roboto" font is unavailable, the browser will try to use Arial, and if that's also unavailable, it will use a generic sans-serif font.
Sneak-peek at developer options
I also explored developer tools in web browsers like Chrome and Firefox. These tools allow you to inspect and modify the HTML, CSS, and JavaScript of a web page in real-time, making it easier to debug and experiment with your designs.
To access developer tools, simply right-click on a web page and select "Inspect" or "Inspect Element."
I hope you enjoyed reading about my journey into the world of CSS. If you have any questions or want to share your own experiences, please leave a comment below!