summaryrefslogtreecommitdiffstats
path: root/.md/tutorials/www/quick-intro-html-css.md
diff options
context:
space:
mode:
Diffstat (limited to '.md/tutorials/www/quick-intro-html-css.md')
-rw-r--r--.md/tutorials/www/quick-intro-html-css.md22
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;
}