Join James Williamson for an in-depth discussion in this video How browsers apply styles, part of CSS Fundamentals.
- View Offline
- While CSS syntax is relatively simple,…the styles themselves, and the pages…that they control, can get rather complex.…As sites become larger and more complex,…it becomes more difficult to keep…styles from conflicting with one another.…This can lead to bloated code,…inefficient CSS, or styles that simply…just don't work.…In order to confidently navigate more…complex page structure, you need to…understand how browsers apply styles.…Once you understand the rules of…style rendering, it becomes much…easier to write organized and efficient CSS.…
First, I wanna take a look at how browsers…read selectors.…You and I are probably used to reading…selectors from left to right.…Now, take the following selector.…This tells the browser to find any text…within a span tag, which is also…inside of a paragraph tag, which is…also found within a div tag, which is…also found within an element with…an ID of main content.…Now, the browser, however, reads this…from right to left.…In this case, the browser would first…find all of the span tags within the page.…
CSS Fundamentals covers the basic concepts, terminology, and techniques you need to read and write CSS. It's for people who want a big-picture overview before taking hands-on courses. Author James Williamson explains how CSS affects text, borders, backgrounds, and images; how CSS works with HTML; and how the W3C's evolving CSS specification impacts designers. He also reviews some of the most popular CSS editors and frameworks and lists online tools and resources for further study.
- What is CSS?
- Basic selector types
- Using CSS with HTML
- How browsers render CSS differently
- Exploring CSS specifications
- Checking browser support
- Working with fonts
- Understanding the box model
- Adjusting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids