Beginners CSS guide for WordPress
Necessary CSS Guide for WordPress beginners
CSS is an essential part of every website, controlling how individual elements of HTML look using a stylesheet. Headings, fonts, backgrounds and even how images are displayed can all be styled using CSS. While you don’t need to know everything about CSS to use WordPress successfully, knowing how elements are styled gives you much more control.
WHAT IS CSS?
CSS is a template dialect that depicts the introduction of a HTML (or XML) record. CSS depicts how components must be rendered on screen, and is planned fundamentally to empower the division of report content from archive introduction, including perspectives, for example, the format, hues, and textual styles.
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
Unlike HTML, you can’t see any of the CSS in the text view of a new post or page. To see the stylesheet currently being referenced by your theme, you will need to go to Appearance in the main Dashboard menu, and then click on Editor.
Once in the Editor screen, the CSS document will often be selected by default. If it isn’t, scroll down the list of template files on the right until you see “Stylesheet” or “Style.css”. Click this in the list to open it in the Editor window.
Scroll down the stylesheet and you will see the CSS QUICK REFERENCE individual CSS style elements. For example, “body” in the stylesheet controls the text that appears in your posts (text other than headings, links, etc). In the stylesheet shown here, only the colour is styled with a hex code.
If you wanted to change the overall colour of the body text for your website, all you would need to do is replace the current #f5f5f5 code with one of your own choosing. Once you have replaced the hexadecimal code, click the Update File button to apply the change.
If you now go back and preview your blog or website, you will see that the body text across the whole site has changed to the colour you chose, just by altering that single CSS tag. Although this is a simple example, it should show you the power of CSS.
The properties shown here are not a complete list, but do include most of the ones commonly found in basic stylesheets. If you are investigating the CSS of your WordPress blog, and come across a property you don’t recognise, this reference should help you out.
Color – Sets the colour of text
Opacity – Sets the opacity level for an element
Background – A shorthand property for setting all the background properties in one declaration
Background color – Specifies the background colour of an element
Background image – Specifies one or more background images for an element
Border – Sets all the border properties in one declaration
Border bottom – Sets all the bottom border properties in one declaration
Border top – Sets all the top border properties in one declaration
Border color – Sets the colour of the four borders
Margin – Sets all the margin properties in one declaration
Margin bottom – Sets the bottom margin of an element
Margin top – Sets the top margin of an element
Max height – Sets the maximum height of an element
Max width – Sets the maximum width of an element
Min height – Sets the minimum height of an element
Min width – Sets the minimum width of an element
Padding – Sets all the padding properties in one declaration
Padding bottom – Sets the bottom padding of an element
Padding top – Sets the top padding of an element
Position – Specifies the type of positioning method used for an element
Visibility – Specifies whether or not an element is visible
Z-index – Sets the stack order of a positioned element
Letter spacing – Increases or decreases the space between characters in a text
Line break – Specifies how/if to break lines
Line height – Sets the line height
Font – Sets all the font properties in one declaration
Font family – Specifies the font family for text (Helvetica, etc.)
Font size – Specifies the font size of text
Font weight – Specifies the weight of a font
List style – Sets all the properties for a list in one declaration
List style position – Specifies if the list-item markers appear inside or outside the content flow
List style type – Specifies the type of list-item marker