CSS can be written in 3 ways.
We should use External CSS and not use Inline or Internal CSS cause its best practice.
CSS selectors are used to select the content you want to style. CSS selectors select HTML elements according to its id, class, type, attribute etc. There are different types of CSS selectors but the main ones are.
The difference between Class and Id is that - Class selects all the elements and ID does not. For eg - In the above list all the items are blue in color except the ID selector. More about selectors here - MDN
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
For example, :hover can be used to change a button's color when the user's pointer hovers over it.
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but
also in relation to external factors. A single colon (:) is used for pseudo classes. Example hover over below
paragraph.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo sint illo facilis odit. Illum, fuga perferendis aliquam debitis, qui nulla excepturi asperiores provident molestias impedit sed ut odit delectus ea. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo sint illo facilis odit. Illum, fuga perferendis aliquam debitis, qui nulla excepturi asperiores provident molestias impedit sed ut odit delectus ea.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected
element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. A double
colon :: is used for pseudo elements. Example below.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo sint illo facilis odit. Illum, fuga perferendis aliquam debitis, qui nulla excepturi asperiores provident molestias impedit sed ut odit delectus ea. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo sint illo facilis odit. Illum, fuga perferendis aliquam debitis, qui nulla excepturi asperiores provident molestias impedit sed ut odit delectus ea.
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
The general hierarchy is - Inline Styles > ID > Class, attributes and pseudo-classes > Elements and pseudo-elements
Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy. For example check out css code for below 2 paras. Both have same styling but 1 uses Shorthand.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla a asperiores vitae, cupiditate quia corporis obcaecati saepe voluptatem quas, voluptates minus ipsum voluptatum quae deleniti enim recusandae nemo beatae nostrum.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, cumque. Numquam dignissimos error itaque quisquam dolor laudantium eos iste sapiente velit deserunt architecto quasi, voluptatum libero excepturi animi. Error, minus!
Attribute Selector is used to select an element with some specific attribute or attribute value. It is an excellent way to style the HTML elements by grouping them based on some specific attributes and the attribute selector will select those elements with similar attributes. Example below 2 paras. There are different options you can apply to attribute selectors check them out here.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus et cum voluptatum est dolore ullam, quod recusandae dolores laudantium amet rerum eius alias aliquid eveniet labore beatae nesciunt impedit architecto.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus libero quis aperiam. Veritatis voluptates incidunt tempore repellat autem commodi, facilis sapiente ut nobis ipsum, aliquid, ab eos optio minima iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis modi sunt voluptate cumque eum rem magnam exercitationem aliquid esse ratione consequuntur quia placeat, aliquam velit cum sapiente, eius nisi asperiores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis modi sunt voluptate cumque eum rem magnam exercitationem aliquid esse ratione consequuntur quia placeat, aliquam velit cum sapiente, eius nisi asperiores.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis modi sunt voluptate cumque eum rem magnam exercitationem aliquid esse ratione consequuntur quia placeat, aliquam velit cum sapiente, eius nisi asperiores.