Dressing Zombies in Cascading Style Sheets

6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€64.94
List Price:  €92.78
You save:  €27.83
£55.57
List Price:  £79.40
You save:  £23.82
CA$95.27
List Price:  CA$136.11
You save:  CA$40.83
A$107.88
List Price:  A$154.13
You save:  A$46.24
S$94.55
List Price:  S$135.08
You save:  S$40.52
HK$547.57
List Price:  HK$782.28
You save:  HK$234.71
CHF 63.42
List Price:  CHF 90.61
You save:  CHF 27.18
NOK kr759.63
List Price:  NOK kr1,085.23
You save:  NOK kr325.60
DKK kr484.38
List Price:  DKK kr692.01
You save:  DKK kr207.62
NZ$117.46
List Price:  NZ$167.80
You save:  NZ$50.34
د.إ257.02
List Price:  د.إ367.19
You save:  د.إ110.16
৳7,682.93
List Price:  ৳10,976.08
You save:  ৳3,293.15
₹5,837.41
List Price:  ₹8,339.52
You save:  ₹2,502.10
RM331.26
List Price:  RM473.25
You save:  RM141.99
₦99,285.71
List Price:  ₦141,842.81
You save:  ₦42,557.10
₨19,466.20
List Price:  ₨27,810.04
You save:  ₨8,343.84
฿2,553.28
List Price:  ฿3,647.70
You save:  ฿1,094.41
₺2,262.39
List Price:  ₺3,232.12
You save:  ₺969.73
B$349.43
List Price:  B$499.21
You save:  B$149.77
R1,335.92
List Price:  R1,908.54
You save:  R572.62
Лв126.45
List Price:  Лв180.65
You save:  Лв54.20
₩94,634.34
List Price:  ₩135,197.71
You save:  ₩40,563.37
₪258.03
List Price:  ₪368.63
You save:  ₪110.60
₱3,943.57
List Price:  ₱5,633.91
You save:  ₱1,690.34
¥10,600.67
List Price:  ¥15,144.47
You save:  ¥4,543.79
MX$1,161.53
List Price:  MX$1,659.40
You save:  MX$497.87
QR255
List Price:  QR364.31
You save:  QR109.30
P959.59
List Price:  P1,370.91
You save:  P411.31
KSh9,203.68
List Price:  KSh13,148.68
You save:  KSh3,945
E£3,310.52
List Price:  E£4,729.52
You save:  E£1,419
ብር3,976.27
List Price:  ብር5,680.63
You save:  ብር1,704.36
Kz58,526.41
List Price:  Kz83,612.74
You save:  Kz25,086.33
CLP$68,581.80
List Price:  CLP$97,978.20
You save:  CLP$29,396.40
CN¥506.04
List Price:  CN¥722.95
You save:  CN¥216.90
RD$4,144.87
List Price:  RD$5,921.50
You save:  RD$1,776.62
DA9,443.17
List Price:  DA13,490.83
You save:  DA4,047.65
FJ$158.28
List Price:  FJ$226.12
You save:  FJ$67.84
Q545.87
List Price:  Q779.86
You save:  Q233.98
GY$14,645.83
List Price:  GY$20,923.51
You save:  GY$6,277.68
ISK kr9,762.20
List Price:  ISK kr13,946.60
You save:  ISK kr4,184.40
DH709.20
List Price:  DH1,013.19
You save:  DH303.99
L1,234.28
List Price:  L1,763.34
You save:  L529.05
ден3,991.30
List Price:  ден5,702.11
You save:  ден1,710.80
MOP$564.10
List Price:  MOP$805.89
You save:  MOP$241.79
N$1,325.35
List Price:  N$1,893.44
You save:  N$568.09
C$2,576.69
List Price:  C$3,681.15
You save:  C$1,104.45
रु9,334.54
List Price:  रु13,335.63
You save:  रु4,001.09
S/259.58
List Price:  S/370.84
You save:  S/111.26
K267.89
List Price:  K382.72
You save:  K114.82
SAR262.49
List Price:  SAR375
You save:  SAR112.51
ZK1,765.85
List Price:  ZK2,522.76
You save:  ZK756.90
L322.98
List Price:  L461.43
You save:  L138.44
Kč1,645.46
List Price:  Kč2,350.75
You save:  Kč705.29
Ft25,709.21
List Price:  Ft36,729.02
You save:  Ft11,019.81
SEK kr749.87
List Price:  SEK kr1,071.30
You save:  SEK kr321.42
ARS$60,034.20
List Price:  ARS$85,766.82
You save:  ARS$25,732.62
Bs483.70
List Price:  Bs691.04
You save:  Bs207.33
COP$271,296.95
List Price:  COP$387,583.68
You save:  COP$116,286.73
₡35,581.11
List Price:  ₡50,832.34
You save:  ₡15,251.22
L1,728.07
List Price:  L2,468.78
You save:  L740.71
₲516,441.87
List Price:  ₲737,805.73
You save:  ₲221,363.85
$U2,647.22
List Price:  $U3,781.90
You save:  $U1,134.68
zł280.50
List Price:  zł400.73
You save:  zł120.23
Already have an account? Log In

Transcript

Now we get to CSS. css stands for cascading style sheets in a zombie fight. HTML is going to be the skeleton, and CSS is the flesh and clothes. So HTML is sort of the structure and CSS is the look and feel its colors. It's fonts. It's how things are presented.

It'll style text provide for static changes. It cascades through the documents, so Cascading Style Sheets, allowing Child Elements to inherit some of the properties of their parent elements. So you can inherit colors, and sizes and some of those sorts of things. css comes in a list of rules. So rule consists of a selector and a declaration block selectors choose which elements the declarations apply to, and the declaration blocks, lay out the changes or talk about what should happen. So for instance, this is not a real CSS selector, but this is what it will look like.

So you have first your selector. Then you have an opening curly bracket. Then you have the day coloration, and then a value. And then a closing curly bracket, the colon and the semi colon are important. So make sure you include those. Let's talk more about selecting.

So selectors come in three main flavors, you have classes, IDs elements, you can combine these to create what's called descendant selectors. So these are descendants in the same way that child element is the child or descendant of a parent element going to use for classes you're gonna use the class attribute for HTML elements. And in CSS, you need to have a period in front of it. Eg periods zombie school IDs, you're going to use the ID attribute and only appear once per page and in CSS, they need a hashtag in front of them. So hashtag unique dash zombie says declarations usually your keyword value pair separated by a colon and use a semicolon to designate the end you could have multiple decorations per rule, and curly brackets wrap the definition block to show the beginning and end of the block. So for instance, with a p tag, we can set the color to yellow green, and then this will change all the paragraph text To an ice rink, simple yellow green.

So here we have some HTML on the sides, we've just a paragraph tags. The next one has a class, it's classy, so it's going to add, and then ID, which is unique. So for instance, here we have color of light blue for the paragraph. So if we change that to say red should update down here, so the color is red, hoity toity is selecting the middle one. So if we change that to just regular green goes that the reason it went red for a little bit before turning green, was that P. The p tag also applies to the hoity toity p tag. But hoity toity being a class is going to actually override the p tag because it's more specific because it's not every p tag is the only those that have the class of hoity toity and then if we change say unique and added a, let's change it to blue, then it becomes blue down there.

Alright, so hello. Then put CSS and HTML together. There are four ways to do that style attribute style tag, which are the main two that we'll talk about. And then there's an external stylesheet and importing a stylesheet. Again, these are more complex than we really need. So we'll talk about the first two.

So the style attribute goes on any HTML element works, looks similar to a class or other attribute that we've talked about, you only need the declaration since you're already on the specific element already selecting that element. So you don't need a selector, just the declaration and the downside of this. So the upside is that you can be very specific in how you apply rules. The downside is if you set this on a number of elements, say changing all of the paragraph texts to blue, but then your boss wants to change it to red or you need to change something later on. Then you have to edit each and every one of those to see what the style should be actually looks like. Here we have it sort of the p tag we have a style attribute with a color green and the paragraph We'll have green text.

So elemental style. So there's a style element, which is part of its HTML element, just style. And you can put CSS between the opening and closing style tags. And this you can set all paragraphs to blue. And then if you change that, it will change everywhere. So with the style tag, the P says we have a selector will apply to all paragraph tags within this particular page.

And we can change the color to purple or red or whatever we want to change it to, just by changing this one place, rather than going to each style attribute and changing them there. Alright, there are a couple caveats here. Use your new powers wisely. Brand colors and fonts are there for a reason to create consistency across many pages. If you go against them, it do so at your peril. It's not my fault.

You were making that choice. I'm just telling you how to do it when it makes sense to do it. So use your new powers wisely. If you try to do a new design and look and feel per page, that's rarely the wise choice, it can confuse users. The times when you want to do this might be, for instance, if you have a figure that you wanted to then style a little bit differently than the rest of the site that might make sense to do that consistency is really important. It helps users know that they're on the same site, that they are dealing with the same institution.

And if you constantly change fonts, or constantly change colors, it's not gonna make any sense. And they're gonna leave, they're going to go to a different site. There are times when you can and should go against brand, colors and fonts. They are rare. And if you do so you should have a really good reason to do so it should be reasons like the way that you were showing the content needed to have different font and color so it could provide contrast to the brand fonts and colors or something like that. It should be a really good reason and it should be one that you can articulate.

So again, go against brand colors and fonts at your peril. All that said though, be creative and push the boundaries. The web is a place to play and have fun and If we don't keep pushing the boundaries, we'll never know what we can do.

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.