Text Properties

8 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€46.70
List Price:  €65.39
You save:  €18.68
£39.94
List Price:  £55.92
You save:  £15.98
CA$68.57
List Price:  CA$96.01
You save:  CA$27.43
A$76.53
List Price:  A$107.15
You save:  A$30.62
S$67.94
List Price:  S$95.13
You save:  S$27.18
HK$390.79
List Price:  HK$547.14
You save:  HK$156.34
CHF 45.61
List Price:  CHF 63.86
You save:  CHF 18.24
NOK kr553.82
List Price:  NOK kr775.40
You save:  NOK kr221.57
DKK kr348.39
List Price:  DKK kr487.78
You save:  DKK kr139.38
NZ$84.29
List Price:  NZ$118.01
You save:  NZ$33.72
د.إ183.60
List Price:  د.إ257.06
You save:  د.إ73.45
৳5,485.75
List Price:  ৳7,680.49
You save:  ৳2,194.74
₹4,172.64
List Price:  ₹5,842.03
You save:  ₹1,669.38
RM237.74
List Price:  RM332.86
You save:  RM95.11
₦61,737.65
List Price:  ₦86,437.65
You save:  ₦24,700
₨13,922.03
List Price:  ₨19,491.96
You save:  ₨5,569.92
฿1,847.10
List Price:  ฿2,586.09
You save:  ฿738.99
₺1,618.04
List Price:  ₺2,265.39
You save:  ₺647.34
B$259.65
List Price:  B$363.53
You save:  B$103.88
R930.41
List Price:  R1,302.64
You save:  R372.23
Лв91.35
List Price:  Лв127.90
You save:  Лв36.55
₩68,760.70
List Price:  ₩96,270.48
You save:  ₩27,509.78
₪187.33
List Price:  ₪262.29
You save:  ₪74.95
₱2,881.22
List Price:  ₱4,033.94
You save:  ₱1,152.71
¥7,761.78
List Price:  ¥10,867.12
You save:  ¥3,105.33
MX$847.89
List Price:  MX$1,187.12
You save:  MX$339.22
QR182.08
List Price:  QR254.93
You save:  QR72.84
P710.02
List Price:  P994.08
You save:  P284.06
KSh6,685.83
List Price:  KSh9,360.69
You save:  KSh2,674.86
E£2,398.89
List Price:  E£3,358.63
You save:  E£959.74
ብር2,859.67
List Price:  ብር4,003.77
You save:  ብር1,144.10
Kz41,816.63
List Price:  Kz58,546.63
You save:  Kz16,730
CLP$48,009.39
List Price:  CLP$67,216.99
You save:  CLP$19,207.60
CN¥361.91
List Price:  CN¥506.70
You save:  CN¥144.79
RD$2,909.49
List Price:  RD$4,073.53
You save:  RD$1,164.03
DA6,727
List Price:  DA9,418.34
You save:  DA2,691.34
FJ$113.07
List Price:  FJ$158.31
You save:  FJ$45.24
Q388.52
List Price:  Q543.96
You save:  Q155.44
GY$10,463.89
List Price:  GY$14,650.29
You save:  GY$4,186.39
ISK kr7,010.59
List Price:  ISK kr9,815.39
You save:  ISK kr2,804.80
DH505.48
List Price:  DH707.71
You save:  DH202.23
L884.07
List Price:  L1,237.78
You save:  L353.70
ден2,875.01
List Price:  ден4,025.24
You save:  ден1,150.23
MOP$402.80
List Price:  MOP$563.96
You save:  MOP$161.15
N$931.61
List Price:  N$1,304.33
You save:  N$372.72
C$1,835.88
List Price:  C$2,570.38
You save:  C$734.50
रु6,711.95
List Price:  रु9,397.27
You save:  रु2,685.31
S/188.15
List Price:  S/263.43
You save:  S/75.27
K192.92
List Price:  K270.11
You save:  K77.18
SAR187.48
List Price:  SAR262.49
You save:  SAR75.01
ZK1,338.41
List Price:  ZK1,873.89
You save:  ZK535.47
L232.39
List Price:  L325.37
You save:  L92.97
Kč1,173.84
List Price:  Kč1,643.47
You save:  Kč469.63
Ft18,183.27
List Price:  Ft25,458.03
You save:  Ft7,274.76
SEK kr546.32
List Price:  SEK kr764.90
You save:  SEK kr218.57
ARS$43,802.69
List Price:  ARS$61,327.27
You save:  ARS$17,524.58
Bs345.39
List Price:  Bs483.57
You save:  Bs138.18
COP$195,145.11
List Price:  COP$273,218.78
You save:  COP$78,073.66
₡25,506.16
List Price:  ₡35,710.66
You save:  ₡10,204.50
L1,238.25
List Price:  L1,733.65
You save:  L495.39
₲374,580.54
List Price:  ₲524,442.73
You save:  ₲149,862.19
$U1,916.38
List Price:  $U2,683.09
You save:  $U766.70
zł202.30
List Price:  zł283.24
You save:  zł80.93
Already have an account? Log In

Transcript

Hello, in this CSS Crash Course video, we're going to look at text properties. These are properties that you can change when of text and stuff like font size, the styling of the font, for decoration that you can do on the font line height, all of that good stuff. So first of all, what we want to do is just add a div tag. And for this, we're going to put title equals quotation marks. Again, like I've said, ideally, you don't want to be doing it in line, I'm just doing it in line for educational purposes, you would want to print something like index file. And once you've done this entire series, you understand how to optimally optimally put it in a separate CSS file.

It's going to leave the style tag blank for now we're going to be duplicating all of this and what we want to do is just actually, we're going to duplicate this so I was gonna just do Copy Paste process a bit okie dokie okie dokie inside here I'm going to put my little mistake there or I'm going to do go back and in here I'm gonna put this is some random text now I'm going to copy and paste this quote remember times that should be in a fucking delete your ad more for one to save that refresh to WordPress so this is what we get the moment that texting is exactly the same. Let's modify the font family. The font family is essentially the font itself the actual font you're using the change to area now which is great for screen as you can see it is different So that worked.

Next, we're going to modify climb to dash. So you know what i'm also could because everything's so close together. I'm going to put a br tag. So for this to copy, paste probably can just copy it from here. Yep. oopsy Daisy did not want to do that.

Almost done. Yeah, don't need for anything below that. assuming that's enough text properties, so font dash sois equals colon. I'm going to put to em up pixels if you wanted to, or point centimeters or other. Now if I go and refresh, this is modified this particular test and you can see what font size property does. Next, we're going to do font weight.

So this is stuff like bold. So for the bold 70 Hold on. Refresh is now bold. We're going to do font style. He calls it talent. You can guess what that does.

Refresh. Well, not funders though. Font dashed? No, it is font style equals My bad. No, no, no. There is I put a equal instead of a colon, refresh, that is now atelic.

The next property will unlock a text that they're called ration. Ko lon and for this, I'm going to put uppercase No, no, that's not it. The uppercase is part of the text transform your main property in here and put a line through. I think z is just strolled through this particular law is a great way of let's say crossing out old texts almost given a sort of feel that it's been edited. The next property we're gonna affect is text dash trans formatting is very, very useful. You can convert the entire thing to uppercase a lowercase or uppercase because you'll see a big difference between this one and the others.

Save that refresh and as you can see, it's now all uppercase and gotta go through enough to loop through it and check if each letter ourselves is uppercase or lowercase, we'll use some code JavaScript or PHP code and we can just use C s, F. And now we're going to check out left letter spacing. You can guess what this does spacing between the letters to em. Last thing you want to do is have the list of so close together that you can in the reader, there you go. This is some random text. Looks pretty cool right there. We're gonna show you words based on that.

So word dash. A scene equals for em. Keep doing equal in quotations. Save that. Refresh. Go to bed.

The E, saved up. Nope. Must have deleted the quote. Multiple submitted entirely. Refresh, there we go. We got a bigger space in between the words but not the letters themselves, like it was in here.

So you got a bit of variety there. Now we're going to look at line height, which is going dash or colon six, save that refresh. And now we got a greater line height. If you have multiple lines, it will be a lot more evident in what is happening and recommend doing that game. That massive paragraph will will be totally, you know, random or true. Or if you get enough inquiries in a paragraph generator, we'll just put lorem ipsum in there.

So we've done nine hyperlinks text, dash line, you can guess what this does this align the text on the center. So what this will do is put this in the center of its parent element. And its parent element, which is essentially the div tag. Or I would say is, go Yeah. Is the body tag. It's sent to the, in the middle, obviously.

And now finally, we're going to show you the last property. Text, dash indent. 50 pixels. Got to take this. Wonder what happens when I don't put a semicolon? It still works.

I know that it still works, please proceed for you to put a semi colon. Save that refresh. So yeah, that is it now for the CSS tax properties Crash Course video. If you have any questions, feel free to post it on our education platform. So northern Dakota UK. If you liked the video, please give it a thumbs up it does scrub it and leave us a comment below.

Usual. Thanks for watching and have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.