Why repeat yourself in CSS?


Hey there! I have a question.
I have not quite mastered the positioning, float and display tags but I will get there eventually. For now what bugs me is the following:

I did the python course and there it was mentioned that you should never repeat yourself in writing code (DRY!). I love that statement, laziness makes for a good creativity motivator :wink:. So what I am wondering is why in the example resume stylesheet are a lot of attributes repeated in the different selectors? Font-family and color for example. Wouldn't it be easier to put that in the div part of the css?

I do get that every selector signifies a different part of the website and may need specific behavior. But that still doesn't explain why the font-family isn't just mentioned once, right?

Is there an explanation for this? Or should I really view the div parts as the background for the p and h parts?

Thank you!
(below is(part) of the example)

div {
	border-radius: 5px;

#header {
	z-index: 1;
	position: fixed;
	width: 97.5%;
	margin-top: -20px;
	height: 60px;
	background-color: #668284;
	margin-bottom: 10px;

#name {
	margin-left: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;

	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;

h4 {
	margin-left: 5px;
	margin-bottom: 15px;
	font-family: Verdana, sans-serif;


in sizing and colors you had the freedom to build to pick the colors, font-family and so on.

If you use the same font-family for the all the headings and so on, you should add it do div css selector.

DRY also applies to CSS, so yes, this is important


Thank you!

So in the example the use of Verdana as font-family could have been put in the div css selector (and then only mention font-family in other selectors when they were different)?


or even to the body css selector.

css inherits from its parent, so if you add to div or body it will inherit. If you then add a different font-family to for example h2, the font-family will be overwritten (if for example for h2 you want a different font)


Okay! Yes! I thought so :slight_smile: thank you!

It doesn't, however work the same for the positioning, displaying and floating attributes does it :wink: would be weird anyway, I suppose :slight_smile: Can't position your paragraph properly in your div if you only specify attributes in div.


no, it doesn't. Css files can get pretty large because everything has to be positioned.


Thank you! Also for your quick reply. Much appreciated! :grinning:


geen probleem, graag gedaan

(no problem, you are welcome)


hahaha dude :slight_smile: Dutchies ftw!

fijne avond! En fijn weekend :slight_smile:


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.