From f1b042b8bbea800f6afc4066a02e68c567ad0373 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Mon, 3 Jun 2024 06:34:38 +0530 Subject: [PATCH 1/3] Create Typography.md --- docs/CSS/css-basics/Typography.md | 68 +++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 docs/CSS/css-basics/Typography.md diff --git a/docs/CSS/css-basics/Typography.md b/docs/CSS/css-basics/Typography.md new file mode 100644 index 000000000..569689558 --- /dev/null +++ b/docs/CSS/css-basics/Typography.md @@ -0,0 +1,68 @@ +# Typography + +Typography in CSS is an essential aspect of web design, as it greatly influences the readability, aesthetics, and overall user experience of a website. Here are the key concepts and properties related to typography in CSS: + +**1. Font Family** + +The `font-family` property specifies the typeface for the text. It can include a specific font name and one or more generic font families. + +```css +body { + font-family: 'Arial', sans-serif; +} +``` + +**2. Font Size** + +The font-size property controls the size of the text. It can be set in various units like pixels (`px`), em units (`em`), rem units (`rem`), percentages (`%`), and more. + +```css +p { + font-size: 16px; +} + +h1 { + font-size: 2em; /* 2 times the current font size */ +} +``` +You can check the relation between units + +CSS + +**3. Font Weight** + +The `font-weight` property defines the thickness of the characters. Common values include `normal`, `bold`, `bolder`, `lighter`, or numerical values ranging from 100 to 900. + +```css +strong { + font-weight: bold; +} + +p.light { + font-weight: 300; +} +``` + +**4. Font Style** + +The `font-style` property allows you to italicize the text. + +```css +em { + font-style: italic; +} + +p.oblique { + font-style: oblique; +} +``` + +**5. Font Variant** + +The `font-variant` property is used for small-caps and other typographic features. + +```css +p { + font-variant: small-caps; +} +``` From 2d8aed4a4ebfd465d3694d62964976bf3ebcee40 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Mon, 3 Jun 2024 06:39:02 +0530 Subject: [PATCH 2/3] Update Typography.md --- docs/CSS/css-basics/Typography.md | 52 +++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/docs/CSS/css-basics/Typography.md b/docs/CSS/css-basics/Typography.md index 569689558..78dd2568e 100644 --- a/docs/CSS/css-basics/Typography.md +++ b/docs/CSS/css-basics/Typography.md @@ -66,3 +66,55 @@ p { font-variant: small-caps; } ``` + +**6. Text Transform** + +The `text-transform` property changes the case of the text. + +```css +h1 { + text-transform: uppercase; +} + +p { + text-transform: capitalize; +} +``` + +**7. Text Alignment** + +The `text-align` property sets the horizontal alignment of the text. + +```css +div { + text-align: center; +} + +p { + text-align: justify; +} +``` + +**8. Text Decoration** + +The `text-decoration` property adds decorations to the text, such as underlines, overlines, and line-throughs. + +```css +a { + text-decoration: none; /* Removes underline from links */ +} + +del { + text-decoration: line-through; +} +``` + +**9. Text Shadow** + +The `text-shadow` property adds a shadow effect to the text. + +```css +h1 { + text-shadow: 2px 2px 5px gray; +} +``` From cab8e4081f5215b3ae758b12d961b28365ae3467 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Mon, 3 Jun 2024 08:25:50 +0530 Subject: [PATCH 3/3] Update Typography.md --- docs/CSS/css-basics/Typography.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/CSS/css-basics/Typography.md b/docs/CSS/css-basics/Typography.md index 78dd2568e..76e2fca5b 100644 --- a/docs/CSS/css-basics/Typography.md +++ b/docs/CSS/css-basics/Typography.md @@ -27,7 +27,15 @@ h1 { ``` You can check the relation between units -CSS +| Unit | Description | +| :--------: | :--------: | +| `em` | Calculated relative to the current font size. For example, 2em indicates 2 times larger size than current element's font size. | +| `px` | `px` stands for "pixels." It's a unit of measurement commonly used in digital design and web development to define the size of elements on a screen. | +| `%` | Percentage (`%`) is a relative unit of measurement that expresses a value as a fraction of the parent element's size or the viewport's dimensions.For example, 50% of the width of the container. | +| `rem` | Relative to font size of the root-element. | +| `vw` | Viewport width (`vw`) is a relative unit of measurement that expresses a value as a fraction of the width of the browser viewport. `1vw` is equal to 1% of the width of the viewport. | +| `vh` | Viewport height (`vh`) is a relative unit of measurement that expresses a value as a fraction of the height of the browser viewport. `1vh` is equal to 1% of the height of the viewport. | + **3. Font Weight**