What is CSS3? Difference between CSS and CSS3

 2021-07-22

What is CSS3? Difference between CSS and CSS3

Recently, the number of users who browse websites from smartphones has increased, while smartphone measures in production have become indispensable. As a result, responsive web design is often introduced, and the demand for creating websites with CSS3 is increasing.

In this article, we will consider what CSS3 is indispensable for creating the latest websites and what kind of learning skills are required for creating them.

 

1. CSS3 definition


HTML5、CSS3とは?CSS3 is the third and latest version of CSS (Cascade Style Sheets), a language that provides forms and formats for web pages.

CSS3 adds many new features that are more useful to users than CSS. By inheriting all of the previous versions and adding new features, CSS3 is now very popular in website design. It is used as a language to improve the design of web pages.

Thanks to various functions and effects, it becomes a vivid web page. In other words, CSS3 is used to make your web pages look great with flashy fonts, rich colors, stunning backgrounds, and even animations and 3D effects.

Features added in CSS3 include gradients, transformations, rounded corners, box shadows, text shadows, animations, multiple backgrounds, and more.

For example, previous versions mainly used the hexadecimal color format "#FFF, #FFFFF". You can also declare RGB colors by providing an integer "0-255" or a percentage.

CSS3 brings some new color rendering. The color keyword list has been expanded with the CSS3 color module to add 147 additional color keywords. CSS3 also offers some other options such as HSL, HSLA, and RGBA. Most notable is the change in color pattern, which can change the transparency.

 

2. Difference between CSS and CSS3


CSS3 is the latest version of CSS with more useful features. Since it's the latest version of CSS, the older version overcame the problem and improved various features.

CSS3 adds new features such as rounded corners, shadows, gradients, transitions, and animations.

The biggest change in CSS3 right now is the introduction of modules. The advantage of the module is that you can complete and approve properties faster.

  • Similarity: CSS3 is the latest version of CSS and retains the functionality of the CSS version.

For example, specify text color, size, line spacing, line alignment, etc., specify background color, background image, border, rounded corners, layout, adjust margins, etc.

  • Differences: CSS3 is the latest version of CSS, so we overcame the problem with the CSS version and improved various functions.

⇒ CSS: Round corners, box shadows, and gradations cannot be expressed. Some properties are not implemented by some browsers.

⇒ CSS3: With CSS3, it is possible to express rounded corners, box shadows, gradations, etc. that were not possible with CSS.

★ Special features:

✔️ Compatible with all browsers such as Google Chrome and Firefox. Search engine optimization, CSS3 can remove redundant HTML code, speed up browsing, and speed up page loading.

✔️ There are beautiful animation effects for each object completely created in CSS3, where most motion effects used to need Javascript help.

✔️ Specifying IDs for unique elements allows you to style them. Compared to CSS, CSS3 introduces some powerful selectors that can make your layout cleaner and your stylesheets better.

Related article: Comparison of HTML and HTML5 

 

3. Features of CSS3


grey and white computer keyboard beside grey headphones3.1. Attribute Selector

Attribute selectors are one of the most important parts of CSS because you can target specific elements of your website in different ways so that you can apply properties.

CSS3 has a lot more new attribute selectors.

Three attribute selectors have been added that allow the selection of substrings.

 

⇒ [attribute ^ = value]

Shows the elements whose value of the attribute named attribute starts with value.

Example: [class^=test]

Shows the <p> element whose value for the attribute named class starts with the test.

 

⇒ [attribute $ = value]

Shows the elements whose value of the attribute named attribute ends with value.

Example: p [class $ = test]

Shows the <p> element whose value for the attribute named class ends with the test.

 

⇒ [attribute * = value]

Displays the elements whose value of the attribute named attribute contains one or more values ​​in the string.

Example: p [class*=test]

The special value of the attribute named class is tested to display the <p> element.

(The word "test" can be selected anywhere.)

3.2. CSS3 Pseudo-Classes

A pseudo-class is a keyword attached to a selector that specifies a specific state for the selected element. In addition, the pseudo-class is an interaction of link ": hover" ": active" ": visited" ": focus, etc."

: hover

Example: In a pseudo-class, you can change the color of the button when the user's pointer hits it.

button : hover {

color: green;  

}

 : root 

HTML allows you to select the root element of the tree that represents the document.

Example: Allow HTML for element scrollbars in documents.

 : root{

overflow:auto;

}

 : first-child selector , :last-child 

A selectable first and last element is added to the parent element.

You can only select elements that have a parent element, and you cannot select independent elements.

Example: Style the last element.

p:last-child{

font-style: italic;

}

 : target  

Use this when you need to enhance the prominent title of an article.

When the user clicks on a link on the same page, it not only takes you to that tab but also adds the link with a highlighting format.

span.notice:target{

 font-size:2em; font-style: bold;

}

<a href='#section2'>Section 2</a>

<p id='section2'></p>

 : not  

It is a negative selector and can be combined with other selectors.

Example: Set border attribute around img without border.

img:not([border]){

border: 1;

}

3.3. CSS3 colors

CSS3 colors are supported in many new ways of writing. The color keyword list has been expanded to 147 colors in the CSS3 color module. The most notable change in these new color types is the ability to declare translucent colors.

3.4. RGBA

Rgba is used to specify colors in the RGBA color model. Alpha represents the transparency of a color.

The RGBA color model is an RGB color model with the addition of Alpha to the three colors of red, green, and blue. By adjusting the brightness for each RGB color, various colors and colors with various brightness are expressed.

In addition, by adding an alpha value, it can be expressed step by step from completely opaque (100%) to completely transparent (0%).

3.5. HSL and HSLA

HSL is a method of expressing color with three elements: hue, saturation, and lightness.

In HSL, the saturation is 0 to 100%, and the smaller the value, the closer to gray.

Hue is specified from 0 to 360 degrees. Examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta

Saturation is specified from 0% to 100%. 0% is gray 100% and pure color

Brightness (Lightness) is specified from 0% to 100%. 0% brightness is black, 100% is white, and 50% is the actual color.

HSLA specifies the transparency of a color. Hue / Saturation / Lightness / Transparency (Alpha)

  div{

background: hsla (hue, saturation%, brightness%, transparency);

}

Example: When 50% translucent white

div{

background: hsla (0, 0%, 100%, 0.5);

}

3.6. Opacity

Opacity is used to specify the transparency of an element.

If you want to apply the transparency effect individually to the background color and border color instead of the entire object, you can specify it in RGBA.

The usage of opacity and alpha is similar, but the functionality is different.

3.7. Border-radius

The Border-radius property is used to specify the rounded corners of the four corners of the box at once.

Example: border-radius: 14px;

Alternatively, you can specify the rounded corners of each corner individually.

Upper left: border-top-left-radius

Upper right: border-top-right-radius

Bottom left: border-bottom-left-radius

Bottom right: border-bottom-left-radius

3.8. Drop Shadows

Drop Shadows Drop shadows apply a drop shadow effect to an image.

Use the box-shadow property. Specifies the color, height, width, blur, and offset of shadows inside and outside the element.

Example: box-shadow: 2px 5px 0 0 rgba (72,72,72,1);

3.9. Text Shadows

Text Shadow applies a drop shadow effect to characters. Use the Text-shadow property.

Example: text-shadow: topOffset leftOffset blurRadius color;

3.10. Linear Gradients

Linear-Gradients is the creation of images consisting of continuous linear changes between two or more colors.

In this way, programmers can quickly create linear gradients with CSS3.

Syntax: background: linear-gradient (direction, color 1, color 2)

Example: The direction of the gradient can be specified in degrees by replacing "to right" with a specific number of degrees.

#grad {

background: linear-gradient (to right, red, yellow);

}

3.11. Radial Gradients

Radial Gradients are used to specify circular gradients.

A radial gradient is a circular, ellipse, radial-gradient that blends colors from the starting point in all directions around it.

You can also specify the start position of each color as the start color, middle color, and end color, separated by a single-byte space.

Syntax: background: radial-gradient (shape size at position, start-color, ..., last-color);

Example: #grad { background: radial-gradient(red, yellow, green); }

     #grad { background: radial-gradient(circle, red, yellow, green); }

3.12. Multiple Background Images

What are Multiple Background Images? You can apply multiple background images to an element.

Syntax: {background: background1, background 2, ..., backgroundN;

}

Example: background-image: url (firstImage.jpg), url (secondImage.gif), url (third Image.png);

 

4. Why is CSS3 so popular?


woman and man sitting in front of monitorCSS3 and HTML5 are now considered the most popular languages ​​for website design.

Besides, the development trend of the online marketing industry. The need for search engine optimization (SEO) is becoming more and more important. CSS3 provides a bridge to make your website structure more consistent and familiar to search engines like Google.

Understanding CSS3 brings many benefits to your work.

⇒ New features in CSS3 make it easier to operate and make your website more impressive and beautiful. You can also improve your design skills and build your website in a professional style.

⇒ When applying CSS3 to promote products and services, it is necessary to create an impressive website, especially in the field of advertising services. If you know CSS3, this is easy.

⇒ You can keep users on your website by adding attractive images, creating attractive texts, adding promotional videos, etc. to your website. It also provides the opportunity to reach and interact with more potential customers.

 

5. Conclusion


CSS3 goes beyond creating website interfaces. It also provides the ability to create web-based mobile games. In particular, it helps users store information and Internet utilities for offline use. And with many other benefits that CSS3 brings, CSS3 is becoming more and more popular and widely used.

We specialize in IT offshore development in Japan and overseas.

The services provided by our company are as follows.

  • Web application (.NET, JAVA, PHP, ..).
  • Mobile application: IOS (Swift, Object C), Android (Kotlin, Android).
  • System application (Cobol, ERP ...).
  • DX solution.
  • New technology (Blockchain ...).

If you are looking for an offshore development partner in Vietnam, Hachinet is a partner who can experience completely new features.

Hachinet has a complete enterprise mechanism system, various development languages, DEVWORK system employs abundant human resources and is one of the top 10 companies in offshore development in Vietnam.

Currently, 80% of Hachinet's partners are Japanese software companies, and our engineers are not only highly skilled but also able to communicate directly with customers in Japanese. Documents can be processed in 100% Japanese.

At Hachinet, we always focus on software quality and customer satisfaction. We believe that if you choose our IT outsourcing service, you can rest assured that your product will be delivered after it is implemented.

 

If you are considering offshore development, please feel free to contact us.

Here is our contact information.

Account Manager: Quan (Japanese/English available)

Phone number: (+84) 2462 900 388

Email: contact@hachinet.com

Please feel free to contact us for consultation/application by phone.

Click here for more information ▶