Java String Q&A

I’ve made a list of some common Java String questions I receive starting from extremely basic to more advanced questions.

Question:
What is String in Java?

Answer:
String is a Class in java and defined in java.lang package. It’s not a primitive data type like int and long. String class represents character Strings. String is used in almost every Java application.

Examples:
String str = new String("abc");
String str1 = "abc";

Further Use:
Here is an example method that will remove a given character from a String.


 private static String removeChar(String str, char c) {
        if (str == null)
            return null;
        return str.replaceAll(Character.toString(c), "");
    }

Question:
Why using Char array for password storage is better than using String?

Answer:
String is immutable in java and stored in String pool. Once it’s created it stays in the pool until garbage is collected, so even when we’re finished with a password it is still available in memory, and we don’t want that. This means anyone with access to the memory dump will have access to it, a big security no no.

So, by using char array for password storage, we can set it to blank once we are done with it. Also we can control how long it’s available in memory thus avoiding the security threat.

Question:
How do you check if two Java Strings are equal?

Answer:
There are two ways to check if two Strings are equal or not – using “==” operator or using equals method. When we use “==” operator, it checks for value of String as well as reference but in our programming, most of the time we are checking equality of String for value only. So we should use equals method to check if two Strings are equal or not.
There is another function equalsIgnoreCase that we can use to ignore case.

String s1 = "sethcodes";
String s2 = "sethcodes";
String s3 = new String("sethcodes");
System.out.println("s1 == s2 ? "+(s1==s2)); //true
System.out.println("s1 == s3 ? "+(s1==s3)); //false
System.out.println("s1 equals s3 ? "+(s1.equals(s3))); //true

Question:
What does the String intern() method do?

Answer:
When the intern method is invoked, if the pool already contains a string equal to this String object as determined by the equals(Object) method, then the string from the pool is returned. Otherwise, this String object is added to the pool and a reference to this String object is returned.
This method always return a String that has the same contents as this string, but is guaranteed to be from a pool of unique strings.

Java Connect to Remote Database through SSH using Port Forwarding

There may be a time when you need to connect to a remote database using an SSH connection. Here is an example of using port forwarding to connect remotely. This example is for MySQL but you can use it for almost any database.



package com.journaldev.java.ssh
 
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
 
import com.jcraft.jsch.JSch;
import com.jcraft.jsch.Session;
import java.sql.Connection;
 
 
public class MySqlConnOverSSH {
 
   
    public static void main(String[] args) throws SQLException {
 
        int lport=5656;
        String rhost="secure.sethcodes.com";
        String host="secure.sethcodes.com";
        int rport=3306;
        String user="sshuser";
        String password="sshpassword";
        String dbuserName = "mysql";
        String dbpassword = "mysql123";
        String url = "jdbc:mysql://localhost:"+lport+"/mydb";
        String driverName="com.mysql.jdbc.Driver";
        Connection conn = null;
        Session session= null;
        try{
            //Set StrictHostKeyChecking property to no to avoid UnknownHostKey issue
            java.util.Properties config = new java.util.Properties(); 
            config.put("StrictHostKeyChecking", "no");
            JSch jsch = new JSch();
            session=jsch.getSession(user, host, 22);
            session.setPassword(password);
            session.setConfig(config);
            session.connect();
            System.out.println("Connected");
            int assinged_port=session.setPortForwardingL(lport, rhost, rport);
            System.out.println("localhost:"+assinged_port+" -> "+rhost+":"+rport);
            System.out.println("Port Forwarded");
             
            //mysql database connectivity
            Class.forName(driverName).newInstance();
            conn = DriverManager.getConnection (url, dbuserName, dbpassword);
            System.out.println ("Database connection established");
            System.out.println("DONE");
        }catch(Exception e){
            e.printStackTrace();
        }finally{
            if(conn != null && !conn.isClosed()){
                System.out.println("Closing Database Connection");
                conn.close();
            }
            if(session !=null && session.isConnected()){
                System.out.println("Closing SSH Connection");
                session.disconnect();
            }
        }
    }
 
}

Write to MySQL Database Using Java

Probably one of the most common tasks you’ll ever utilize is writing to a database. Java INSERT is a very basic code snippet. This code inserts a first and last name into the table.

create table users (
  id int unsigned auto_increment not null,
  first_name varchar(32) not null,
  last_name varchar(32) not null,
  date_created timestamp default now(),
  is_admin boolean,
  num_points int,
  primary key (id)
);

Just for your reference here is another way to write to a MySQL database using JavaScript. Note: I’ve got the database host set to “localhost” since we are executing the script on the same server. The username is set to “root”.

This script will be inserting a first name, last name, and date created etc. I created a Prepared Statement to capture all the values before executing the write.

import java.sql.*;
import java.util.Calendar;

public class JavaMysqlPreparedStatementInsertExample
{

  public static void main(String[] args)
  {
    try
    {
      // create a mysql database connection
      String myDriver = "org.gjt.mm.mysql.Driver";
      String myUrl = "jdbc:mysql://localhost/test";
      Class.forName(myDriver);
      Connection conn = DriverManager.getConnection(myUrl, "root", "");
    
      // create a sql date object so we can use it in our INSERT statement
      Calendar calendar = Calendar.getInstance();
      java.sql.Date startDate = new java.sql.Date(calendar.getTime().getTime());

      // the mysql insert statement
      String query = " insert into users (first_name, last_name, date_created, is_admin, num_points)"
        + " values (?, ?, ?, ?, ?)";

      // create the mysql insert preparedstatement
      PreparedStatement preparedStmt = conn.prepareStatement(query);
      preparedStmt.setString (1, "Barney");
      preparedStmt.setString (2, "Rubble");
      preparedStmt.setDate   (3, startDate);
      preparedStmt.setBoolean(4, false);
      preparedStmt.setInt    (5, 5000);

      // execute the preparedstatement
      preparedStmt.execute();
      
      conn.close();
    }
    catch (Exception e)
    {
      System.err.println("Got an exception!");
      System.err.println(e.getMessage());
    }
  }
}

Now that you’ve written to the database you can query it using the following script:

select * from users;

The output should resemble this:


+----+------------+-----------+---------------------+----------+------------+
| id | first_name | last_name | date_created        | is_admin | num_points |
+----+------------+-----------+---------------------+----------+------------+
|  1 | Barney     | Rubble    | 2010-06-23 14:02:00 |        0 |       5000 | 
+----+------------+-----------+---------------------+----------+------------+
1 row in set (0.00 sec)

Using AngularJS with Bootstrap

You may want to utilize some of Angular’s functions within a Bootstrap layout. Here is an example of a full page layout done in Angular

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel-heading">
      <h4 class="panel-title" style="color:#fa39c3">
        <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
          <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
            {{heading}}
          </span>
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapse" uib-collapse="!isOpen">
      <div class="panel-body" style="text-align: right" ng-transclude></div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">
    <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </div>
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </div>
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </div>
    <div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
      Hello
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
      <uib-accordion-heading>
        Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
      </uib-accordion-heading>
      World
    </div>
    <div uib-accordion-group class="panel-danger" heading="Delete account">
      <p>Please, to delete your account, click the button below</p>
      <button class="btn btn-danger">Delete</button>
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </div>
  </uib-accordion>
</div>

Bootstrap Page with Navigation Example

If you’re looking to throw up a quick mobile responsive, yet static, web page. This is the basic code for a bootstrap framework with example navigation. As you can see, line 7 contains the bootstrap.css file

If you want to get the latest css file to play around with go to www.getbootstrap.com

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Coding Bootcamp!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <!-- Container Div -->
  <div class="container">
    <!-- Section 1: Navbar-->
    <nav class="navbar navbar-default">
      <!-- Place Fluid Container in Navbar -->
      <div class="container-fluid">
        <!-- Designate a navbar heading -->
        <div class="navbar-header">
          <!-- Collapsible button -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <!-- navbar button elements-->
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span> <!-- first line -->
              <span class="icon-bar"></span> <!-- second line -->
              <span class="icon-bar"></span> <!-- third line -->
            </button>
          <!-- Our brand / logo -->
          <a class="navbar-brand" href="#">The Coding Bootcamp</a>
        </div>
        <!-- The links of our navbar -->
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <!-- a Dropdown menu -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <!-- More links -->
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    <!-- Jumbotron element -->
    <div class="jumbotron">
      <!-- centered text -->
      <h1 class="text-center"><strong>Awesome Header</strong></h1>
      <h2 class="text-center">Smaller Awesome Header</h2>
      <h3 class="text-center">Even Smaller Header</h3>
      <!-- button with predefined style rules -->
      <p class="text-center">
        <a class="btn btn-primary btn-lg" href="#" role="button">
          <span class="glyphicon glyphicon-envelope"></span> Learn more</a>
      </p>
    </div>
    <!-- a Bootstrap row with columns -->
    <div class="row">
      <!-- At large+ screens takes up half width (6/12) -->
      <div class="col-lg-6">
        <!-- centered image with thumbnail rules -->
        <img class="img thumbnail center-block" src="http://legacy.nerdywithchildren.com/wp-content/uploads/2013/06/ComfyChildKeyboard.jpg" alt="KidComputer" width="50%">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, molestiae modi accusantium animi magnam veniam, impedit asperiores sint consequuntur debitis fugit quibusdam dolor, iusto sed porro ab minus voluptatibus amet.</p>
      </div>
      <!-- At large+ screens takes up half width (6/12) -->
      <div class="col-lg-6">
        <img class="img thumbnail center-block" src="https://download.unsplash.com/photo-1429051883746-afd9d56fbdaf" alt="LittleCoder" width="50%">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, maiores, quos. At, animi, facilis. Alias itaque ab minima rerum, eaque animi nesciunt harum nemo est cumque voluptas, qui reprehenderit atque.</p>
      </div>
    </div>
  </div>
  <!-- jQuery, javascript file for the Bootstrap's javascript file to function -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <!-- Bootstrap's javascript file that allows the dropdown menu to work  -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

CSS Styling Examples

I wanted to show a couple examples in this CSS example:

1. How to use Google Fonts
2. How to use Font Awesome icons
3. How to style Active, Hover, Focus links and input boxes.

First, in order to use Google Fonts and Font Awesome you need to embed the fonts and the Font Awesome CSS file. (See line 7 and 9 highlighted below)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Lorem Ipsum Styling</title>

	<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

	<link rel="stylesheet" href="fa/css/font-awesome.min.css">

<style>

.container{
	text-align: center;
	padding:4%;
	width: 92%;
}
.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}
.top-para {
	font-size: 58px;
	font-family: 'Prata', serif;
	font-weight: 100;
	line-height: 125%;
	letter-spacing: 2px;
	color: #a08131;
}


p.top-para::first-letter {
    color: #424219;
    font-size:200%;
}  


.mid-para {
font-size: 28px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 900;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para {
	font-size: 18px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para2 {
	font-size: 30px;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 1px;
	color: #a08131;
}
.foot-para {
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #3f3c35;
}
.fa-address-card {
	font-size: 80px;
	color: #a08131;
}
.fa-rocket {
	font-size: 45px;
	color: #3f3c35;
}
.fa-plus {
	font-size: 25px;
	color: #898768;
	margin-right: 15px;
	margin-top: -15px;
	position: relative;
	top: -10px;
}
.fa-male {
	font-size: 45px;
	color: #3f3c35;
	position: relative;
	top: -3px;
	margin-right: 15px;
}
.fa-sitemap, .fa-beer{
	font-size: 45px;
	color: #3f3c35;
	margin-right: 15px;
}

a {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	color:#545441;
}

a:hover {
	background-color: #a08131;
	font-size: 25px;
}

a:focus {
	background-color: #6d6a34;
	font-size: 40px;
}

a:active {
	background-color: #777775;
	font-size: 80px;
}




.boxy {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	border:1px solid #c1c1b0;
}

.boxy:hover {
	background-color: #a08131;
	font-size: 26px;
}

.boxy:focus {
	background-color: #6d6a34;
	font-size: 30px;
}

.boxy:active {
	background-color: #777775;
	font-size: 30px;
}



</style>	
</head>
<body>
	
<div class="container">
		<i class="fa fa-address-card" aria-hidden="true"></i>
	<p class="top-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


		<input class="boxy" placeholder="Name">
		<input class="boxy" placeholder="Email">
	<br>
		<input class="boxy" placeholder="Address">
		<input class="boxy" placeholder="City, State">

	<p>
		<i class="fa fa-beer" aria-hidden="true"></i><i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-male" aria-hidden="true"></i>
	</p>

	<p class="mid-para">Nunc rhoncus mollis nisi id mollis. Nulla facilisi. Aenean dapibus quis urna ut ullamcorper. Nam pellentesque neque congue iaculis sodales. Etiam et augue id lorem pulvinar fermentum eget consequat metus.</p>

	<i class="fa fa-rocket" aria-hidden="true"></i>

	<p>
		<a href="#">Click here to blastoff!!</a>
	</p>

	<p class="bot-para">Fusce vel erat justo. Sed volutpat justo quis arcu vehicula convallis eu ut lectus. Etiam ac odio nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget mi viverra, vulputate nisi vitae, sodales purus. Sed bibendum leo sed cursus lobortis. Nulla faucibus venenatis malesuada. Fusce ac est non massa pharetra blandit ut ut ipsum. Sed at tellus eu lectus volutpat gravida. Sed ut nisi a nisl mollis laoreet non in magna. Nullam aliquam neque sit amet commodo suscipit. Vestibulum interdum ornare ante nec tempor. Sed lobortis finibus dui ac consequat. Fusce tincidunt quam imperdiet arcu pulvinar mollis. Fusce eget nibh in diam varius tincidunt. Vivamus bibendum enim in ullamcorper viverra.</p>

		<i class="fa fa-sitemap" aria-hidden="true"></i>

	<p class="bot-para2">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>

	<div style="footer">
	<p class="foot-para">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>
	</div>
</div>

</body>
</html>

If you see here I embedded some Google fonts then I just used .font-sel to show how to use the different font in your CSS styling of a class.


<head>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

</head>

<style>

.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}

Set a Google Timer Countdown

You know how whenever you need a 1 minute timer it takes at least 2 minutes to set a timer on your phone or watch?

Google has something for that.

Say you need to leave for work in 13 minutes? Just go to Google and enter “13 minute timer” and Google will set a timer. Click here for 13 minute Google timer

You can have it make a sound when it finishes or just keep things quiet. You can also send the timer over to any Android device or watch.

Times up…

google timer

DIV Positioning : Fixed, Absolute, and Relative




<!doctype html>
<html lang="en-us">


<!-- HEAD TAG NEEDS TO HAVE LINK TO CSS FILE-->
<head>
  <meta charset="UTF-8">
  <title>Positioning</title>
  <link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>
 
 
  <!-- EXAMPLE OF FIXED DIVISION -->
  <div id="fixed">
    <div><br> position: fixed
  </div>

  <div class="wrapper">
  
    <section id="content">
   
      <h1>Heading</h1>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a hendrerit ex, at blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus felis sem, non pulvinar odio fermentum vel. Nunc varius tempus scelerisque.
        Curabitur congue magna vitae velit dictum, eu finibus neque bibendum. In hac habitasse platea dictumst. Aliquam fermentum lobortis felis, in feugiat diam congue ac. </p>
        
      <!-- RELATIVE POSITION DIV -->
      <div id="relative">
        <br> position: relative
        
        <!-- ABSOLUTE POSITION DIV-->
        <div id="absolute">
          <br> position: absolute
        </div>
      </div>
     
      <p>Nulla tempor ornare diam, vitae volutpat erat bibendum eget. Nunc sagittis placerat velit sit amet interdum. Nam in iaculis purus, quis tristique velit. Cras ut nisl vitae orci malesuada placerat non sed magna. Nulla ultrices, dolor at aliquam volutpat,
        lorem magna pharetra arcu, eget feugiat nisi libero at nunc. Phasellus finibus elit at sapien vehicula varius. Maecenas in dapibus leo. Aliquam molestie vulputate metus. Morbi sed posuere quam, et sodales felis. Proin augue nulla, pellentesque
        at venenatis vel, sagittis eget nibh. Maecenas libero velit, luctus eu velit vitae, eleifend convallis felis.</p>
      <p>Nullam imperdiet vehicula dolor eu consectetur. Vestibulum pulvinar lobortis accumsan. Phasellus lobortis pulvinar augue, eu ultrices dui. Donec ut est erat. In facilisis tellus nibh, eu consequat diam commodo a. Nam egestas sapien nunc, ullamcorper
        semper odio feugiat non. Duis et nisl leo. Aliquam consectetur vestibulum turpis. Vivamus non elit ut lorem mattis iaculis. Suspendisse ullamcorper ante orci, et condimentum nisi pharetra id. Praesent ut erat in eros mollis interdum quis ut nisi.
        Etiam ac risus in erat imperdiet sagittis eu sed metus. Etiam molestie ipsum sed vehicula efficitur. Cras eu metus in ex vehicula sodales.</p>
      <p>Maecenas feugiat, ex quis hendrerit interdum, felis ante laoreet sem, vitae tincidunt diam lectus fringilla dolor. Nunc vitae dui sed ligula pharetra sagittis in nec ante. Sed consequat congue vehicula. Donec vel risus at sapien rhoncus consequat
        a lobortis lorem. Mauris ut sem massa. Curabitur ac consequat eros. Nulla non nibh eros. Donec porta condimentum nisi a iaculis. Sed sit amet risus at lacus suscipit accumsan sed ullamcorper lorem. Proin sed egestas risus. Sed egestas ex ac finibus
        ornare.</p>
    </section>
  </div>
  
  
  
</body>
</html>

CSS Class and ID Styling

CSS id syntax:
Id’s are totally unique and can only have a single instance
EXAMPLE
<div id=""top""></div>

The css would be:

#top { color: #232323; }

Multiple changes would go in a class
Any div with the class of “top” will be styled
<div class=""top""></div>

The css would be:

.top { color: #232323; }

Github Basic Commands, Setup a New Repository

GIT HUB

Clone a GitHub project onto my local drive:

git clone git@github.com:sethmh82/uci_class.git

Show the status of Git project and what files are not synced
git status

Add a file to the project
git add first.html

Commit the file to the repository on GitHub
git commit -m "This is my first file"

Push from local to Github
git push origin master

Pull from Github to local
git pull master origin