What is CSS Code?

CSS stands for custom style sheets. CSS code or markup as some people call it enables you to style different elements of the HTML in your website once rendered by a browser.

CSS is generally included in your themes style.css file rather than inline (on each specific page). Including CSS in an external file named a style.css file enables you to change the styling (Appearance) of your entire website ‘site wide’, simply by editing the code in your style sheet.

You can also add CSS inline on a per page/posts basis however it is best practice to use external files or a Custom CSS file editor which is included in WordPress.

Better still, custom CSS should be added to a separate child theme so your custom coding won’t be overwritten when you update you parent theme.

CSS can be used to style different elements of your HTML.

If you understand the basics of HTML then you’ll be able to learn CSS fairly easily.

CSS contains at least 2 parts:

1. A Selector
2. At least 1 Declaration

Normally the selector is the HTML element you wish to style. In this case its the title as indicated by #title selector with blue text and using the Oswald font family.

There are 2 types of selectors

I.D – An I.D selector starts with a hash like #footer
Class – A class selector starts with a dot like .footer

Some themes run XHTML markup which uses I.D selectors and some of the newer themes run HTML 5 which uses class selectors.

Each declaration contains a Property & Value. Example: Color is the Property and Blue is the Value.

A Declaration must always end in a semicolon and the group of Declarations must be enclosed in Curly brackets like this:

Example of Class Selector

.site-title {
    font-family: Georgia;
    font-size:45px;
    color: #000
}

In this case, .site-title is the class selector so this CSS relates to styling the website title.

There are 3 declarations which tell the browser to display the title text using the font Georgia which is 45px in size and the color is black (using hex code #000)

CSS Box Model

Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
Border – A border that goes around the padding and content. The border is affected by the background color of the box
Padding – Clears an area around the content. The padding is affected by the background color of the box
Content – The content of the box, where text and images appear

Example:

.site-header {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
}

Changing Your Websites Styling

One of the best ways to change the appearance of your website is is to use a web development tool named Firebug.

Firebug is one of the most popular tool web designers use to customize a website.

One of the easiest ways to change the look and feel of a website is to use Firebug to copy the existing CSS code into a child theme. From there you can customize the different HTML elements by changing the property values of each selector.

Learning CSS

One of the best places to learn the basics of CSS and other code languages is W 3 Schools.