The following notes are from a presentation that I gave at the WordPress Ninjas Meetup Group on March 12, 2018.
WordPress CSS
CSS is the code that control how text is sized, fonts are colored and pages are laid out with columns. The flexibility of the things that you can do to a standard template to ad a little personality to or style based on your colors and fonts is invaluable.
CSS Structure
Here is an example of CSS from the style.css file from the 2017 theme installed with WordPress.
.entry-title a {
color: #333;
text-decoration: none;
margin-left: -2px;
}
- This style is being applied to the “.entry-title a” this is the title of a post that has a link applied.
- Note that there is a { following the “a” and that there is another } following the margin-left. In a style sheet there will always be { } that contain the modifiers for the target element.
- Also note that there are are also two other characters that each modifier will contain. Note the “:” and the “;”. NOTE: if you forget to apply the “;” at the end of a line, anything following that will be ignored until the browser reaches a “}”.
<div> and <span>
The two selectors are what allows you to define custom modifiers to your CSS. Most commonly the <div> is used to define a container or section of a page, like a nav bar, content area or footer. The <div> can be nested within another <div>.
The <span> is used to mark a selection of text or other element. One example that I shared was setting up a span that would wrap the company name within the content of a page. For example:
<p><span id="company_name">NosalCentral</span> is a great SEO company.</p>