# Parent and Child | Basic Rules for .css #### To link a .css from the .html Add the script into the <header> bock. ```html ``` Include your own file source location (href=) Learn more here: [https://www.codemahal.com/parent-and-child-elements-in-css](https://www.codemahal.com/parent-and-child-elements-in-css) --- ### Understanding parents and what the child belongs to #### Parent starts with the main block. First off, the parent and child relationship in the .css start at the html level. You determine the parents in css, referencing the html tags. ```html Document

This is not inside a div

This is totally inside a div

This text is within a div, within a class

This has a class and is also within a div, with a glass

``` A parent is the level above any tag. If a tag can go up a tag level, then it is a child. Childs can be a parent of another child. ```html

This is not inside a div

This is totally inside a div

This text is within a div, within a class

This has a class and is also within a div, with a glass

``` To call the tags in order in css, you want to start from parent, to 1st child, to 2nd child, to 3rd child, and so on. On the .css, you will tag it from left, to right. Parent to ----- last child. [![css4101023.jpg](https://wiki.danicus.net/uploads/images/gallery/2023-10/scaled-1680-/3QCI5Fbm7nq1sLM7-css4101023.jpg)](https://wiki.danicus.net/uploads/images/gallery/2023-10/3QCI5Fbm7nq1sLM7-css4101023.jpg) --- Starting the .css script with no dot "." will call out to the main tag that it refers to in the html. ```css p { color: blue; } ``` [![css1101023.jpg](https://wiki.danicus.net/uploads/images/gallery/2023-10/scaled-1680-/V26bUvt9YZwUCYhc-css1101023.jpg)](https://wiki.danicus.net/uploads/images/gallery/2023-10/V26bUvt9YZwUCYhc-css1101023.jpg) This will happen because the parents are being referenced and parents take priority. It is ignoring the classes: [![css2101023.jpg](https://wiki.danicus.net/uploads/images/gallery/2023-10/scaled-1680-/oVvmRyxEdnoGH4OZ-css2101023.jpg)](https://wiki.danicus.net/uploads/images/gallery/2023-10/oVvmRyxEdnoGH4OZ-css2101023.jpg) To use the first level classes, refer to the class, then the parent: [![css3101023.jpg](https://wiki.danicus.net/uploads/images/gallery/2023-10/scaled-1680-/GM69EzyBQ6ULfaBv-css3101023.jpg)](https://wiki.danicus.net/uploads/images/gallery/2023-10/GM69EzyBQ6ULfaBv-css3101023.jpg) In the above. ANY "p" (paragraphs) that belong to .first-class will be green.