Day 9: Examining Font Families, Text Properties, and Color Systems
I spent today exploring several facets of CSS, with an emphasis on font management, color schemes, and text attributes. This is a succinct overview of what I studied and worked on:
1.Colour Systems
Named Color System: For ease of use, CSS comes with a list of named colors, such green, blue, and red. This system is simple to use but has a small color selection.
p{
color: blue; /* Using a named color */
}
RGB Color Scheme: Red, green, and blue light are mixed to form color. Red, green, and blue, or rgb, is the format used by this system. The values in this format range from 0 to 255. Red is represented by rgb(255, 0, 0), for instance. The RGB system changes the strength of each color component to produce a vast array of colors.
p{
color: rgb(255, 0, 0); /* Red color using RGB */
}
Hex Code Color System: Six-digit hexadecimal codes, beginning with # and ending with six characters (e.g., #ff0000 for red), are used to represent colors. When compared to named colors, this method offers a wider variety of hues.
p{
color: #ff0000; /* Red color using Hex code */
}
2. Character attributes
text-align: Determines the text's horizontal alignment (e.g., left, right, center, justify) within its container.
font-weight: Regulates the text's thickness. Typical values include bold, normal, or numeric values between 100 and 900.
text-decoration: Applies decorations to text, such as underline, overline, line-through, or none.
line-height: Adjusts the space between lines of text, which can be set as a unitless value, a length, or a percentage.
letter-spacing: Alters the space between characters. Positive values increase spacing, while negative values decrease it.
font-size: Defines the size of the text. It can be set using units such as px, em, rem, %, etc.
h1{
font-family: League system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #8334eb;
text-align: center;
font-size: 55px;
font-weight: 900;
line-height: 1.5;
letter-spacing: 2px;
text-decoration: burlywood underline;
text-transform: uppercase;
}
3. The CSS px (Pixels) font-size unit is an absolute unit with a defined size.
em: A relative unit determined by the parent element's font size. helpful for adjusting the size of text inside its container.
rem: A relative unit determined by the font-size of the root element, which is typically the element. This guarantees uniform scale throughout the document.
%: Font-size is defined as a percentage of the font-size of the parent element.
4. Font-Family:
Using CSS Font Stack, I investigated several font families and their applications. This website included information about font stacks and practical fallback font selection to guarantee a consistent user experience across a range of browsers and devices.
5. Engage in Exercise:
In order to put what I had learnt into practice, I made an example webpage and used my name as the <h1> element, styling it with CSS. I played around with various text alignments, font sizes, weights, and colors. Through practical application, I was able to comprehend how various CSS properties impact text appearance and how to mix them for a visually appealing design. I'm better able to precisely style my web projects, improving readability and visual appeal, by grasping these ideas and practicing with genuine instances. I want to keep learning new things and using my newly acquired talents on real-world tasks tomorrow. Watch this space for additional developments!