31
Jul

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.

Key Points:

  • 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

 

Setp-1:CSS_guide_2

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.

 

 

 

Step-2:

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.

 

 

Step-3:CSS_guide_4

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.

 

Step-4:CSS_guide_5

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.

 

Step-5:

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.

 

CSS REFERENCE:

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