Как я изучал CSS будучи новичком в веб разработкой

Определение языка разметки CSS - каскадные таблицы стилей, язык описывающий внешний вид html страниц в браузере. Первое мое знакомство с CSS случилось в браузере, а именно консоли разработчиков Google (F12). Это крайне полезны инструмент в принципе для веб разработки, с его помощью можно легко посмотреть в браузере какие правила оформления (стили) присвоены тем или иным html тегам.

Ресурсы которые я рекомендую для изучения CSS

Сам постоянно пользуюсь, как памяткой, когда забываю свойства css или варианты значений. Рекомендую минимум для первичного знакомства и понимания что предоставляют данные ресурсы, а пользоваться ли ими решать лично каждому.

Классы, теги и айди для CSS стилизации

В CSS теги, айди и преимущественно классы используются для выделения элемента к которому будут применены правила css стилей. Для начала нужно понять как и где можно написать код CSS.

Небольшой блок html кода где можно увидеть как назначается id или класс. Самое важное id всегда должен быть уникальным, он не может быть присвоен нескольким элементам.
Класс - не должен быть уникальным и может присваиваться группе тегов, так же для тега может быть назначено несколько классов, таким способом можно группировать css стили.

                        
                            <h1 id="айди1">Какой то текст</h1> 

                            <h2 class="класс1">Какой то текст2</h1> 

                            <h2 id="айди2" class="класс1 класс2">Какой то текст3</h1>

Способы подключения таблицы стилей css

Создать отдельный файл в расширении .css и подключить его к странице сайта.


                                <link rel="stylesheet" href="путь до файла/style.css">

В html странице добавить тег <style>CSS код</style> и внутри него описать css стили

                            
                                <style> 

                                .Класс { 

                                   правило : значение;

                                } 

                                </style>

В атрибуте html тегов <тег style="CSS код">


                                <h1 style="правило : значение;">Какой то текст</h1>

Первые два варианта очень похожи по стилю написания самого css кода. Отличается только то как подключается к странице сам css код, отдельный документ или тег. Последний вариант отличается значительнее, в этом случае css стили назначаются только на тот элемент в атрибуте которого установлены правила, если же назначить правила на класс или тег, правила будут применяться ко всем элементам имеющие тот же класс или тег.

Различные способы написания стилей используются по ситуации, основной блок предпочтительно писать в отдельном файле и подключать его к странице. Далее будем говорить про этот способ подключения.

Основы CSS для чайника

Постараюсь максимально подробно рассказать, как выглядит блок css кода и как его понимать.

Элемент на который применяется стиль
{} - в нутри фигурных скобок описываются css правила и свойства / значения

                        
                            .Класс { 

                               правило : значение;

                            }

Поскольку в css можно добавить стили как тегам, айди так и классам, для обозначения и отличия их в синтаксисе css используются спец символы.

Точка "." - Используется для обозначения класса полная запись ".НазваниеКласса".
Диез/шарп "#" - Символ обозначения id html элемента "#НазваниеАйди".
Название тега - название тега используется без дополнительных символов, только точное название тега.

Всех css свойст огромное множество, врятли получится все быстро выучить и помнить возможности их сочитаний. Как и с началом изучения html придется не мало практиковаться чтобы привыкнуть к основным возможностям css и часто прибегать к документации или консноли разработчика, чтобы посмотреть подсказки, или опробовать некоторые свойства перед их записью в файл. Но давайте посмотрим на практике

Основы CSS простешие примеры применения стилей

Я покажу несколько примеров как это выглядело бы в коде и как это будет выглядеть на странице сайта.

                        
                            <style> 

                            input { 

                                   border-radius : 10px;

                                   padding : 5px;

                            } 

                            .class1 { 

                               height: 50px;

                            } 

                            </style> 

                            <div> 

                                <input type="text" placeholder="type='text'"><br>

                                <input type="text" class="class1" placeholder="class='class1'"> 

                            </div>

И вот как это выглядит на сайте.

Обратите внимание, стиль который был определен для тега <input> подействовал на оба элемента, а стиль присвоенный только для class1 подействовал только на второй элемент. Давайте разберем свойства и значения в данном примере.

Свойство "border-radius" - скругления углов блока в данном случае <input> в размере 10 пикселей. "padding:5px" - внутренний отступ 5 пискелей. И последний "height: 50px" - высота блока 50 пикселей.

Так же рассмотрим немного консоль разработчика и основыне элементы на примере одного input

Еще небольшой пример CSS чтобы вникнуть

                        
                            <style> 

                            button { 

                                   display:block;

                                   margin-bottom:10px;

                                   font-size:20px;

                            } 

                            .classButton { 

                                   color:red;

                                   padding: 0 40px;

                            } 

                            </style> 

                            <div> 

                                <button>Кнопака</button><br>

                                <button id="idbut">Кнопка2</button>

                            </div>

Вот еще одна демонстрация применения стилей к тегу и к классу. В этот раз я применял другие стили, эффект данных свойств можно увидеть в демонстрации. Обязательно изучите как можно больше различных свойств css стилей и практикуйтесь, прописывая каждое свойство в своих экспериментах.

Заключение CCS для чайников

Даннная статья была создана для ознакомительных целей в качестве первого знакомства с языком стилей CSS. Для тех кто еще не знаком веб разработкой но проявляет первый интерес. Делюсь своим небольшим опытом. CSS неразрывно связан с html и изучение одного подразумевает изучение второго.

Возможно в будующем я сделаю специальный раздел сайта где буду разбираться все css свойства.

П.С. Так же рассматривате для визуального предпросмотра эффекта css свойств, на элементы, CSS генераторы кода. В свое время я делал подобный мини сайт в целях самоизучения Javascrip. Кстати да, просто прочитать статью, разде сайта, книгу по языку программирования, думаю не достаточно, даже с примерами и повтороением этих примеров. Я думаю самое эффективное это придумать свой проект, читать как решить поставленные задачи или возникшие проблемы. Мой css генератор.