Using the CSS Designer Panel

If the Insert Menu is open, you may want to close it to provide more space for the CSS Designer panel. By dragging the boundary of the panel to the left, the properties section of the panel will move to the right in a second column. If the CSS Designer panel isn't showing, one can often click the icon at the far right top to open the panel. The CSS Designer Panel has four sections:

• Sources - this defines where the style will appear. Click in the + sign and the choice will be:
  • Create a New CSS file
  • Attach Existing CSS File
  • Define in Page (an embedded stylesheet)
• Media - this provides a way of adding media queries
• Selectors - class, id, or HTML tag - The tag selector can be used to specify a tag. The CSS Designer Panel will often suggest a contextual selector (e.g. body p). In this case, the presence of the body tag makes no difference, but one may often want to delete one of the selectors. If you want to create a class, type a period followed by the name of the class. For an id, type a # followed by the name of the id
• Properties - To apply a property to a selector, first click on the selector in the CSS Designer Panel and then move to the Properties section. At the top of the Properties section, there are icons representing five categories of properties (if these icons do not show up, uncheck the "Show Set" box at the far right)
  • Layout
  • Text
  • Border
  • Background
  • Custom
• While classes can be created in the CSS Designer Panel, to apply a class you have created, use the Properties Panel, not the CSS Designer Panel. In the Properties Panel, click on the HTML button at the left if it is not already selected. Then in your document, select what you want to apply the class to and then apply the class using the Class drop-down menu in the Properties Panel
• The styles for an id will be applied once you give an element the id, which you can do in the Properties Panel, again with the HTML button selected.

Revised October 17, 2017