CSS vs CSS3 properties and all in details for developer guide(front-end) -Puran Kharka

An Introduction to CSS3

CSS3 has been under development since 2005 and is the latest standard for the CSS language. It is backwards compatible, meaning that it works with all previous versions of CSS without depreciating the code. Broadly, CSS3 has worked on removing old bugs and extending previous features, like the use of transition effects. More specifically, however, CSS3 focuses upon mobile compatibility, working to ensure that designs can adapt to different screen sizes quickly and easily. A central role of CSS3 is to prioritize and optimize page load speed, helping to create websites that are less reliant upon image files for design elements. However, some older browsers, such as Internet Explorer 9, do not support all of CSS3’s new features.

Difference between CSS and CSS3

In this table, we have drawn out the key difference between CSS and CSS3. As you will see, CSS3 has taken the properties of CSS and developed them to include new features and offer greater ease of use for designers. Importantly, CSS has come to naturally include the adopted features of the CSS2 update, which are now generally regarded as the default current features.

CSS	CSS3
Compatible with all current browsers.	Incompatible with older browsers, such as IE 9.
Image files required to design background elements, such as borders and image gradients.	Contains elements like rounded borders that can be included using just code.
Animation requires coding using a scripting language.	Animation features included along with text effects, such as text shadow.
No use of modules – overall more complex to use.	Incorporation of modules to group categories, enabling smooth updates of individual features.
Single text blocks predominantly supported.	Multi-column text blocks possible, improving on-page reading and design.

These differences clearly show the direction that CSS is taking, driven by an online environment that values smooth transitions, clean design and fast load times. Looking ahead, we can only see this trend continuing. It is broadly acknowledged that HTML6 and CSS4 are in the early stages of development, but the biggest obstacle to their release and use will be lack of browser support. Until this changes, we can expect to see small alterations being made to the CSS3 framework that continues to hone and debug the language for current users.

So, what’s new with CSS3?

CSS3 is the latest standard for the CSS language, under development since 2005. It’s backwards-compatible with older versions of CSS, and has new properties that debug previous quirks and extend CSS2 features, and it’s even got some JavaScript-like capabilities. CSS3 has also addressed a number of mobile development concerns, accounting for responsive design and making up for issues caused by Adobe Flash incompatibility on mobile devices. In combination with JavaScript, CSS3 has a lot of the functionality of Flash now–animation- and interactivity-wise.

Here are seven major things that differentiate CSS3 from its predecessors.

1. Mobile-first mentality

CSS3 inherently supports responsive design, and is equipped to handle media queries. Media queries are calls made by the code to determine what device and size screen a user is viewing the site on. This adds a whole new responsive design capability to the CSS repertoire.

2. Module-based code

One of the biggest developments is that CSS3 is split into “modules.” All of the old CSS specifications have been migrated over to the new version and divided into smaller pieces (with some new modules added as well).

Other CSS3 modules include:

• Selectors: Developers can edit elements by name, class, type, attribute, and more.
• The Box Model module: This describes an approach to creating consistency between HTML elements on a page, or “boxes.” By applying margins, borders, and padding to a box’s content, developers can clear area around an element, give it borders, and more.
• Backgrounds and borders: With better control of the treatments of element borders and page backgrounds, CSS3 also enables rounded corners on boxes and drop shadows. Before CSS3, backgrounds had to be achieved with images, which added to a page’s file size and load time.
• Text effects: CSS3 includes shadow effects, text overflow (which hides text that gets too long for its element), word breaking (automatically breaking text so it fits within a box), and text wrapping–all things that save designers lots of formatting time.

3. Web font support gives designers access to way more than just “web safe” fonts

Before CSS3, designers could only use “web safe” fonts to be 100 percent sure that the fonts would always display the same on everyone’s machine. Web safe fonts are fonts that every single computer has installed and recognizes. If a designer used common fonts like Times New Roman or Arial, they could pretty much guarantee that any user would view their site as it was intended. However, if they wanted to use a rarer font, if it wasn’t supported by a user’s machine, it would default back to a web safe font.

Designers can now run web fonts in CSS3, special fonts like those available via Google Fonts and Typecast. These fonts can either be downloaded onto a server and run through the CSS code, or accessed directly from its source via a script, which is called right within the CSS code. This has opened up a world of possibilities for designers.

4. It enables faster development, and faster load times

What used to require background images, CSS3 can now achieve with visual enhancements, which saves developers time in production. This cuts down on calls and load times for numerous images because these effects are all built into the code. Also, pages load faster thanks to overall smaller file sizes and fewer calls.

5. Create 2D and 3D transformations, animations, and transitions

These effects allow elements on a page to rotate, grow, shrink, flip, or translate into a different color. For the first time, elements created in CSS can move on screen without requiring any JavaScript or Flash code. With transitions, an element can seamlessly change size and color. You can set a duration for a transition, e.g. creating a button that slowly expands and changes color when you mouse over it.

6. New colors and image effects

CSS3 supports new colors (RGBA, HSL, HSLA) and gradient colors, and allows for adjustments to opacity. Another biggie is its support of rounded image corners, an effect that required a lot of formatting and Photoshop work to achieve before.

7. Box-sizing has fixed some annoying alignment problems

Box-sizing allows developers to get the sizing of elements right without having to subtract dimensions for padding and borders. With the box-sizing property, the padding and border are included in the height and width.

CSS is a foundational web development technology that remains at the heart of how everything on the web looks, but with its latest evolution, it’s proving capable of so much more.

CSS Properties Link to download the templates of css3 and jquery click here: https://tutorialzine.com/2010/02/html5-css3-website-templateOrder by Alphabet

This section contains a complete list of standard properties belonging to the latest CSS3 specifications. All the properties are grouped into categories.

Animation Properties

Property	Description
animation	Specifies the keyframe-based animations.
animation-delay	Specifies when the animation will start.
animation-direction	Specifies whether the animation should play in reverse on alternate cycles or not.
animation-duration	Specifies the number of seconds or milliseconds an animation should take to complete one cycle.
animation-fill-mode	Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-iteration-count	Specifies the number of times an animation cycle should be played before stopping.
animation-name	Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-play-state	Specifies whether the animation is running or paused.
animation-timing-function	Specifies how a CSS animation should progress over the duration of each cycle.

Background Properties

Property	Description
background	Defines a variety of background properties within one declaration.
background-attachment	Specify whether the background image is fixed in the viewport or scrolls.
background-clip	Specifies the painting area of the background.
background-color	Defines an element's background color.
background-image	Defines an element's background image.
background-origin	Specifies the positioning area of the background images.
background-position	Defines the origin of a background image.
background-repeat	Specify whether/how the background image is tiled.
background-size	Specifies the size of the background images.

Border Properties

Property	Description
border	Sets the width, style, and color for all four sides of an element's border.
border-bottom	Sets the width, style, and color of the bottom border of an element.
border-bottom-color	Sets the color of the bottom border of an element.
border-bottom-left-radius	Defines the shape of the bottom-left border corner of an element.
border-bottom-right-radius	Defines the shape of the bottom-right border corner of an element.
border-bottom-style	Sets the style of the bottom border of an element.
border-bottom-width	Sets the width of the bottom border of an element.
border-color	Sets the color of the border on all the four sides of an element.
border-image	Specifies how an image is to be used in place of the border styles.
border-image-outset	Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat	Specifies whether the image-border should be repeated, rounded or stretched.
border-image-slice	Specifies the inward offsets of the image-border.
border-image-source	Specifies the location of the image to be used as a border.
border-image-width	Specifies the width of the image-border.
border-left	Sets the width, style, and color of the left border of an element.
border-left-color	Sets the color of the left border of an element.
border-left-style	Sets the style of the left border of an element.
border-left-width	Sets the width of the left border of an element.
border-radius	Defines the shape of the border corners of an element.
border-right	Sets the width, style, and color of the right border of an element.
border-right-color	Sets the color of the right border of an element.
border-right-style	Sets the style of the right border of an element.
border-right-width	Sets the width of the right border of an element.
border-style	Sets the style of the border on all the four sides of an element.
border-top	Sets the width, style, and color of the top border of an element.
border-top-color	Sets the color of the top border of an element.
border-top-left-radius	Defines the shape of the top-left border corner of an element.
border-top-right-radius	Defines the shape of the top-right border corner of an element.
border-top-style	Sets the style of the top border of an element.
border-top-width	Sets the width of the top border of an element.
border-width	Sets the width of the border on all the four sides of an element.

Color Properties

Property	Description
color	Specify the color of the text of an element.
opacity	Specifies the transparency of an element.

Dimension Properties

Property	Description
height	Specify the height of an element.
max-height	Specify the maximum height of an element.
max-width	Specify the maximum width of an element.
min-height	Specify the minimum height of an element.
min-width	Specify the minimum width of an element.
width	Specify the width of an element.

Generated Content Properties

Property	Description
content	Inserts generated content.
quotes	Specifies quotation marks for embedded quotations.
counter-reset	Creates or resets one or more counters.
counter-increment	Increments one or more counter values.

Flexible Box Layout

Property	Description
align-content	Specifies the alignment of flexible container's items within the flex container.
align-items	Specifies the default alignment for items within the flex container.
align-self	Specifies the alignment for selected items within the flex container.
flex	Specifies the components of a flexible length.
flex-basis	Specifies the initial main size of the flex item.
flex-direction	Specifies the direction of the flexible items.
flex-flow	A shorthand property for the flex-direction and the flex-wrapproperties.
flex-grow	Specifies how the flex item will grow relative to the other items inside the flex container.
flex-shrink	Specifies how the flex item will shrink relative to the other items inside the flex container.
flex-wrap	Specifies whether the flexible items should wrap or not.
justify-content	Specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.
order	Specifies the order in which a flex items are displayed and laid out within a flex container.

Font Properties

Property	Description
font	Defines a variety of font properties within one declaration.
font-family	Defines a list of fonts for element.
font-size	Defines the font size for the text.
font-size-adjust	Preserves the readability of text when font fallback occurs.
font-stretch	Selects a normal, condensed, or expanded face from a font.
font-style	Defines the font style for the text.
font-variant	Specify the font variant.
font-weight	Specify the font weight of the text.

List Properties

Property	Description
list-style	Defines the display style for a list and list elements.
list-style-image	Specifies the image to be used as a list-item marker.
list-style-position	Specifies the position of the list-item marker.
list-style-type	Specifies the marker style for a list-item.

Margin Properties

Property	Description
margin	Sets the margin on all four sides of the element.
margin-bottom	Sets the bottom margin of the element.
margin-left	Sets the left margin of the element.
margin-right	Sets the right margin of the element.
margin-top	Sets the top margin of the element.

Multi-column Layout Properties

Property	Description
column-count	Specifies the number of columns in a multi-column element.
column-fill	Specifies how columns will be filled.
column-gap	Specifies the gap between the columns in a multi-column element.
column-rule	Specifies a straight line, or "rule", to be drawn between each column in a multi-column element.
column-rule-color	Specifies the color of the rules drawn between columns in a multi-column layout.
column-rule-style	Specifies the style of the rule drawn between the columns in a multi-column layout.
column-rule-width	Specifies the width of the rule drawn between the columns in a multi-column layout.
column-span	Specifies how many columns an element spans across in a multi-column layout.
column-width	Specifies the optimal width of the columns in a multi-column element.
columns	A shorthand property for setting column-width and column-countproperties.

Outline Properties

Property	Description
outline	Sets the width, style, and color for all four sides of an element's outline.
outline-color	Sets the color of the outline.
outline-offset	Set the space between an outline and the border edge of an element.
outline-style	Sets a style for an outline.
outline-width	Sets the width of the outline.

Padding Properties

Property	Description
padding	Sets the padding on all four sides of the element.
padding-bottom	Sets the padding to the bottom side of an element.
padding-left	Sets the padding to the left side of an element.
padding-right	Sets the padding to the right side of an element.
padding-top	Sets the padding to the top side of an element.

Print Properties

Property	Description
page-break-after	Insert a page breaks after an element.
page-break-before	Insert a page breaks before an element.
page-break-inside	Insert a page breaks inside an element.

Table Properties

Property	Description
border-collapse	Specifies whether table cell borders are connected or separated.
border-spacing	Sets the spacing between the borders of adjacent table cells.
caption-side	Specify the position of table's caption.
empty-cells	Show or hide borders and backgrounds of empty table cells.
table-layout	Specifies a table layout algorithm.

Text Properties

Property	Description
direction	Define the text direction/writing direction.
tab-size	Specifies the length of the tab character.
text-align	Sets the horizontal alignment of inline content.
text-align-last	Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify.
text-decoration	Specifies the decoration added to text.
text-decoration-color	Specifies the color of the text-decoration-line.
text-decoration-line	Specifies what kind of line decorations are added to the element.
text-decoration-style	Specifies the style of the lines specified by the text-decoration-line property
text-indent	Indent the first line of text.
text-justify	Specifies the justification method to use when the text-alignproperty is set to justify.
text-overflow	Specifies how the text content will be displayed, when it overflows the block containers.
text-shadow	Applies one or more shadows to the text content of an element.
text-transform	Transforms the case of the text.
line-height	Sets the height between lines of text.
vertical-align	Sets the vertical positioning of an element relative to the current text baseline.
letter-spacing	Sets the extra spacing between letters.
word-spacing	Sets the spacing between words.
white-space	Specifies how white space inside the element is handled.
word-break	Specifies how to break lines within words.
word-wrap	Specifies whether to break words when the content overflows the boundaries of its container.

Transform Properties

Property	Description
backface-visibility	Specifies whether or not the "back" side of a transformed element is visible when facing the user.
perspective	Defines the perspective from which all child elements of the object are viewed.
perspective-origin	Defines the origin (the vanishing point for the 3D space) for the perspective property.
transform	Applies a 2D or 3D transformation to an element.
transform-origin	Defines the origin of transformation for an element.
transform-style	Specifies how nested elements are rendered in 3D space.

Transitions Properties

Property	Description
transition	Defines the transition between two states of an element.
transition-delay	Specifies when the transition effect will start.
transition-duration	Specifies the number of seconds or milliseconds a transition effect should take to complete.
transition-property	Specifies the names of the CSS properties to which a transition effect should be applied.
transition-timing-function	Specifies the speed curve of the transition effect.

Visual formatting Properties

Property	Description
display	Specifies how an element is displayed onscreen.
position	Specifies how an element is positioned.
top	Specify the location of the top edge of the positioned element.
right	Specify the location of the right edge of the positioned element.
bottom	Specify the location of the bottom edge of the positioned element.
left	Specify the location of the left edge of the positioned element.
float	Specifies whether or not a box should float.
clear	Specifies the placement of an element in relation to floating elements.
z-index	Specifies a layering or stacking order for positioned elements.
overflow	Specifies the treatment of content that overflows the element's box.
overflow-x	Specifies how to manage the content when it overflows the width of the element's content area.
overflow-y	Specifies how to manage the content when it overflows the height of the element's content area.
resize	Specifies whether or not an element is resizable by the user.
clip	Defines the clipping region.
visibility	Specifies whether or not an element is visible.
cursor	Specify the type of cursor.
box-shadow	Applies one or more drop-shadows to the element's box.
box-sizing	Alter the default CSS box model.