Skip to content

Commit 4812621

Browse files
authored
Merge pull request #73 from devamitranjan/fix#72
[Fix#72] Updated the uppercase text in css/rules.
2 parents d7564b2 + 9de3191 commit 4812621

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

lessons/03-css/A-rules.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Notice the HTML we're using for this is still: `<h1>This is an h1</h1>`. Nothing
6969
- `font-size: 60px;``font-size` is how we make text bigger or smaller. Since we wanted to make it bigger, we made it 60 pixels tall which is quite large. The `px` represent the unit of measurement here. Just as it's different to say something is five feet long, five inches long, or five meters long, so too is it different to say something is `60px` or `60em`. CSS has a bunch of different measurements, but _most_ things are measured in `px`, `em`, or `rem`. [See this CSS Tricks article][css-lengths] if you want see more about the various measurements of CSS.
7070
- `font-weight: normal;` – Like I stated previously, `h1`s are bold by default. This is how you tell the browser to keep the text's weight to normal. There are more things you _can_ do here, but typically you're only telling it be bold or normal.
7171
- `text-decoration: underline;` – This is how you tell it underline the text. Mostly text-decoration is used for that but you'll also see `line-through` for strikethrough or `overline` for … overlining purposes? Yeah, I'm not sure. But you can do it!
72-
- `text-transform: uppercase;` – This can be a bit confusing because we're not changing the text inside the HTML tag but we're making everything upprecase. This is what `text-transform` can do for you. It will also do `lowercase` or `capitalize` (the latter being capitalize the first letter of each word.) Be careful with this since if your website supports other languages, changing the cases of letters will modify the meaning.
72+
- `text-transform: uppercase;` – This can be a bit confusing because we're not changing the text inside the HTML tag but we're making everything uppercase. This is what `text-transform` can do for you. It will also do `lowercase` or `capitalize` (the latter being capitalize the first letter of each word.) Be careful with this since if your website supports other languages, changing the cases of letters will modify the meaning.
7373
- `border: 3px solid pink;` – This is how you make borders around items. First, notice the border goes all the way to the edge of the page. That's because `h1`s take the whole line even though they don't necessarily have text to fill that. We'll address this later when we talk about the block model but it's good to know that now. So notice we have three values there for the one property: `3px`, `solid`, and `pink`. These are all separate and could be put in any order (ie you could say `border: solid pink 3px;` and it's the same.) The `3px` represents the thickness of the border, the `solid` represents that it's a solid line (it could be `dotted`, `dashed`, `double`, or a few others) and `pink` represents the color of the border. This actually an example of a combined CSS property, a shortcut. You could separate this out as `border-style: solid;`, `border-color: pink;`, and `border-width: 3px;`. You'll see a lot of these in CSS.
7474
- Why is it `font-*` sometimes and `text-*` other times? Font has to do with the actual font being loaded. An italics font is actually different glyphs as in as a bolded font. Text has to do with the text being the text displayed, like uppercase or a line underneath. It doesn't need to change the actual font being loaded.
7575

0 commit comments

Comments
 (0)