Category Archives: CSS Tips and Tricks

Learn how to make CSS edits for your website content! A1WebsitePro coding experts give you all the css tips and tricks to help you add dynamic design to everything in your website from creating shapes to styling the text on your web pages. Make all your images pop off the page with css coding. Now you can use all the tips and tricks of the experts with our easy to follow instructions.

Programming With PHP Housekeeping Cleaning Up Code Lesson 6

Programming With PHP Housekeeping Cleaning Up Code Lesson 6

When we are programming with PHP remember that it is more artistic like poetry. Everyone will have a different style and you will as well. Many new programmers will not appreciate styles of other programmers because of inexperience. In programming however, housekeeping is very important. New programmers tend to create a lot of messy code. Read More

Cool People Share:

Using External CSS Libraries Absolute Beginner

Using External CSS Libraries Absolute Beginner

You can use external CSS libraries to help code you website faster. CSS Libraries are CSS code preprogrammed. Once you know the structure of CSS code then you just name your elements or “tags” after the libraries structure. Many of the CSS libraries that are available help you create responsive websites. Programming CSS Code In Read More

Cool People Share:

Great New Code Testing Tool

free code tester

A1WebsitePro is now offering a great new code testing tool. This tool is useful for everyone who needs a quick resource to test the code that they are working with. A Helpful Tool For Use With Tutorials If you need a place to practice the codes that we provide in our lessons before you add Read More

Cool People Share:

Coding Websites With CSS Absolute Beginner Web Development Lesson 9

Coding Websites With CSS Absolute Beginner

This is the lesson where we actually begin to code a web page with html and CSS. We take the mock-up from the last post and make a real webpage with clickable links. List of CSS Commands Used Here are a list of CSS commands used in this lesson. color: changes the color of the Read More

Cool People Share:

What is CSS Absolute Beginner Web Development Lesson 8

What Is CSS? Absolute Beginners Course Part 8

What is CSS? CSS is an acronym for “Cascading Style Sheets”. We use CSS to style webpages. With it we can specify positions, colors, background and much more. CSS Syntax The CSS Syntax follows a basic structure. First your target the element that you want to change. Next you will give it some commands. Here Read More

Cool People Share:

DIV TAGS ID’S CLASSES CODING MADE EASY PART 3

DIV TAGS ID'S CLASSES CODING MADE EASY PART 3

To set a div tag we type out the tag just like we would do any other tag, “<div></div>”. It is important however that you set id’s or classes to these div tags so we can target them for styling. We use CSS Cascading Style Sheets for styling our webpages. First we need to set div Read More

Cool People Share:

Make A Game CSS JavaScript and HTML

Make A Game CSS JavaScript and HTML

This is a tutorial on how to make a game with CSS, JavaScript and HTML. Making games are fun and they are not that hard to do. The object of this game is to shoot the objects and make them stop. We have some cool sound effects that we are loading into this as well. The Read More

Cool People Share:

Viewports for Mobile Header Tags Quick Reference

Viewports for Mobile Header Tags Quick Reference

Viewports for Mobile Header tags are something that I think we should be able to just copy and paste. It makes things faster when you are programming. A Viewport tag will auto enlarge text on smaller screens so they are mobile friendly. You would put this code in your header.php file. Pixels are not an Read More

Cool People Share:

Child Themes in WordPress for Beginners Part 2 CSS

Child-Themes-in-Wordpress-for-Beginners-Part-2-CSS

Child themes in WordPress for beginners part 2 CSS is a continuation of WordPress child theme creation tutorial.  So if you have not completed that tutorial you may want to look at it before you do this one. What We Are Going to Learn Browser to target CSS. Identify id’s to make changes. “#” Identify Classes Read More

Cool People Share:

Style HTML Tables With A Lot Of Content

Style-HTML-Tables-With-A-Lot-Of-Content-1

Have you ever wanted to Style  HTML Tables With A Lot Of Content? HTML tables are nice to use because they keep content separated in a nice neat order. However there are many times when webmasters want to put more information into a table cell that makes the table distort. The video below will walk you Read More

Cool People Share:

DEALING WITH EMPTY TAGS IN WORDPRESS

DEALING WITH EMPTY TAGS IN WORDPRESS-1

If you are dealing with empty tags in WordPress you have come to the right place. I have a very simple solution for you to carry out. Thanks to CSS3 we have a selector that will look for anything that is empty in your website and put a “display:none” commend to those empty tags. Dealing Read More

Cool People Share:

KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS

KALEIDOSCOPE-CSS-JAVASCRIPT-ANIMATION-IN-WORDPRESS-1

Do you want a KALEIDOSCOPE CSS JAVASCRIPT ANIMATION IN WORDPRESS? Check out the script below. This is a script written in JavaScript and CSS. It can tantalize the visual senses for a while. What is even more cool is that you can use your own pictures just by dragging and dropping them into your webpage. Read More

Cool People Share:

Setting Up a Cursor Pointer in CSS

Setting Up a Cursor Pointer in CSS

This tutorial will be on setting up a cursor pointer in CSS. There are many methods to setting up a cursor pointer in CSS. A webmaster or web developer can virtually set up unlimited amounts of pointers in CSS. Below is a list of cursor styles in CSS that you can easily implement. Hover over Read More

Cool People Share:

Make a Smiley Face in CSS

make a smiley face in css

To Make a Smiley Face in CSS the first thing that we will do is set up the div’s. We will call our main div id smiley. We will then add div’s for the eyes and mouth. Here is the div structure. Main Div = smiley Left Eye = leye Right Eye = reye Mouth = Read More

Cool People Share:

How to Apply a CSS Hover Effect

How to Apply a CSS Hover Effect

Many times there are clients that want to know how to apply a CSS hover effect in their website. This is an easy process when done with CSS. First we will write a div tag and give it an id. We will call our example of a CSS hover effect hover. Now we will target the Read More

Cool People Share: