My ‘ah ha’ Moment with CSS

I haven’t had any formal training or education on CSS. I’ve just been going through Code Academy courses and minor tinkering with various websites. Before I get to my ‘ah ha’ moment, let’s begin this post with some basic information about HTML and CSS that I’ve learned from Code Academy.

Tags

  • They are HTML elements such as <body> </body> or <p> </p>. Lesson one I learned while working on a website: ALWAYS close a tag if there is an opening tag!
  • The text between an opening <body> tag and a closing </body> tag is for content, while <p> </p> is for paragraphs. Within a body there could be a title, multiple paragraphs, links, images, etc.- all are tags that can be used to separate the content to be styled using CSS.

CSS Syntax

selector{

property: value(s);

}

  • I like using this outline where the selector is on top with a { then on the second line with the property and value and finally on with a } on the last line. This is just my personal preference. You can use: selector{property:value(s);} or whatever you want to but its important to keep the syntax the same.
  • A selector is the tag that you want to style such as p for paragraph. The selector tells a browser where there are different styles.
  • Properties are things like font-size, font-family, color, border, margin and so on and so forth. This is tells a browser what to change about the content.
  • The value is usually a number, a color, or a keyword; Values give instructions on how to change the text, image, url, whatever is within the tag. For example, if I want to have all the text that are tagged with <p> </p> on my website to have size 14px, Verdana, #00ffc3 and all uppercase font this is what it should look like on the CSS style sheet:

 p{

font-size: 14 px;

font-family: Verdana;

color: #00ffc3;

font-transform: uppercase;

}

  •  Also, it is important to put semi-colons after each CSS attribute (even after the last one, not necessary but a good habit to pick up) so a browser knows where to separate and end instructions for that property; much like a period in reading a sentence.

Ok, here is where I will begin telling my “ah ha” story. So in my online courses I have been just doing CSS examples using basic tags such as body, title, p, div… Pretty easy stuff to follow. So, I was given a task to add and style a specific page on a working website. <div> </div> tags became are more unique and are defined. I haven’t reached this topic in Code Academy, so on to Google I went. I had no idea what <p class= “content”> or <div id=”top”> meant. Here is what I learned from the searches:

  • Classes and IDs give you the ability to specifically define a selector. This allows you to have the same HTML element, but style it differently depending on its class or ID.

Using HTML you can define a selector tag with a unique class or ID and you can go back in the CSS style sheet to change those properties to different ones. In the CSS, a class selector is a name preceded by a . and an ID selector is a name preceded by a #. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. Classes are useful when you have a bunch of elements that should all receive the same styling.

Look at this example:

In HTML:

<div id=”content”>

<div class=”comments”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet neque turpis.</p>

</div>

</div>

In CSS:

#content .comments{
padding-right: 85px;
padding-top: 20px;
}

This code tells a browser to use whatever styles that have been previously coded to the page but override whatever padding that was there to use these new rules/instructions.

Ah! Makes so much sense! So very useful to break up the content of a page to give HTML elements different looks.

The_Idiot

About Lindsay

Self made millionaire.. Oops I mean web developer.. who started out learning how to build websites with tables and dreamweaver, I now almost entirely focus on CMS-based development, usually WordPress. I love coding and designing and regularly switch between my left and right brains.

One thought on “My ‘ah ha’ Moment with CSS

  1. You could definitely see your skills in the paintings you write. The world hopes for even more passionate writers like you who aren’t afraid to mention how they believe. All the time go after your heart. “There are only two industries that refer to their customers as users.” by Edward Tufte.
    google http://icualarms.co.uk/wp-includes/blogspot10.php

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">