From 14c5d062fa2af501580e04054f5020ea3ff5fd9a Mon Sep 17 00:00:00 2001 From: Ze'ev Schurmann Date: Tue, 22 Apr 2025 17:06:22 +0200 Subject: [PATCH] Update beating-heart/README.md --- beating-heart/README.md | 62 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/beating-heart/README.md b/beating-heart/README.md index 70c70c3..5d711cf 100644 --- a/beating-heart/README.md +++ b/beating-heart/README.md @@ -4,3 +4,65 @@ This is a nice effect of a heart being constructed step by step then animating w ![Beating Heart](https://git.zaks.web.za/thisiszeev/css-tricks/raw/branch/main/beating-heart/beating-heart.gif) +# The CSS Explained + +Inside the HTML file is some CSS code. Let's take a look at the various elements... + +## Tags + +### body + +This block of CSS defines the formatting for the entire HTML document. Every element inside the `` tags will inherit these settings. + +````CSS + body { + background: linear-gradient(to right, #ffdee9, #b5fffc); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; + font-family: 'Segoe UI', sans-serif; + } +```` + +1. First we set a background gradient going from left to right. (https://www.w3schools.com/css/css3_gradients.asp) +2. We define the display as a flex mode. (https://www.w3schools.com/css/css3_flexbox.asp) +3. We set the content justification to center so that the content is in the vertical center of the viewport. (https://www.w3schools.com/css/css_align.asp) +4. We set the content alignment to center so that the content is in the horizontal center of the viewport. (https://www.w3schools.com/css/css_align.asp) +5. We define the height of the viewport to 100% of the viewport height where 1vh = 1% of viewport height. (https://www.w3schools.com/cssref/css_units.php) +6. We set the flex direction from top to bottom. +7. We define the font to be used as **Sefoe UI** or to fall back to the system default sans-serif font as defined in the users operating system. + +### h1 + +This CSS block defines custom formatting for all H1 tags. + +````css + h1 { + color: #e6005c; + margin-top: 30px; + font-size: 2.2em; + } +```` + +1. Using RGB Hex Values, the color is defined as 230 Red (e6), 0 Green (00) and 92 Blue (5c). +2. The top margin is set to 30 pixels. +3. The font size is set to 2.2 X the inherited font size, which in this case is the browser's default font size for H1. + +### p + +This CSS block defines custom formatting for all P tags. + +````css + p { + font-size: 1.2em; + margin-top: 10px; + color: #444; + } +```` + +1. The font size is set to 1.2 times the inherited font size, which in this case is the browser's default font size for P. +2. The top margin is set to 10 pixels. +3. Using singled digit RGB Hex Values, the color is defined as 60 Red (4), 68 Green (4) and 68 Blue (4). +