Join Chris Converse for an in-depth discussion in this video Getting CSS for multiple layers, part of Design the Web: Getting CSS from Photoshop.
- View Offline
…Now so far in the course, we've gotten…CSS properties from individual layers inside of Photoshop, but…another feature is we can get a series of layers if we copy CSS from a layer group.…Now, I also want to coordinate our Photoshop…file a little bit with our HTML file.…So, let's switch back over to the exercise files and let's go inside folder…three, called Layer Groups, and let's open up layergroup.html up in our text editor.…Now inside of the HTML file, down here in the body area,…I've already set up some HTML.…I've a div container here, which…is encompassing all of these individual elements.…
We have a div with a class of image, a paragraph tag with a class of…heading, another one with a class of content,…and a third one with a class of link.…Now, this content looks very similar to what we have inside of Photoshop already.…So, what we're going to do is switch back to Photoshop and…coordinate the names of the layers to match these class names.…Now back in…Photoshop, to make sure that Photoshop writes the CSS with…
Note: If you don't have any HTML files of your own, Chris has provided free files to all members of the library, so you can get hands-on experience integrating the CSS.
The Design the Web series was created and produced by Chris Converse. We are honored to host this content in our library.