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.

Create a Facebook Icon in CSS

Create a Facebook Icon in CSS

The first thing that we will do is set up or div to create a facebook icon in CSS. [code]<div id="facebook"></div>[/code] Next we will style the css. [code]<style> #facebook { background: blue; text-indent: -999em; width: 100px; height: 110px; border-radius: 5px; position: relative; overflow: hidden; border: 15px solid blue; border-bottom: 0; } #facebook::before { content: "/20"; Read More

How to make a Trapezoid in CSS

create-a-trapezoid-with-css

This is how you make a trapezoid in CSS. First you want to set up the div. We will give our div an id of trapezoid. [code]<div id="trapezoid"></div>[/code] Next we will style the div in our CSS. [code]<style> #trapezoid { border-bottom: 100px solid lightBlue; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: Read More

Make a diamond in CSS

create-a-diamond-with-css

To make a diamond in CSS first set up the div. We are going to give our div an id of diamond so we can target it with our CSS style. [code]<div id="diamond"></div>[/code] Next we will apply the style in the HTML. with our style tags. [code] <style> #diamond { width: 0; height: 0; border: Read More

Make a Hexagon in CSS

create-a-hexagon-with-css

If you want to make a hexagon in CSS first set up your div. We are going to give our div an id of hexagon. [code]<div id="hexagon"></div>[/code] Next we will style the div with css. [code]<style> #hexagon { width: 100px; height: 55px; background: brown; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px; Read More

Make an Octagon in CSS

create-an-octagon-with-css

To make an octagon in CSS first we need to set up a div. We are going to give our div an id of octagon. [code]<div id="octagon"></div>[/code] Next we will insert the style for the octagon in our css stylesheet. [code]<style> #octagon { width: 100px; height: 100px; background: gray; position: relative; } #octagon:before { content: Read More

Make a Pentagon in CSS

create-a-pentagon-with-css

Make a Pentagon in CSS. Set up a div in your html page and call it pentagon. [code]<div id="pentagon"></div>[/code] Next we will style the div in our CSS to create the pentagon. [code]<style> #pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: pink transparent; } #pentagon:before { content: ""; position: absolute; Read More

Make an Oval in CSS

create-an-oval-with-css

Set up a div and call it oval. This will set up or CSS command to target the div. [code]<div id="oval"></div>[/code] The next thing to do is set up is the style tag for our oval. We are doing basically the same thing that we did in the circle for CSS but we are giving one Read More

Make a Circle in CSS

make a circle in css

To make  a circle in CSS the first thing that we do is set up the div. We will give our div and id of circle. [code]<div id="circle"></div>[/code] Next we will enter or CSS commands to make it a circle. We will color our circle yellow! :-). They key factor here is that we are using Read More

Make a 5 point star in CSS

create-a-star-with-css

The first thing we will do is set up our div and we will call it star. [code]<div id="star"></div>[/code] Next we will add the CSS to give us a purple star. [code] <style> #star{ width: 0; height: 0; border-style: solid; border-width: 0 100px 100px 100px; border-color: transparent transparent purple transparent; } #star { margin: 50px Read More

Make a Triangle in CSS

create-a-triangle-with-css

Making a triangle is a little harder than making a square or rectangle in CSS. Here is what you do. First set up your div, we are going to give our div and id of triangle. [code]<div id="triangle"></div>[/code] Now we will add the CSS for the triangle. [code]<style> #triangle{ width: 0; height: 0; border-style: solid; Read More

Make a rectangle in CSS

make-a-rectangle-in-css-yes

This short sweet tutorial will show you how to make a rectangle in CSS. First thing is you want to set up your div, we are going to give our div an id of rectangle. [code]<div id="rectangle"></div>[/code] Now lets enter our CSS to make our rectangle. [code]<style>#rectangle{width:200px; height:100px;}</style>[/code] We can give it a background color Read More

Make a Square in CSS

make-a-square-in-css

To make a square in CSS set up your div and name is whatever you want to name it. We will give our div a name of square. [code]<div id="square"></div>[/code] Now all we do is style it in CSS. [code]<style>#square{width:100px; height:100px;}</style>[/code] You can also give it some background color. [code]<style>#square{width:100px; height:100px; background:red;}</style>[/code] Make a Square Read More

CSS Reset Stylesheet

CSS-Reset-Stylesheet

So when you code a lot of websites you need a reset stylesheet written in CSS that will help with the process. Sure you can write it out over and over again but here is one I like to use to give a quick start to the stylesheet. [code] html, body, div, span, object, iframe, Read More