diff options
Diffstat (limited to '.md/tutorials')
-rw-r--r-- | .md/tutorials/www/quick-intro-html-css.md | 22 |
1 files changed, 11 insertions, 11 deletions
diff --git a/.md/tutorials/www/quick-intro-html-css.md b/.md/tutorials/www/quick-intro-html-css.md index 9c6733f..33a17a2 100644 --- a/.md/tutorials/www/quick-intro-html-css.md +++ b/.md/tutorials/www/quick-intro-html-css.md @@ -379,7 +379,7 @@ For any HTML tag, you can set an attribute that applies everytime it appears in an HTML document that links to the CSS file. A common formatting I use for paragraphs is: -```htmlcss +```css p { margin-top: 1.5%; margin-bottom: 1.5%; @@ -388,7 +388,7 @@ p { And to highlight code, like you've been seeing, I use: -```htmlcss +```css code { display: inline-block; font-size: 125%; @@ -416,7 +416,7 @@ Images get more styles in CSS than I can document in detail, but one important bit you'll want to probably add to all images is the following. -```htmlcss +```css img { max-width: 100%; height: auto; @@ -437,7 +437,7 @@ distorted. In addition to this basic stuff, you can style your images heavily using the filter option like so: -```htmlcss +```css img.gray { filter: grayscale(100%) } @@ -461,7 +461,7 @@ others. An example on this site, I dim the icons a bit so they can appear nice on dark theme browsers just as well. But I don't want to dim *all* images like in the following example: -```htmlcss +```css img { filter: invert(50%); } @@ -477,7 +477,7 @@ src="/static/media/jazzcat.jpg" Instead, I'd like it to just apply to select elements; I can do so by extending the tag with a class. On the CSS side: -```htmlcss +```css img.icon { filter: invert(50%); } @@ -485,7 +485,7 @@ img.icon { And to implement it in HTML: -```htmlcss +```css <img class="icon" src="/static/media/rss.svg" /> ``` @@ -499,7 +499,7 @@ wanted to center a heading, a paragraph, and a picture, and constrain them to only part of the page, so that there's some margins on the left and right. We can put them all in one content section like this: -```htmlcss +```css .content { text-align: center; max-width: 85%; @@ -511,7 +511,7 @@ usually we use a placeholder tag called "div." You can think of "div" like a divider for content of similar style. In the present example, we can use the class we made with a div tag: -```htmlcss +```html <div class="content"> <h1>My cat</h1> <p>He's a cool cat</p> @@ -532,7 +532,7 @@ I won't go into as gory details as [here](https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b), but for your basic smartphone, you can copy and paste this block: -```htmlcss +```css @media screen and (max-device-width: 480px) { // override your tags here body { @@ -551,7 +551,7 @@ your CSS attributes, so that size is always defined relative to all the other elements. This makes functions like zoom work a lot better. You can for example put a pixel value like this: -```htmlcss +```css body { font-size: 14px; } |