{"id":58482,"date":"2023-09-15T12:15:10","date_gmt":"2023-09-15T06:45:10","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=58482"},"modified":"2023-09-19T16:32:58","modified_gmt":"2023-09-19T11:02:58","slug":"the-complete-css-property-encyclopedia-your-ultimate-reference-part-1","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/the-complete-css-property-encyclopedia-your-ultimate-reference-part-1\/","title":{"rendered":"The Complete CSS Property Encyclopedia: Your Ultimate Reference (Part 1)"},"content":{"rendered":"

CSS \u2500 MEASUREMENT UNITS<\/strong><\/h2>\n

CSS offers us various measurement units that we can use to define sizes and distances for various properties such as width, height, margins, padding, fonts, and more. Here’s a list of commonly used CSS measurement units:<\/span><\/p>\n

\u25cf Pixels (px): <\/strong><\/span><\/span>Pixels specify the size in CSS, and it is most commonly used. 1px represents a single dot on a screen. It’s a fixed-size unit. It is also not affected by the screen’s resolution.<\/span><\/p>\n

width: 100px;<\/span><\/pre>\n
\u25cf Percent (%): <\/strong><\/span><\/span>Percentages are used to create responsive layouts. They are calculated based on their parent container’s size.<\/span><\/p>\n
width: 50%;<\/span><\/pre>\n
\u25cf Em (em): <\/strong><\/strong>The “em” unit is relative to the font size of the element. For example, if the font size of the parent element is 16px, then 1em denotes 16px.<\/span><\/p>\n
font-size: 1.2em;<\/span><\/pre>\n
\u25cf Rem (rem): <\/strong><\/strong>Rem is the same as\u00a0 “em,” but it’s relative to the root (html) element’s font size. font-size: 1.2rem;<\/span><\/p>\n
\u25cf Viewport Width (vw) and Viewport Height (vh): <\/strong><\/strong>These units are relative to the viewport’s width and height, respectively. 1vw = 1% of the viewport width, and 1vh = 1% of the viewport height.<\/span><\/p>\n
width: 50vw;<\/span>\r\n\r\nheight: 25vh;<\/span><\/pre>\n
\u25cf Centimeters (cm), Millimeters (mm), Inches (in), Points (pt), and Picas (PC): <\/strong><\/strong>These units are physical measurements. They can be used when we need precise control over print styles or, we can say when we want to specify sizes in real-world units.<\/span><\/p>\n
width: 5cm;<\/span><\/pre>\n
\u25cf Pixels per Inch (ppi) or Dots per Inch (dpi): <\/strong><\/strong>These units specify the number of pixels or dots per inch on a printed page. They are mostly used for print styles. They are used in the \u2018@media print \u2018context.<\/span><\/p>\n
width: 300dpi;<\/span><\/pre>\n
\u25cf Ch: <\/strong><\/strong>The “ch” unit represents the width of the zero (0) character in the current font. It is useful for aligning text or when we want to create fixed-width layouts based on character count.<\/span><\/p>\n
width: 20ch;<\/span><\/pre>\n
\u25cf Grid-Fraction (fr): <\/strong><\/strong>In order to distribute available space among grid items, we use this. It is used with CSS Grid layouts. For example, if we have two items with 1fr and 2fr, the second item will take twice as much space as the first.<\/span><\/p>\n
grid-template-columns: 1fr 2fr;<\/span><\/pre>\n
\"\"<\/span><\/p>\n
\u00a0\"\"\u00a0<\/span><\/p>\n
\"\"<\/span><\/p>\n
CSS \u2500 COLORS<\/strong><\/h2>\n
In CSS, colors can be defined with the help of a variety of methods, which include named colors, hexadecimal, RGB, RGBA, HSL, and HSLA.\u00a0<\/span><\/p>\n
\u25cf Named Colors: <\/strong>CSS provides us with a set of predefined color names that we can use directly.<\/p>\n
color: red;\u00a0<\/span>\r\n\r\nbackground-color: yellow;<\/span><\/pre>\n
\u25cf Hexadecimal Values: <\/strong>These colors use a 6-digit hexadecimal code. Each pair of digits represents the RGB i.e., red, green, and blue color. For example:<\/p>\n
color: #FF0000; \/* Red *\/<\/span>\r\n\r\nbackground-color: #00FF00; \/* Green *\/<\/span><\/pre>\n
\u25cf RGB Values: <\/strong>RGB color values consist of three numbers representing the intensity of red, green, and blue. They can range from 0 to 255. For example:<\/p>\n
color: rgb(255, 0, 0); \/* Red *\/<\/span>\r\n\r\nbackground-color: rgb(0, 255, 0); \/* Green *\/<\/span><\/pre>\n
\u25cf RGBA Values: <\/strong>RGBA color values are the same as RGB. It also includes an additional alpha value that represents the transparency of color. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). For example:<\/p>\n
color: rgba(255, 0, 0, 0.5); \/* Semi-transparent red *\/<\/span>\r\n\r\nbackground-color: rgba(0, 255, 0, 0.75); \/* Semi-transparent green *\/<\/span><\/pre>\n
\u25cf HSL Values: <\/strong><\/strong>HSL stands for Hue, Saturation, and Lightness. Hue is represented as an angle in degrees (0 to 360), and saturation and lightness are represented as percentages (0% to 100%). For example:<\/span><\/p>\n
color: hsl(0, 100%, 50%); \/* Red *\/<\/span>\r\n\r\nbackground-color: hsl(120, 100%, 50%); \/* Green *\/<\/span><\/pre>\n
\u25cf HSLA Values: <\/strong>Same as HSL, HSLA includes an alpha value for transparency. For example:<\/span><\/p>\n
color: hsla(0, 100%, 50%, 0.5); \/* Semi-transparent red *\/<\/span>\r\n\r\nbackground-color: hsla(120, 100%, 50%, 0.75); \/* Semi-transparent green *\/<\/span><\/pre>\n
We can choose the color representation method that suits our needs and design. Also, we can use CSS functions like <\/span>currentColor<\/span>, <\/span>rgba()<\/span>, <\/span>hsla()<\/span>, and CSS variables, which define and reuse colors throughout our stylesheet.<\/span><\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
CSS \u2500 FONTS<\/strong><\/h2>\n
In CSS, we can control the fonts by specifying font families, font sizes, font styles, and font weights.\u00a0<\/span><\/p>\n
\u25cf Font Families:<\/strong><\/strong>font-family<\/strong>:<\/strong> This property sets the font for an element. We can specify a list of font family names, and the browser will use the first available font in the list.<\/span><\/p>\n
font-family: Arial, Helvetica, sans-serif;<\/span><\/pre>\n
\u25cf Generic Font Families:<\/strong> We can also use generic font families as fallbacks. Common generic font families include <\/span>serif<\/span>, <\/span>sans-serif<\/span>, <\/span>monospace<\/span>, <\/span>cursive<\/span>, and <\/span>fantasy<\/span>.<\/span><\/p>\n
font-family: 'Times New Roman', Times, serif;<\/span><\/pre>\n
\u25cf Font Size: <\/strong>This property defines the size of the text. We can specify the size in various units like px, em, %, or keywords (e.g., small, medium, large).<\/p>\n
font-size: 16px;<\/span><\/pre>\n
\u25cf Font Style: <\/strong>To specify the font style, we use this property. For example, normal, italic, or oblique.<\/p>\n
font-style: italic;<\/span><\/pre>\n
\u25cf Font Weight: <\/strong>We can set the weight of the font using values like normal, bold, or numeric values ranging from 100 (thin) to 900 (black).<\/p>\n
font-weight: bold;<\/span><\/pre>\n
\u25cf Font Variants and Small-Caps: <\/strong>In order to set text to be displayed in small-caps, we use this property.<\/p>\n
font-variant: small-caps;<\/span><\/pre>\n
\u25cf Text Transformations: <\/strong>We can control text capitalization with values like uppercase, lowercase, and capitalize.<\/p>\n
text-transform: uppercase;<\/span><\/pre>\n
\u25cf Font Shorthand: <\/strong>We can use the font shorthand property to set multiple font properties in one declaration. Always use the below order: font-style, font-variant, font-weight, font-size\/line-height, and font-family.<\/i><\/strong><\/p>\n
font: italic small-caps bold 16px\/1.5 'Times New Roman', Times, serif;<\/span><\/pre>\n
\u25cf Web Fonts: <\/strong>In order to define custom font families, we can use web fonts by including font files in our project.<\/p>\n
@font-face {<\/span>\r\n\r\n\u00a0\u00a0font-family: 'MyCustomFont';<\/span>\r\n\r\n\u00a0\u00a0src: url('myfont.woff2') format('woff2');<\/span>\r\n\r\n}<\/span><\/pre>\n
These CSS font properties allow us to customize the appearance and typography of text.<\/span><\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
CSS \u2500 TEXT\u00a0<\/strong><\/h2>\n
In order to style text content, we can use this. It provides a variety of ways to use text-related properties. Here are some common CSS text properties and how to use them:<\/span><\/p>\n
\u25cf Text Color (color):<\/strong>The color property sets the color of the text.<\/span><\/p>\n
color: #FF0000; \/* Red text color *\/<\/span><\/pre>\n
\u25cf Text Alignment (text-align): <\/strong>This property controls the horizontal alignment of text.<\/p>\n
text-align: center; \/* Center-align text *\/<\/span><\/pre>\n
\u25cf Text Decoration (text-decoration): <\/strong>This property is used to add decorative styles to text, such as underlines and overlines.<\/p>\n
text-decoration: underline;\u00a0<\/span><\/pre>\n
\u25cf Text Transformation (text-transform): <\/strong>This property allows us to control the capitalization of text. To make uppercase, lowercase, or capitalized, we can use this property.<\/p>\n
text-transform: uppercase;\u00a0<\/span><\/pre>\n
\u25cf Line Height (line-height): <\/strong>This property defines the spacing between lines of text.<\/p>\n
line-height: 1.5;\u00a0<\/span><\/pre>\n
\u25cf Letter Spacing (letter-spacing): <\/strong>This property adjusts the space between individual characters in text.<\/p>\n
letter-spacing: 2px; <\/span><\/pre>\n
\u25cf Word Spacing (word-spacing): <\/strong>This property adjusts the space between words in text.<\/p>\n
word-spacing: 5px;\u00a0<\/span><\/pre>\n
\u25cf Text Shadow (text-shadow): <\/strong>This property adds a shadow effect to text. It can also take multiple values to define the shadow’s color, horizontal and vertical offsets, and blur radius.<\/p>\n
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\u00a0<\/span><\/pre>\n
\u25cf Text Overflow (text-overflow): <\/strong>This property controls how text that overflows its container is displayed. Common values include ellipsis (…) and clip.<\/p>\n
text-overflow: ellipsis;\u00a0<\/span><\/pre>\n
\u25cf White Space (white space): <\/strong>This property controls how white space within text is handled. It can also be used in order to prevent line breaks or collapse consecutive white spaces.<\/p>\n
white-space: nowrap;\u00a0<\/span><\/pre>\n
These CSS text properties give us control over the appearance and layout of text content on our web pages, helping us to create visually appealing and readable text elements.<\/span><\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
CONCLUSION:<\/strong><\/h4>\n
In conclusion, CSS provides a wide range of tools and properties for styling and formatting web content.<\/span><\/p>\n
Measurement Units: CSS offers various measurement units for defining sizes and distances, including pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw and vh), physical units (cm, mm, in, pt, pc), and more. These units allow for flexible and responsive web design.<\/span><\/p>\n
Colors<\/strong>: CSS allows us to specify colors in multiple ways, such as named colors, hexadecimal values, RGB\/RGBA values, HSL\/HSLA values, and more.\u00a0<\/span><\/p>\n
Fonts<\/strong>: CSS provides properties for controlling font families, sizes, styles, weights, variants, and text transformations.\u00a0<\/span><\/p>\n
Text<\/strong>: CSS text properties enable us to style text content with properties like color, alignment, decoration (e.g., underline), transformation (e.g., uppercase), line height, letter spacing, word spacing, text shadow, text overflow, and white space handling. <\/span><\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
CSS \u2500 MEASUREMENT UNITS CSS offers us various measurement units that we can use to define sizes and distances for various properties such as width, height, margins, padding, fonts, and more. Here’s a list of commonly used CSS measurement units: \u25cf Pixels (px): Pixels specify the size in CSS, and it is most commonly used. […]<\/p>\n","protected":false},"author":1505,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":23},"categories":[3602,3429,1994,4488],"tags":[5445,245,5443,5447,5446,5444],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58482"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1505"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=58482"}],"version-history":[{"count":4,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58482\/revisions"}],"predecessor-version":[{"id":58577,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58482\/revisions\/58577"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=58482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=58482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=58482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}