<?xml version="1.0" encoding="iso-8859-1"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/">

<channel>
<title>Web Style Sheets - Web Developer Tutorials</title>
<link>https://www.devarticles.com</link>
<!-- PubSubHubbub Discovery -->
<link rel="hub"  href="http://devshednet.superfeedr.com/" xmlns="http://www.w3.org/2005/Atom" />
<link rel="self" href="https://www.devarticles.com/index2.php" xmlns="http://www.w3.org/2005/Atom" />
<!-- End Of PubSubHubbub Discovery -->
<atom:link href="https://www.devarticles.com/index2.php" rel="self"/>
<description>Web Style Sheets Analysis and Tutorials at Dev Articles.  Dev Articles is a community focused on front end display technologies such as HTML5, CSS3, Javascript, AJAX and graphic displays.</description>
<language>en-us</language>
<lastBuildDate>Thu, 20 Jul 2017 21:52:59 -0400</lastBuildDate>
<pubDate>Thu, 20 Jul 2017 21:52:59 -0400</pubDate>
<item><title>CSS Padding Overview</title>
<pubDate>Thu, 31 May 2012 00:00:00 -0400</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Padding-Overview/</link>
		<description><![CDATA[This article will provide a closer look at CSS padding by explaining the topic and offering a few examples of how it can be applied.]]></description>
		<content:encoded><![CDATA[As is usually the case when learning a new subject, jumping into the world of Cascading Style Sheets, or CSS, involves some work.  Sure, there is a lot of ground to cover, but the good news is that CSS is very useful, so it is worth your time.  Also, the way in which it is structured is rather easy to learn.  While we have already covered the topic of CSS margins in the past, today we are going to discuss something that is similar in format, but a bit different in functionality and purpose - padding.  Just like with margins, padding is something that you will probably run across as you work wi...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Padding-Overview/</guid>
</item>
<item><title>CSS: Margins Overview</title>
<pubDate>Thu, 17 May 2012 00:00:00 -0400</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Margins-Overview/</link>
		<description><![CDATA[This article gives a basic overview of CSS margins as well as some examples.]]></description>
		<content:encoded><![CDATA[If you are new to CSS (Cascading Style Sheets), you have a lot of ground to cover.  Luckily, CSS is designed in a way that is easy to learn, and the fact that it can help you save a lot of work makes it well worth learning.  One of the topics that should receive some of your attention while learning CSS is the topic of margins.  As you work with CSS, the likelihood of you having to use and adjust margins is quite high, so this article will give you a basic introduction to margins and how you can implement them in your upcoming projects. Before we get into the use and implementation of margins,...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Margins-Overview/</guid>
</item>
<item><title>Top CSS3 Button Tutorials</title>
<pubDate>Mon, 23 Apr 2012 00:00:00 -0400</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/Top-CSS3-Button-Tutorials/</link>
		<description><![CDATA[In this article we showcase some of the best CSS3 button tutorials from across the web. If you are looking to add some style and pizazz to your site, these style sheet how-tos can help!]]></description>
		<content:encoded><![CDATA[No matter what site you are on, you will probably see some type of button on it.  Buttons are integral parts of website navigation that help customers submit data, move from place to place, and more.  While buttons can be simple in appearance, you can use CSS3 to make them stand out and give your visitors a more visually stimulating experience.  After all, if you can figure out how to maximize the appearance of your site's buttons, why not do it?  Of course, that is where the trouble may come in for some that are new to CSS3. Luckily, there are several tutorials available on the Web that focus...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/Top-CSS3-Button-Tutorials/</guid>
</item>
<item><title>More Top CSS3 Tutorials for Animation and Images</title>
<pubDate>Wed, 11 Apr 2012 08:00:04 -0400</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/More-Top-CSS3-Tutorials-for-Animation-and-Images/</link>
		<description><![CDATA[It has been quite a long time since we have discussed the top CSS3 tutorials on the Web that focus on the topics of animation and images. We surely could not encompass a true picture of what is out there in just one article, so here are some more of the top CSS3 tutorials for animation and images that you an implement into your site to make it look and function better.]]></description>
		<content:encoded><![CDATA[A Master Class in CSS Animations  As you can tell from the title of this tutorial, what you have here is a comprehensive look at CSS animations.  It does not teach you one specific CSS technique.  Instead, you get a nice overview that is very informative and covers several key topics.  Since the tutorial covers multiple topics in the realm of CSS animations, it does take a longer time to complete.  Still, if you have one to two hours of free time, use them wisely with a visit here.  Only a basic knowledge of HTML and CSS is needed. The tutorial begins with a brief look at previous CSS limitati...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/More-Top-CSS3-Tutorials-for-Animation-and-Images/</guid>
</item>
<item><title>CSS Mega Menus: Adding Extra Sections</title>
<pubDate>Wed, 14 Mar 2012 11:30:07 -0400</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Mega-Menus-Adding-Extra-Sections/</link>
		<description><![CDATA[Creating a mega menu from scratch with CSS is a fairly straightforward task. If you're used to building  classic  (or even multi-level) drop-downs, you'll find the process easy to grasp, as the logic for both kinds of menus is very similar.]]></description>
		<content:encoded><![CDATA[To back up this idea, in the first part of this two-part tutorial I implemented a sample mega menu. In that initial incarnation, the mega menu featured only a couple of fictional sections. Even though the sections included just a few common HTML elements, such as some H2 headers, paragraphs and links, they demonstrated how easy it is to semantically define the skeleton of a mega menu. Of course, something that carries the term  mega  on its shoulders must be huge enough in size to fully honor such a distinction, right?  Well, since the first implementation of my example menu was made up of two...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Mega-Menus-Adding-Extra-Sections/</guid>
</item>
<item><title>CSS Mega Menus</title>
<pubDate>Wed, 07 Mar 2012 11:30:04 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Mega-Menus/</link>
		<description><![CDATA[In this first part of a two-part tutorial, I will show you how to create a customizable mega-menu with CSS. The straightforward construction process involves defining the menus structure (in this case, a simple unordered list, including a set of divs), and then styling the main containers and the elements wrapped by them, such as headers, paragraphs, hyperlinks and so forth.]]></description>
		<content:encoded><![CDATA[With a long and prosperous existence, drop-down menus are one of the most popular user interface elements on the web. Thanks to the support added by Internet Explorer for the  :hover  CSS pseudo-class for multiple HTML elements a few years ago (you know, not only for  lt;a gt; tags), such menus can be implemented in a cross-browser fashion, without using JavaScript (in a nice evolution of the classic suckerfish dropdown). As with many other things in life, though, dropdowns evolved naturally to more complex structures, often composed of multiple nested levels. This evolution, sadly, dramatical...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Mega-Menus/</guid>
</item>
<item><title>CSS3 Accordian Menu: Horizontally Display Hyperlinks</title>
<pubDate>Mon, 13 Feb 2012 12:30:05 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Accordian-Menu-Horizontally-Display-Hyperlinks/</link>
		<description><![CDATA[Web designers can choose between many options today when adding an appealing navigation bar to a website. Whether you're planning to build up a plain vanilla menu, or create more complex navigational structures, such as hierarchical drop-downs, mega-menus and flyouts, chances are that you can tackle the entire implementation process with confidence. Animated navigation bars, however, are another story.]]></description>
		<content:encoded><![CDATA[Indeed, things get more complicated when it's necessary to construct a navigation bar (in any of its abundant flavors) that displays some form of animated behavior. In many cases, the process requires you to work with the complexities of raw JavaScript, or to climb the learning curve of one of the many JavaScript libraries available.  A good example of such a situation is the development of the so-called  accordion  menus. There are jQuery plug-ins that allow you to build these popular user interfacing elements quickly and unobtrusively, while leaving the markup clear and pristine. Sometimes, ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Accordian-Menu-Horizontally-Display-Hyperlinks/</guid>
</item>
<item><title>CSS Combinators: Working with Child Combinators</title>
<pubDate>Mon, 06 Feb 2012 08:00:05 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Working-with-Child-Combinators/</link>
		<description><![CDATA[In this conclusion to a three-part series on combinators, you'll learn how to use the child combinator when building your own web pages.]]></description>
		<content:encoded><![CDATA[If you're constantly in search of newer and more efficient methodologies that permit you to improve the overall quality of your CSS code, then take a peek at combinators. This underrated feature, bundled with the specification for a long time, will let you define the visual presentation of your web page elements by using fewer CSS classes and selectors. In this way, it can help you keep the markup much cleaner and unpolluted. If you've already read the two previous parts of this tutorial, you now have a solid background on how to work with CSS combinators. In those pieces I developed some exam...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Working-with-Child-Combinators/</guid>
</item>
<item><title>CSS Combinators: Using General Siblings</title>
<pubDate>Wed, 25 Jan 2012 00:00:00 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Using-General-Siblings/</link>
		<description><![CDATA[In this second part of a  three-part tutorial, I develop a couple of examples which show how easy it is to exploit the functionality provided by the general sibling combinator, and how its usage (even in simple cases) can lead to writing shorter and more efficient CSS snippets.]]></description>
		<content:encoded><![CDATA[As one of the most underrated facilities of the CSS specification, combinators are powerful tools that allow you to improve the assignment of styles to elements on a web page. While their functionality remained  forgotten  in a dark corner for many years, due to the lack of a proper support by some browser vendors (with Internet Explorer clearly leading the crowd), things have changed for good. Now it's possible to utilize them in a pretty cross-browser fashion. The best way to demonstrate how useful combinators can be is through some concrete, functional code samples. In keeping with this req...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Using-General-Siblings/</guid>
</item>
<item><title>Intro to CSS Combinators</title>
<pubDate>Thu, 19 Jan 2012 08:00:03 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/Intro-to-CSS-Combinators/</link>
		<description><![CDATA[In this first part of a three-part tutorial, you'll get a quick overview of what CSS combinators are and how to use them to improve the overall efficiency and robustness of your CSS code.]]></description>
		<content:encoded><![CDATA[Combinators are quite possibly one of the most underrated features of CSS. However, the indifferent attitude with which programmers treat them wasn't because of their useless nature or limited functionality. In fact, as with many other  forgotten  facilities provided by the specification, many browser vendors included  quot;support quot; for combinators that was buggy, poor, and in the worse case, simply non-existent. Despite  this, today there's new hope for getting combinators up and running, as most browsers (yes, even Internet Explorer 7 and up) allow you to use them in a pretty confident ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/Intro-to-CSS-Combinators/</guid>
</item>
<item><title>CSS Semicircles and Web Page Headers</title>
<pubDate>Wed, 28 Dec 2011 08:00:04 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Semicircles-and-Web-Page-Headers/</link>
		<description><![CDATA[In this two-part tutorial, I develop a few approachable examples that show how to use the  quot;border-radius quot; CSS3 property in a somewhat “unconventional” fashion to render all sorts of circular shapes on a web page. With this technique, you need not  deal with multiple (and sometimes heavy) background images.]]></description>
		<content:encoded><![CDATA[Are you looking for a simple approach that lets you decorate your HTML elements with a few engaging circular shapes, but don't want to deal with the burdens and complexities of Photoshop? Then take a look at the  border-radius  CSS3 property. It not only will permit you to render native rounded corners in a snap, but it'll be your best partner for displaying circles on a web page without using background images. Of course, the best way to prove the  hidden  functionality provided by  border-radius  is with some concrete, functional code samples. In the first part of this two-part tutorial I de...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Semicircles-and-Web-Page-Headers/</guid>
</item>
<item><title>Drawing Circular Shapes with CSS3 and Border Radius</title>
<pubDate>Wed, 21 Dec 2011 00:00:00 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/Drawing-Circular-Shapes-with-CSS3-and-Border-Radius/</link>
		<description><![CDATA[In this first part of a two-part tutorial, I demonstrate how easy it is to drop a few circles on a web page, thanks to the “border-radius” property.]]></description>
		<content:encoded><![CDATA[Since they made their triumphal appearance on the stage of web design, some CSS3 properties have become the favorite tools of many designers because of the functionality they offer right out of the box. Many of these properties make it much easier to build eye-catching web pages that (hopefully) keep users engaged. While there's nothing wrong with using these properties in a  quot;conventional quot; way, it's fun to take CSS3 to the next level by using the properties in a more  atypical  fashion. Doing this allows you, among other things, to create quite appealing effects.  That's exactly the ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/Drawing-Circular-Shapes-with-CSS3-and-Border-Radius/</guid>
</item>
<item><title>More CSS Pagination Link Templates</title>
<pubDate>Wed, 14 Dec 2011 11:30:03 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/More-CSS-Pagination-Link-Templates/</link>
		<description><![CDATA[If you want to extend the functionality of your website with a neat pagination mechanism, but aren't sure of how to give the page links an appealing look, then keep reading this tutorial. In a step-by-step fashion, youll learn how to create several ready-to-use pagination templates with only a few straightforward CSS properties. This is the conclusion to a two-part article.]]></description>
		<content:encoded><![CDATA[If you've read the first part, you probably have a pretty good idea of how to provide your pagination links with an engaging appearance. In that article I developed a couple of clean templates, which made use of some background colors and borders to polish the link's visual presentation. Even though the properties involved in the styling process were old favorites, which you've surely been using for years, they yields results that were more than acceptable. As I said just a moment ago, my plan here is to put at your disposal a decent variety of pagination templates. This way, you can pick the ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/More-CSS-Pagination-Link-Templates/</guid>
</item>
<item><title>CSS Pagination Links</title>
<pubDate>Tue, 06 Dec 2011 14:30:05 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Pagination-Links/</link>
		<description><![CDATA[In this first part of a two-part tutorial, I show how to create a couple of basic paging templates. You can massage and tweak them to fit more specific requirements. As you'll see, the entire construction process does not require any special CSS skills.]]></description>
		<content:encoded><![CDATA[The most difficult part of building a pagination system is the logic that must be implemented behind the scenes. In most cases, the tasks of calculating the number of links that will be displayed per page, as well as the amount of pages that will be used to span the corresponding content are performed by some kind of server-side component (even though some JavaScript libraries accomplish this quite decently in the client side). Of course, you don't need to reinvent the wheel every time you wish to drop a pagination mechanism onto your web pages. Currently there's a plethora of libraries and fr...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Pagination-Links/</guid>
</item>
<item><title>Animated CSS3 Image Gallery: Advanced Transitions</title>
<pubDate>Mon, 28 Nov 2011 08:00:07 -0500</pubDate>
<link>https://www.devarticles.com/c/a/Web-Style-Sheets/Animated-CSS3-Image-Gallery-Advanced-Transitions/</link>
		<description><![CDATA[In this second part of a two-part series on building image galleries with CSS3, I'll show you a different way to handle transitions between thumbnails and full-sized images.]]></description>
		<content:encoded><![CDATA[Although the idea may sound intimidating, building a dynamic (and by dynamic I mean  animated quot;) image gallery using a few CSS3 properties is much easier than you might think. Indeed, in the previous part of this series, I implemented a simple, yet extendable image gallery, which used the  transition  CSS3 property to dynamically hide and display a given image when users hovered their cursors on its associated thumbnail. Best of all, the entire animation process didn't require coding a single line of JavaScript.  As with any other web-based user interface component, it's possible to easily...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">https://www.devarticles.com/c/a/Web-Style-Sheets/Animated-CSS3-Image-Gallery-Advanced-Transitions/</guid>
</item>
</channel>
</rss>
