CSS is a deceptively simple presentation language that has significantly developed over the last few years. Front-end developers need to keep style sheets manageable and organized by taking a modular approach to building a website.
Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.
In this Video Learning Path, we start off with a brief review of the foundations of CSS by using a good text editor to automate your authoring and set up a CSS baseline.
We then move on to explore the power of CSS3 selectors and how they can be intelligently leveraged to create powerful interactive sites.
As we proceed, we'll master the usage of a wide array of selector techniques and tricks, manipulating inner content, understanding structural selectors, and more.
By the end of this Video Learning Path, you’ll have complete control over every element of your web page to make it behave exactly the way you want it to.
This Learning Path is authored by some of the best in the field.
About the Authors
Rich Finelli is a husband and a father living in Piscataway, NJ, working as a frontend developer. He’s truly passionate and excited for all frontend technologies and enjoys learning about web design and development.
Ben Fhala discovered his passion for data visualization seven years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.
The course needs a summary that describes what will be learned over the course of each
In order to style websites with CSS, you must
All CSS elements conform to a box model. If the box model isn’t understood completely, CSS cannot be mastered. The same goes with block and inline elements.
Writing code is error prone and hard; a good text editor like Sublime Text 3 solves this problem.
Browsers add a lot of default styling, especially margins and padding. A nice CSS reset can solve this and allow you to provide the styling.
CSS doesn’t always work without failing. Usually,it’s a tiny overlooked mistake that causes something not to work and is hard to find and fix. Enter the Chrome Dev Tools.
CSS allows you to position, style, and control elements on a page. What if you want to style one div differently than anoth-er?You can name an element with a class.
Renaming elements with classes is an extremely powerful feature in CSS. However, this is not the only way to target a spe-cific type of element. Descendant selectors allow you to target elements on a page based on their parent element.
How to have text flow around an image? The ori-gin of floats.
How do we create a page layout without abusing tables? Using Floats.
When all elements inside a container are floated, the container "collapses." We’ll go over three
Buttons appear all over a site (Go Premium, Learn More, Submit, and so on) and usually have the same general style but vary in things such as color, width, and position. Creating modular lightweight classes to handle this variation can be very efficient.
Buttons vary throughout the site, but a good portion of the button style remains the same. Multiple classes on an element will allow varia-tion in our style with an object-oriented approach.
Understanding which selectors overrule other selectors can be confusing. Throughout a site, overriding styles tends to be common, so understanding specificity and weight is important.
Creating an added expe-rience layer, transitioning elements from the default to hover state and vice versa.
CSS3 allows us to transform elements like never before.
Most sites need a call to action button to drive users toward a desired result.
Writing gradient syntax by hand is lengthy and difficult. Use an online tool to automate it.
How to target elements based on their order of appearance without adding a class to the HTML.
How to get the shark positioned properly,and how to get the menu to be “sticky” to the top and always visible.
How do we build the drop-down menu?
Need to smoothly animate the drop-down menu sliding down.
In the previous video, we explained the surface of animations, in this video; we will take a deeper dive into what animations can do.
We have a z-index bug, and we need the box shadow and the navigation on all pages.
How to make images squishy like our content.
Media QueriesHow to fix remaining issues with the site at narrower widths.
The navigation really is terrible looking at mobile widths, and we need a design pattern that will withstand adding more menu items.
Need to test a device on a phone.
There were only so many “web safe” fonts out there until Web Fonts came along.
It's kind of hard to make Web Fonts work in all browsers by yourself. Here’s how font kits solve this when hosting your own web fonts.
Where can youget free quality web fonts?
How do youobtain fonts that aren’t free? Through subscription font foundries.
Have a lot of solid color images or icons on your site and want to reduce the number of http requests? Icon Fonts can help.
Retina devices make our images look blurry. We need to supply larger images.
Double-sized images can be 3-4 times as large as their regular sized counterpart. Creating two images to account for retina and non-retina is a lot of work. There is a middle ground: 1.5x images.
How do we account for background images on retina?
We don’t have a perfect solution to the retina trials and tribulations, but SVG is pretty darn good.
We need to know what it is what It solves, and key terminology.
We’re starting with a float based layout, how do we switch to flex-box?
Need to understand the options for sizing flex-items.
Need to continue to under-stand ways to position and size flex items.
What else can we build with flexbox?
Need ability to have multi-ple rows and to arrange/align those rows.
Responsive designs sometimes need the ability to change display order.
There are too many vendor prefixes to add to get deep flexbox support.
A recap of site and recommended links for further learning.
Let's start exploring the world of selectors with a quick overview of the basic selector types and the joker card/selector.
Let’s turn our attention to the actions related to pseudo classes. By the end of this video, you will know how to control the colors of actions and links in CSS and be up-to-date with the changes that have taken place in them.
We will now move on to the world of attributes, where we will stay in the next two videos. By the end of this video, you will know how to work with CSS2 Attribute Selectors.
In this video, we will explore the new CSS3 attribute selectors. By the end of this video, you will know how to work with the new CSS3 attribute selectors.
You might speak only one language, but there are differences in the way users expect content to look like when they are from different countries. The language attribute enables you to create small custom rules that will apply to specific sublanguages at ease without you having to create separate pages for each sublanguage. By the end of this video, you will know the basics of how to work with the lang attribute in HTML and the lang-CSS selector.
So far, in our journey into the world of CSS3 selectors, we came across many selectors that help us find an item by explicitly trying to configure that item. In this video, we will have a reversal in the CSS selection logic by weeding out content based on what it's not.
Combinator selectors have been around since CSS2 and have been enhanced in CSS3. Through the usage of combinator selectors, we can drastically reduce the amount of classes that we use in an application. Combinator selectors enable us to define rules based on the relations of an item to its parent, the immediate adjacent item, or even a further removed preceding item. By the end of this video, you will know how to work with the Combinator selectors.
In this video, you will know how to dynamically add anything to your HTML content before or after the element using the CSS2 content-adding selectors.
In this video, we will continue to explore two more selectors that enable us to select a part of the content in a page. Both the selectors were added in CSS1; they enable us to change the style of the first letter in an element or the entire line. By the end of this video, you will know how to work with the ::first-letter and ::first-line CSS1 selectors.
One of the coolest new selectors in CSS3 is the target selector. The target selector enables you to control the styling of an item that is the focus of a hashtag link. With the new CSS target selector, we can now help viewers by highlighting the selected area, making it much more easy to find them.
When it comes to creating smart and dynamic layouts, one of the more powerful features that was first introduced in CSS2 was the :first-child selector, which enabled us to do something with the first child in a group of elements. CSS3 takes that idea and pushes its further with more structural controls.
In this last video of the course, we will take a look at a few more structural selectors that we didn't cover yet, as we compare the differences between only-child and only-of-type.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.