Прежде чем начинать решать задание и играть в угадайку, дописывая наугад селекторы, давайте подробно изучим HTML-код. Итак, что мы видим: атрибут style в котором прописаны стили “ломающие” наш котопрофайл. Идем по порядку и разбираем основной контейнер 
div с классом profile. Это общий большой контейнер-родитель 
, от которого все находящиеся в нем маленькие контейнеры будут наследовать свойства.
В контейнере-родителе мы видим еще один контейнер div с классом photo (наш аватар), сверяем его с примером и видим, что с ним все в порядке, пропускаем его и двигаемся дальше. Дальше у нас идут 3 тега span имеющие 1 общий button класс и по одному различающемуся классу (stroke, feed и startle). Глядя на пример мы видим, что это наши кнопки под аватаром. Идем в наш CSS редактор и ищем селекторы с названиями классов совпадающими с кнопками,усиливаем их путем добавления еще одного класса button вот так:
.button.stroke {
background: #3498db;
}.button.feed {
background: #2ecc71;
}.button.startle {
background: #e74c3c;
}
Их можно так-же усилить и с помощью класса profile, но я считаю, что мой вариант более корректный.
Наши кнопки получили нужный нам цвет, теперь нужно задать нужную форму. Выше мы видим свойства для наших button, чтобы они заработали усиливаем их путем добавления селектора span (т.к. они лежат внутри тега span), вот так:
span.button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}
Идем дальше, следующий большой контейнер div c классом info.
В нем мы видим заголовок 2-го уровня h2 с присвоенным идентификатором и средний контейнер div с классом fact внутри которого еще 2 маленьких контейнера div с классами title и value. Идем дальше и видим еще 3 точно таких-же средних контейнера div с классами fact, каждый из которых вмещает по 2 маленьких контейнера div с классами title и value. Переходим в CSS редактор и ищем селекторы отвечающие нашим title и value. Чтобы придать им нужный цвет текста, усиливаем их с помощью класса info, т.к. он является родителем для них, вот так:
.info .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}.info .fact .value {
margin-left: 140px;
color: #34495e;
}
Таким образом мы изменили цвет для всех маленьких контейнеров div с классами title и value, находящихся в средних контейнерах div с классами fact, что в свою очередь лежат в большом контейнере info, который в свою очередь находится в самом большом контейнере profile и наследует стили от него.
Так-же нам нужно изменить общий цвет строк фона блока с информацией на белый. Усиливаем свойства наших самых “маленьких” контейнеров div с помощью того-же класса info, вот так:
.info div.fact {
padding: 10px;
background: white;
}
Нечетным строкам нужно задать светло-серый цвет фона. Усиливаем точно так-же с помощью класса info:
.info .fact:nth-child(odd) {
background: #ecf0f1;
}
Идем дальше, мы снова видим заголовок 2-го уровня без идентификатора но с установленными стилями style, которые, как мы знаем, имеют самый высокий приоритет. Идем в наш CSS код и ищем селектор отвечающий за внешний вид заголовков 2-го уровня. Не забываем о том, что у нас 2 таких заголовка, один из которых имеет идентификатор, а второй стили наивысшего приоритета. Для того чтобы к заголовку с идентификатором применить нужный цвет фона мы усиливаем путем добавления идентификатора info-title. Далее нужно разобраться со следующим заголовком. Т.к. стили для его указаны с помощью style (а именно margin и padding), значит именно их и нужно усилить с помощью !important. Вот так:
#info-title, .info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}
Идем дальше, мы видим контейнер div с классом albums. в котором 4 изображения, одно из них имеет идентификатор miska. Если посмотреть в HTML код, то можно увидеть, что стили для этого идентификатора “сломаны”, а в CSS вообще нет селектора соответствующего селектора. Делаем вывод, что нужно его добавить. Идем в CSS-редактор и думаем куда его добавить. Видим, что для всех изображений в контейнере albums применен левый float, а из-за того, что в HTML для идентификатора miska задан margin-right: 50px, он как-бы выпадает из общего потока. Значит идентификатор miska нужно добавить именно к селектору отвечающему за изображения в альбомах, вот так:
#miska, .albums img {
float: left;
margin-right: 5px;
}
Спасибо за внимание, надеюсь моя инструкция кому-то поможет понять как решить задание. На самом деле решений задания есть несколько и все я их перепробовал, но вот этот вариант мне показался наиболее красивым и правильным.
P.S. не грешите чрезмерным использованием !important, не пытайтесь везде добавить .profile, лучше поймите как все работает, какие свойства наследуются от родителя (profile) и не создавайте непонятный в итоге код.
