Introduction

In order to start Learning CSS from the Beginning, I have been working on a respected Lynda.com course called ‘CSS Essential Training  by Christina Truong.’ This course came recommended to me and has really delivered on its content and a natural progression from my previous Lynda HTML course.

Let’s start from the beginning.

External CSS

  • This is a separate CSS file that has a  .css  file extension.
  • Always referenced within the <head>
  • Uses the  <link> and two attributes  rel="" and  href=""
  • Put Just before the closing head tag.
  • <link rel=”stylesheet” href=”style.css”> <!– HTML5 –>
<link rel="stylesheet" href="style.css"> <!-- HTML5 -->

<link rel="stylesheet" type="text/css" href="style.css"> <!-- XHTML -->

Internal CSS

Internal CSS uses  <style> tag, included in the  <head> element.

<head>
  <title>Page Title</title>
    <style>
      p {
        color: red;
      }
    </style>
</head>

Inline CSS

Inline CSS is added using the style attribute:

<p style="color: green;">This paragraph is green.</p>

Pseudo-Class Selectors

  • Pseudo-class selectors specify a state of the element
  • Keywords are combined with another selector using a colon.
<a href="http://website.com">Link</a>

a:hover {
  color:red;   /*link will turn red upon mouse pointer hover*/
}

Other pseudo-class selectors include:

a:link { }

a:visited { }

a:hover, a:focus { }

a:active { }

These pseudo selectors are order specific and often remembered using the words LoVe HAte (LVHA).

Classes and ID’s

The class selector is used for more specific styles that can also be applied to different elements, one or more times per page.

.highlight {  /*class is represented by a period (.) */
  color:yellow;
}

<p class="highlight">This text is yellow</p>

The ID selector can only be used once per page and are used for unique and global styles that are not repeated.

#footer-global {   /* ID is represented by the hash symbol (#) */
  background: green;
}

<footer id="footer-global">
  <p>A line of text</p>
</footer>

CSS Commenting

CSS comments start with a slash and asterisk and must close in the opposite order.

/* This is a CSS comment */

Comments are used to leave notes for the benefit of yourself, as well as other developers. The can also be used to temporarily disable code (commenting out).

CSS Color Values

Color values can be displayed in three different ways.

  1. Keywords
  2. Hex Code
  3. RGB
color: brown;  /*keyword*/

color: #000000;  /*hex code*/

color: rgb(0,0,0);  /*RGB*/

CSS Specificity Rankings

The selector with the higher specificity ranking will always take precedence and be applied first.

  • Type selectors (example – h1) – Lowest
  • Class selectors
  • ID selectors – Highest
h1 {
  color: orange;
}

.classname {
   color: red;  /* this is the higher specificity ranking and will be applied first */
}

The Box Model

  • Width and height:  Specific size setting for the content box.
  • Padding: Space inside the element.
  • Margin: Space outside the element.
  • Border: Display area between the margin and padding.

Clearfix Hack

A clearfix will allow an element to clear its child elements automatically. This happens when all elements within a parent container are being floated and cause the container to collapse.

One solution is to use the clearfix hack:

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

<div class="parent clearfix">
  <p>first floated element</p>
  <p>second floated element</p>
</div>

The use of floats is becoming more discouraged these days now that web layout models such as Flexbox are increasing in popularity. Floats can still be a powerful approach though and should be in the toolkit.

The Box Model Fix

The  box-sizing property will allow the total height and width of the element to include any added border and padding. The visible content area will become smaller to maintain the overall size.

/* border box fix */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Conclusion

Although I have learned other concepts throughout this course, some are too in-depth to cover in a single blog post. A lot of ground has been covered here, and I hope you find this information useful. Code snippets were included, which hopefully makes this a useful reference.

I didn’t go into too much detail with selectors and properties as they can be easily referenced from cheatsheets found online such as at MDN Mozilla.

This Lynda course is proving to be excellent because it teaches you solid theory quickly and easily, as well as providing practical work. There is access to examples on jsFiddle and a resume website to build. The website spans all three courses and I will post here when complete.

I am now a few weeks into my 6-month development learning program and so far so good.

Please bookmark and keep a lookout for future posts.

How is your learning journey progressing? –  Please feel free to leave a comment below.

 

Pin It on Pinterest

Share This