Beginning Web Development : Inline Styles and Gradients

In all the books I have read about web design/development most of the authors say something along the lines of “HTML is the workhorse of the internet.”  While this is true, for very basic sites, CSS is the workhorse for design.  Everything that makes a site looks good is (usually) done with a CSS.  In the rare cases that it is not the styling is usually done via code (like JavaScript or PHP.)

Inline styles are handy when you are looking to change one or two single elements.  Elements that are not going to be changed on any other page or are unique for some reason.

<h1><strong>Hello!</strong><h1>

The above code would show a something like so:

Hello!

We can make it more interesting by adding a color:

<h1 style="color:red"><italic>Hello!</italic></h1>

Hello!

You can also do inline styles in the same way you do a CSS file.  You have to separate the CSS section with some element tags and the styles will be at the top of the page, before your content.

Here is the current opening to our test website.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset= "utf-8">
<title>Mere Magic Designs Tests Site</title>
<link rel="stylesheet" href="style.css"/>
</head>

<nav>
<a href = "index.html">Home</a> || 
<a href = "portf.html">Portfolio</a> || 
<a href = "vocab.html">Vocabulary</a> || 
<a href = "about.html">About</a>
</nav>

The styles are all held in a CSS file that is separate from the rest of the page.  We can add some styles by adding a style section in the <head> tag.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset= "utf-8">
<title>Mere Magic Designs Tests Site</title>
<style>
h1{color:red;
font-family: Helvetica;}
a{color:blue;
text-decoration:underline;
}
</style>
</head>

<nav>
<a href = "index.html">Home</a> || 
<a href = "portf.html">Portfolio</a> || 
<a href = "vocab.html">Vocabulary</a> || 
<a href = "about.html">About</a>
</nav>

Now the style is part of the web page.  It will act just like the link we had…

<link rel="stylesheet" href="style.css"/>

…but it is now part of the web page and will display as such.  This means that if a person looks at the code for your page they will be able to see all of the styles you used and how you used them.  It also removes the compartmentalization that makes CSS useful.  One CSS file can work on many pages and many sites.  Having a separate CSS file will also keep your style methods a secret (unless you know where to find them. 😉

You can do some cool things with CSS. Such as gradient backgrounds or sections (you may be more familiar with the popular term Ombre) .  To do this I recommend using as web based CSS Gradient generator.  There are quite a few to choose from and are all basically the same.  They contain an area to build your gradient and a text box where the CSS code is.  Just copy the code and paste it into your CSS document.

Here is the code for the gradient on the test site.

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #207cca 17%, #2989d8 41%, #56f756 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(17%,#207cca), color-stop(41%,#2989d8), color-stop(100%,#56f756)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#56f756',GradientType=0 ); /* IE6-9 */

The first line tells the browser that the background will be #1E7599 if the gradient does not load correctly or the browser is really old.  Next we tell Mozilla (Firefox) that the gradient is linear. At the top the color is going to be #1E7599, when we have hit 17% of the screen (whatever the page is being viewed on) we are going to change to color #207CCA and so on.  We know that this line is for Mozilla because there is a comment at the end of the line letting us know.

Since the browsers display things differently it is good practice to have versions of the code for each browser your customers may use.  This is one of the reasons I recommend that you use a gradient generator, there are many browsers our there, and they change.  A gradient generator will cover the most common browsers for you.

You should also make comment your code.  You may forget why you put in a line or someone else may inherit your code and not know why you did something.

Visit the test site to see what it looks like now.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s