Standing for Cascading stylesheet, CSS is used to style the visual apperance of a html document. It's a cascading because it arranges elements appear as we want. CSS is mainatined by the W3C organization who publishes it's especifications(A document containing how it's suppose to behave).

the first thing to do in css is to tell that there is some css code to implement to our page. there are 3 ways to do it.

1. <link rel="stylesheet" href="styles.css"> This line of code is put in the head tag and is one of the ways to declare that we have a css. The quotation in href contains the name of the css document which contains our csss.

To style html, we target certain, or multiple elememts. for example, to change the color of every p tag in the page:

p in here is the selecter.

Browsers, by defeult, add styling. That is why lists show up in bullets to begin with without we adding style. We can, however, modify that imnnate style rendered by the bnrowser. For example, you can remove the bullets of li by:
>

Sometimes, we not only want styling certain elements of our page, such as all p tags, but we also want to apply a style to a subset of an element, like some of the p tags and not the others. this is why classes exit. You add a class="name" to the inside of the opening tags of the elements you need to add to your class. Later in the css, you cna target that class using the name u gave it. For example
:

Is a code that targets only the elements containing the class myclass. If you added this class to say, some li and p tags, and u only want to target the ptags this time. Your selecter know becomes:
p.myClass
>

There are several ways to achieve this. (a) the descendant combinator. The code

Changes the color of emphasis tag. only within an li. The em is a decendent of li.(b)Adjacent Sibling Combinator(+). The code:

An element has states. For instance, wether it's being hovered over, was visited focused via keyboard and so on. Below, we style visited links green, unvisited once blue and hovered oevr once yellow.

You can combine the concepts above and be very abstract.s

There are some functions(methods who do things) in CSS. For example, the culc function which allows you to do simple math with CSS. For example:

gives the inner box is 90% of the containing element width -30 pixels. Another example is the values of the transform property. For example, transform: rotate(0.8turn);, which rotates it clockwise 80%; of a turn.

The at-rules are especiel rules that instruct CSS hwo to behave. Take for example:

which simpy tells css to also follow the rules the file styles2.css

Another example is the @media rule, which allows you to use media quries to apply CSS only when certian conditions are true. Case in point:

The CSS encapsulated by the @media (min-width: 30em) selecter. with viewport more than 30. A vieport is the part of the page visible to teh browser. When em is used in properties like font-size: 2em, it makes the fot size of the respective element twice it's parent.

Further, when loading a css we can either load it or not based on an attribute called media with value = "screen and (max-device-width: 40px)"

Some proeprties like font, background, padding, border are known as shorthands because the allow you set multiple proeprty values in a single line. For instance
:

When tou come back to your code days later, you might not undrstand at all what your code. That is why we have comments, to explain code, in programming languages. In CSS, it's syntax is: /*The comment goes here*/

You don't have to write each proeprty and it's value in it's own line. You can justw rite another proeprty-value pair next to closing semicolon, and anotehr one and then anotether one. Although, each team and individual have their own prefreneces, it looks betetr to read the first.

Although it's very detailed, what you need to know mostly is that it can be used for multi column layouts with a bit of finicking.

By default elements are static. Just note that it's better to set the property box-sizing to border-box, that way any element will have nothing but your specifieid width.

This is a 2d grid system working with columns and rows. Here is how it works:

Focus on efficiency and efefctiveness in which users cna use yoursite, then worry about the style.

Media Quiries explaiend in @ rules ablove And Fluid layout deisgn(to use % instead of fixed px).