CSS stands for Cascading Style Sheets. Styles within CSS define how to display html elements, as well as other elements of a webpage. In this basics overview, we will focus on defining styles for html elements.
CSS provides consistency across an entire website. Use CSS to define how you want all your heading to bee displayed (font, color, font-size, etc.) Using CSS is an incredibly efficient way to manage the presentation of your site.
Editing CSS in WordPress
To edit CSS in WordPress, select Editor under the Appearance option from the Dashboard. Some themes, will have their own Edit CSS option as shown for the Genesis Theme. Or, themes may have their own Dashboard menu where you can select to edit CSS. Choose the theme’s option for editing CSS before selecting the Editor.
Note: If you are using a theme, you really don’t want to edit the theme’s CSS stylesheet, as with the next theme update, your changes will be wiped out. Instead, use the Theme’s menu to edit the CSS, or, if that isn’t available, create a child theme and edit the css within the child theme. This will keep all your CSS edit in check even with a new update to the theme.
When selecting Editor, the CSS stylesheet will open by default. If it doesn’t open, scroll to the bottom of the list of files on the right hand side and select the appropriate style sheet.
Structure of CSS
A style consists of a selector and one or more declarations. A declaration consists of a property and a value. The property must be a given CSS property. Refer to CSS cheatsheets for a list of properties and values. The syntax must follow the format show in the image above. The declarations can be in any order.
Removing and Default Settings
Usually the first style defined in a stylesheet is a style that removes the default settings of standard html tags. Below are two different styles declared at the beginning of their respective CSS stylesheets. Both of these options come from two different WordPress sites.
body, h1, h2, h2 a, h2 a:visited, h3, h4,
h5, h6, p, input, select, textarea {
color: #333;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: none;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
Both of these styles remove standard padding and margin settings for common html elements such as <p>, heading tags, lists, etc. These elements are considered block elements in the html world and, by default, include spacing above and below these types of elements. The two styles listed above remove the default settings by setting the properties padding and margin to 0. This gives you the option to set them yourself using CSS.
Other common declarations in the initial styles include setting the text options (font-family, font-size, color, line-height). The declaration font-family: inherit means it will pick up the font-family from the parent element – which may be the default font for the browser if no other font-family declarations are stated in the parent element. Line-height is another common property assigned via CSS. This is the spacing between lines of text.
For more information on starting a web page using CSS, see Starting a Page with CSS.
Formatting the Body Tag
Styling the body tag sets additional default parameters for your website. Common properties set within the body tag include the background color and text options, if they are not defined in the initial style as shown above. Here are two examples taken from two different WordPress sites:
body {
background-color: #593F12;
}
body {
background: #fff;
line-height: 1;
}
The background color is the color of the area outside of your content area. For example, if your webpage is 1000 pixels wide and the browser window is 1300 pixels wide, the extra 300 pixels (150 pixesl on each side) will be the background-color.
Formatting Lists
CSS can be used to define how you want lists (numbered and bulletted) to appear. The following styles are examples:
ol,
ol li,
ul,
ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
ol li {
list-style-type: decimal;
}
ul li {
list-style-type: square;
}
In the first style, the standard spacing at the top and bottom of lists are removed by setting the margin and padding to 0. This isn’t necessary if it was already done in the initial style to remove all standard formatting (see 2nd example in Removing and Setting Default Settings). The second and third styles define what to use as the bullet for numbered and bulleted lists, respectively. Refer to a CSS stylesheet for more options.???????????
Hyperlinks
The text color of your links and the default underline options for links can be set via CSS. The html anchor tag, <a>, is used to create hyperlinks. Anchor tags are unique in that they have different states. We have the default link state, but we also have visited links and ‘hovered’ links. Let’s look at how we use CSS to define these various states.
a,
a:visited {
color: #70160e;
text-decoration: none;
}
This sets the text color for links and visited links. Plus, it removes the default underline for links.
a:hover {
color: #fff;
text-decoration: underline;
}
This style defines the text color when the mouse hovers over the link. Plus, it removes the underline. The changing of the text color is a very common practice to indicate this is a hyperlink.
a img {
border: none;
}
This style removes the border that appears by default when making an image a hyperlink.
For more information on defining styles to format links using CSS, see Basic CSS for Links.
Setting Page Attributes through CSS
Although I won’t go into the detail about setting up sections (IDs) on a web page, I will introduce the concept here. Visit CSS Types: Tags, Classes, IDs to learn more about IDs.
A CSS ID defines a section of a web page. Usually, there is an outer container that holds all the content on a web page. Let’s look at a couple of examples of an outer container defined in CSS:
#wrap {
background-color: #fff;
border: solid 1px #ddd;
margin: 40px auto 40px;
width: 980px;
}
This is a very typical example of the common declarations when defining the content area of a website. The background color sets the background color behind the content. The width of the content area defines the width of the web page. This also helps offset the webpage within a browser window. The browser width can be more or less than the width of the content area. The border helps offset the content area from the background of the browser. (The background color of the browser window is set in the body style as mentioned in Formatting the Body Section above).
#page {
margin: 0 auto;
max-width: 1000px;
}
The margin defines the spacing around the web page. In this example, it is 0 pixels on the top and bottom and centered (auto) within the browser window.
For more information on creating sections (boxes) on a web page, visit Creating a Box in CSS. To learn more about nesting sections (main content area with a sidebar nested inside the entire content area), see Creating Nested Boxes in CSS.
If you are new to CSS, I highly recommend using the interactive tutorial over at W3Schools. Their interactive editor lets you practice CSS and see immediate results.
What other styles and properties have you edited or set via CSS? Are there specific styles or properties that you consistently update on a WordPress site?