Cascading Style Sheet 3 (CSS3)
5 posters
Hello, Compile! :: COET :: CSS
Page 1 of 1
Cascading Style Sheet 3 (CSS3)
by Admin Fri Sep 15, 2017 1:33 pm
New Features in the Evolving Visual
Language of the Web
CSS3 - The latest standard for CSS
Cascading style sheets (CSS) is the visual language of the web, controlling everything visual about a website, from background colors and navigation bars to fonts and text alignment. CSS allows developers and designers to create the style and layout of a page and add global styling to all pages.
With its newest version, CSS3, it’s evolved to do even more. In this article, we’ll compare the old CSS with the new, highlighting new features that are making this legacy web technology keep up with the times.
So, what’s new with CSS3?
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.
_______________________________
Have you try this latest version of CSS?
Do you love it's new features?
I wanna hear your thoughts, share it on the comment section below.
Language of the Web
CSS3 - The latest standard for CSS
Cascading style sheets (CSS) is the visual language of the web, controlling everything visual about a website, from background colors and navigation bars to fonts and text alignment. CSS allows developers and designers to create the style and layout of a page and add global styling to all pages.
With its newest version, CSS3, it’s evolved to do even more. In this article, we’ll compare the old CSS with the new, highlighting new features that are making this legacy web technology keep up with the times.
So, what’s new with CSS3?
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.
_______________________________
Have you try this latest version of CSS?
Do you love it's new features?
I wanna hear your thoughts, share it on the comment section below.
Admin- Master
- Posts : 20
Join date : 2017-09-15
Age : 25 -
Re: Cascading Style Sheet 3 (CSS3)
by chae Sat Oct 14, 2017 6:15 pm
We use CSS not CSS3. We aren't aware that there is a new update on CSS. I'm going to try this later 
Thanks for the info.
Thanks for the info.
chae- Master
- Posts : 8
Join date : 2017-10-14
Re: Cascading Style Sheet 3 (CSS3)
by Liza Mon Oct 16, 2017 7:30 pm
chae wrote:We use CSS not CSS3. We aren't aware that there is a new update on CSS. I'm going to try this later
the same thought with you chae, I'm excited to try this one
Liza- Master
- Posts : 7
Join date : 2017-10-16
Re: Cascading Style Sheet 3 (CSS3)
by Liza Mon Oct 16, 2017 7:35 pm
But ma'am what is the advantage of CSS3? compared to CSS. Can you give an example
Liza- Master
- Posts : 7
Join date : 2017-10-16
Re: Cascading Style Sheet 3 (CSS3)
by janella Mon Oct 16, 2017 7:58 pm
hi maam justine,, thanks for the info ,.... now i know that we also have an css3..
janella- Member
- Posts : 3
Join date : 2017-10-16
Re: Cascading Style Sheet 3 (CSS3)
by Nadine Lust Mon Oct 16, 2017 8:17 pm
I haven't heard of css3. But I'm actually familiar with css. Can you tell me what are the new features on css3 that css dont have?
Nadine Lust- Master
- Posts : 8
Join date : 2017-10-16
Re: Cascading Style Sheet 3 (CSS3)
by Admin Tue Oct 17, 2017 10:17 am
Liza wrote:But ma'am what is the advantage of CSS3? compared to CSS. Can you give an example
Hi liza! Since its last version, ccs2, Cascading Style Sheets have taken a huge leap forward with its latest version CSS3. The fact that the new version enhances the look of a design project, but that’s just the beginning of what designers can do when using CSS3. Here is a look at some of the possibilities:
1. Compatible With Older Versions
2. Simple and Independent
3. View and Change Friendly
4. Speedy Development
5. Platform Independent and Cross Browser Compatible
6. Attractive Backgrounds
7. Borders and Texts
8. Images and Animations
9. Testing the Features
Are you already to convince that CSS3 is way better?
Admin- Master
- Posts : 20
Join date : 2017-09-15
Age : 25 -
Re: Cascading Style Sheet 3 (CSS3)
by Admin Tue Oct 17, 2017 10:19 am
janella wrote: hi maam justine,, thanks for the info ,.... now i know that we also have an css3..
No problem, Janella! You can already use CSS3, now that you already know it's new features.
pawer
Admin- Master
- Posts : 20
Join date : 2017-09-15
Age : 25 -
Re: Cascading Style Sheet 3 (CSS3)
by Admin Tue Oct 17, 2017 10:22 am
Nadine Lust wrote:I haven't heard of css3. But I'm actually familiar with css. Can you tell me what are the new features on css3 that css dont have?
Hi nadine! You and liza has the same question. Well again, Since its last version, ccs2, Cascading Style Sheets have taken a huge leap forward with its latest version CSS3. The fact that the new version enhances the look of a design project, but that’s just the beginning of what designers can do when using CSS3. Here is a look at some of the possibilities:
1. Compatible With Older Versions
2. Simple and Independent
3. View and Change Friendly
4. Speedy Development
5. Platform Independent and Cross Browser Compatible
6. Attractive Backgrounds
7. Borders and Texts
8. Images and Animations
9. Testing the Features
Are you already to convince that CSS3 is way better?
Admin- Master
- Posts : 20
Join date : 2017-09-15
Age : 25 -
Thank you atleast I have an idea now. I'm not totally convince. not until I see it for myself :)
by Nadine Lust Tue Oct 17, 2017 9:51 pm
Admin wrote:Nadine Lust wrote:I haven't heard of css3. But I'm actually familiar with css. Can you tell me what are the new features on css3 that css dont have?
Hi nadine! You and liza has the same question. Well again, Since its last version, ccs2, Cascading Style Sheets have taken a huge leap forward with its latest version CSS3. The fact that the new version enhances the look of a design project, but that’s just the beginning of what designers can do when using CSS3. Here is a look at some of the possibilities:
1. Compatible With Older Versions
2. Simple and Independent
3. View and Change Friendly
4. Speedy Development
5. Platform Independent and Cross Browser Compatible
6. Attractive Backgrounds
7. Borders and Texts
8. Images and Animations
9. Testing the Features
Are you already to convince that CSS3 is way better?
Nadine Lust- Master
- Posts : 8
Join date : 2017-10-16
Hello, Compile! :: COET :: CSS
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|