CSS3 Examples - Simple Ways to Format your Web Pages

Udemy Editor

CSS3, combined with HTML5, have taken the look and feel of websites to a whole new level allowing developers to create websites that load quickly, function efficiently and provide a top class user experience. CSS3 allows you to generate even more effects than previous versions and this article will highlight some of the fun effects you can generate using CSS3 examples along with codes for these CSS3 examples. If you want to learn how to use these effects on your website, then sign up for the HTML Tutorial: HTML & CSS for Beginners course now. The course will teach you all you need to know about the HTML document structure needed for HTML5 web pages. It will teach you the basics of markup and CSS typography. It will show you how to create HTML lists, as well as teaching you about internal, external and anchor links. The course will teach you about the CSS box model and by the end of the course you will be able to apply for certification as a developer.

CSS Examples for Great Web Page Backgrounds

Most layouts start with setting the background of the web page. The CSS element that allows us to set the background of a page is called “background” and you can set the background as a color or as an image or you can set the background for various elements on your web page.

The code to specify a specific color as the background is:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>

Note that the CSS code in this case is included in the style portion of the HTML found in the <head> section of the HTML. This means the element will apply to the whole page. The code can be included within the <body> section or can be included in an external CSS file as well.

To learn more about how to use CSS code and the difference between including CSS code within your pages or as an external file, sign up for the Code a Responsive Website Using HTML5 and CSS for Beginners course now. This course consists of over one hundred and thirty lectures that will teach you how to link documents, how to use media queries, how to send emails and how to create a beautiful, multiple page website that incorporates HTML and CSS.

The code to use an image instead of a color:

<style>
body {background-image:url("paper.gif");}
</style>

Note that to display an image instead of a color, you need the URL or the image and you need to include the URL within the image tag.

Other helpful tags for background images include the position and repeat tags:

body
{
background-image:url("paper.png");
background-repeat: repeat-x;
background-position:right top;
margin-right:200px;
}

The above code will position and repeat your background image along the x axis only.

CSS Examples for Formatting Text

Formatting text is just as easy using CSS. To format text in different colors all you need to do is format the style element associated with that text. Take a look at the following code:

<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:green;}
p.mytext {color:blue;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph so the text is red because default text-color for a page is defined in the body</p>
<p>This is a paragraph with. This text is blue.</p>
</body>
</html>

Results in the following:

Using font declarations can also be used to format the text using css:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1
{
font:15px arial,sans-serif;
color:green;
text-transform:capitalize;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
color:red;
text-transform:uppercase;
}
</style>
</head>
<body>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</body>
</html>

Results in the following:

Creating Lists Using CSS3 Examples

Creating and setting styles for your lists is just as simple using CSS3. You can set the style using the list-style-type element. Take a look at the following code:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:none;}
ul.e {list-style-type:inherit;}
</style>
</head>
<body>
<ul>
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>No type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol>
<li>Numbered list type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

And this is what the result looks like:

Creating Borders Using CSS Examples

Creating borders for your page elements is achieved by using the borders style element. You can set the border styles as solid, dotted, dashed or double. You can also set the color of your borders as well as their width. Take a look at the code below:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style:dotted solid dashed double;
border-color:red;
}
p.two {
border-style:dotted solid dashed;
border-width:10px
}
p.three {border-style:solid dotted;}
p.four {border-style:dotted;}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p>This is some text in a paragraph.</p>
<p>This is some text in a paragraph.</p>
<p>This is some text in a paragraph.</p>
</body>
</html>

The code results in the following:

Add Style to Your Websites Today

CSS is a powerful way to make your websites look great and ensure uniformity throughout your web pages. If you want to learn to harness the power of CSS in your websites, then check out the Build Your First Website in 1 Week with HTML5 and CSS3 today. This course offers over thirty lectures that will teach you to understand HTML and CSS, and offers you a step by step guide to help you build a fully functioning website by the end of the course.