Александр

Я использую этот способ.

Только если менять цвет select, но вряд ли вас это устроит.

select {
   color: #f00;
}
option {
    color: #000;
}
option:first-child {
   color: #f00;
}

По-другому на css не сделать.

frontender.info/the-art-of-html-semantics-pt1

Вам нужно полностью готовое решение или техника реализации? Техника здесь:
www.smashingmagazine.com/2013/01/15/off-canvas-nav...
codepen.io/scottb/pen/javhr

Плюшки, рецепты, статьи:
www.smashingmagazine.com
tympanus.net/codrops
css-tricks.com
frontender.info

Запятую уберите. И добавьте псевдоэлемент. jsfiddle.net/t175v487
Или какая-то специфическая ситуация?

Английский

Надо использовать normalize.css или reset.css + проверять работоспособность свойства в конкретном браузере на caniuse.com

Факультет заочного и дистанционного обучения МГУПИ .
- Также есть перезачет предметов и, думаю, возможность ускоренного обучения тоже имеется.
- Не знаю, как для дистанционного обучения, но в вузе есть возможность получить диплом европейского образца.

Вообще этого сделать нельзя, но решения есть, и они зависят от конкретной ситуации. Чаще всего делают так #some:hover:after - hover срабатывает на псевдоэлементе, но также и на div.

Из вашего вопроса не совсем понятно: вы не можете придумать макет блока или всё-таки не можете сверстать такой блок?
На вашем месте я бы просмотрел скажем 30 сайтов новостных изданий и нажав F12, посмотрел реализацию.
Например, вот отсюда можете взять за основу блок section id="news"

У вас не правильно заданы float'ы. Нужно повторить материал о разметке на основе плавающих элементов и заодно о предотвращении выпадания блоков из потока (clearfix).
Есть хорошая статья "Всё о свойстве float"
Из O'Reilly рекомендую прочитать 12ую главу ("Разметка страницы на основе плавающих элементов" ) в книге "Большая книга CSS",
если хотите, можете закрепить эти навыки на hmlacademy (раздел сетки).

Что касается header, относительное позиционирование(relative) вложенного блока, не есть лучшее решение. Лучше сделать так

#icg{
    line-height: 200px; /* задаем для line-height такое же значению, как у высоты header. */
    padding-left: 120px;
}

jsfiddle.net/7yvorvwr/1

Посмотрите в сторону MCSS. Для небольших и средних проектов подходит больше, чем БЭМ.

Треугольник на CSS можете сгенерировать здесь cssarrowplease.com

Хотелось бы увидеть код..
Как вариант, попробуйте установить line-height:100% для input

Еще есть совсем не кроссбраузерное решение на CSS3. Режешь один спрайт и пишешь для него такой стиль:

.social {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: -webkit-filter 0.5s;
}
.social:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}