CSS for Beginner’s

WHAT IS CSS?

CSS stands for Cascading Style Sheet. Where HTML is what defines the structure and content of a web page, a Cascading Style Sheet is a web document that allows you to change the appearance of the HTML.

CSS allows you to change the size, style, font, and color of text; margins and padding; background colors and border styles. It can also be used to position elements on a page

ONE BIG ADVANTAGE OF CSS IS CONSISTENCY

The best of css is that you can do global changes, lets say that you want all the text to be the same for the webpage, this can be done just with few lines of code. You can have all paragraph have a different font than the Titles, etc.

This is really good as a web page that have no consistency tends to be really messy and ugly to they eye.

HOW DOES CSS WORK?

THE CASCADE

One of the most important pieces of CSS is the “Cascading” part. The browser reads style definitions from the top to the bottom in a style sheet. This means that any style you define lower in the style sheet will override any style defined earlier in the style sheet.

For example, let’s say that you first make the background of the navigation bar green and 2 lines under that you make it black. When the page is loaded the navigation bar will be black.

You can also have a style sheet override another style sheet. This is how we are able to override predefined style from our blog themes or plugin widgets, as our custom style sheet is usually the last one read by the browser.

HOW CSS IS APPLIED

CSS is applied to HTML elements in a web page by declaring specific styles for each element. A style declaration looks like this:

selector {
     property: value;
}

Selector

The selector is the piece of content that we want to target and style. It is either an HTML element or a Class Name.

When defining an HTML element, we use the tag name without the opening and closing bracket. For example, the <p> (or paragraph tag) would simply be:

p

A Class Name always begins with a dot. For example,

.big-font

We’ll get more into classes in a bit.

Property

Properties and their respective values always live within curly braces:

p {
}

Properties are predefined terms within CSS that all web browsers understand. They are things like:

font-family, font-size, color, etc.

p {
     font-family: 
     font-size: 
     color: 
}

A property is always followed by a colon (:)

Value

The value is the particular style or variable you choose to assign to a property. For example:

p {
     font-family: Arial;
     font-size: 16px;
     color: gray;
}

A value is always followed by a semi-colon (;)

So the example above tells the browser that we want all of our page titles (or any element surrounded by an <p> tag) to be displayed in Arial font at 16 pixels in size and in the color gray.

Pretty easy, right? Let’s do another one.

a {
     color: pink;
     font-weight: bold;
     text-decoration: none;
}

This example tells the browser to make all links (anchor tags that look like this: <a>) within our blog the color pink, bold, and not underlined. (Browsers by default display links in blue with an underline).

text-decoration: is a predefined property that all browsers understand. I wish it was something easy like underline: but it’s not. After using CSS for a while, you begin to memorize the more common properties.

DEFINING MULTIPLE ELEMENTS

Now, let’s do a look at a shorcut. Let’s say you want to use the same font, color, etc. for your h1, h2 and h3.You can make a repetition and define it each HTML element separately like this…

h1 {
     font-family: Lato;
     font-size: 24px;
     color: green;
}
h2 {
     font-family: Lato;
     font-size: 20px;
     color: green;
}
h3 {
     font-family: Lato;
     font-size: 18px;
     color: green;
}

…but since all three tags share the same font-family and color values, that creates a lot of repetition. Instead we can define multiple HTML elements together be separating them with commas, like this:

h1, h2, h3 {
    font-family: Lato;
    font-size: 24px;
    color: green;
}

Then if we want different font-size for the h2 and h3 we just need to overwrite it like…

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

Here you can see what we talk about “Cascading”, we just overwrite our previous code to make sure they are what you expect them to be. We do it like this because we don’t want to have repetition in our code and it gets messy really quickly as a website can have multiple hundreds of lines of code.

CSS CLASSES

Now let’s say you didn’t want certain images on your web page to have a border on them, like your icons for example. We can add a class to those elements in the HTML to specifically target them. We add a class like this:

<img src="image/twitter-icon.png" class="icons" />

You can name a class whatever you want, you just want to name it something that makes sense. Also note that there are never any spaces in class names.

In CSS, all class names begin with a dot. Now we go back into the CSS and add the following after the previous image style (defined above) so that it’s overridden:

.icons {
     border: none;
}

This will tell the browser to only apply this style declaration to image tags with the class “icons” added to it.

You can actually add this class to any HTML element that you don’t want a border around.

TROUBLESHOOTING AND COMMON SYNTAX ERRORS

Here are some common error we all make:

• Check your style sheet for missing semi-colons, spelling errors or missing opening and closing curly braces.
• Did you forget the dot before a class name or add a dot before an HTML element?
• Are there commas between multiple selectors?

Your error may be in your HTML:

• Did you follow the word ‘class’ with an equal sign and no spaces?
• Did you surround the class name with double quotes?
• Is the class name spelled exactly the same in the HTML as it is in the CSS?