How Slang

Introduction to CSS3

The name Cascading Style Sheets comes from the English Cascading Style Sheets, from which it takes its acronym. According to ABBREVIATIONFINDER, CSS is a language used to define the presentation of a structured document written in HTML or XML (and by extension in XHTML). The W3C (World Wide Web Consortium) is in charge of formulating the specification of the style sheets that will serve as a standard for user agents or browsers.

The idea behind CSS development is to separate the structure of a document from its presentation.
The style information can be attached as a separate document or in the same HTML document. In the latter case, general styles could be defined in the header of the document or in each particular tag by means of the “<style>” attribute.

What is css 3 for?

CSS is used to define the aesthetics of a website in an external document and that same allows that by modifying that document (the CSS sheet) we can change the entire aesthetics of a website, the same website can totally vary aesthetics by changing only the CSS, without touching the HTML or jsp or asp documents that compose it at all.
CSS is a language used to give aesthetics to an HTML document (colors, font sizes, element sizes, with css we can establish different rules that will indicate how a document should be presented. We can indicate properties such as color, font size, the font, if it is bold, if it is italic, other things that are not letters can also be shaped, such as background colors of a page, sizes of an element (for example the height and width of a table.

CSS3 main features

1. Attribute gradient colors on the border with CSS and Firefox: Possibility of defining a color gradient on the border of the elements with CSS, in a non-standard attribute of Firefox.
   2. Rounded edges in CSS 3: CSS 3 features include rounded edges, through the border-radius attribute, which defines the curvature that the element’s border should have.
2. Multiple background images with CSS: How to get a page element to have several background images at the same time, with basic CSS and with CSS features 3.
   4. RGBA colors in CSS 3: We will see what RGBA colors are and its notation, which are included in the CSS 3 Cascading Style Sheets specification.
   5. Word-wrap in CSS 3: A property of CSS 3 that serves to break words that are too long and do not fit integers by width of a box.
   6. Multi-column texts with CSS 3: CSS 3 incorporates new attributes so that the browser is in charge of producing multi-column text, that is, it can directly lay out the text in several columns without having to do anything ourselves.
3. Borders with images in CSS 3: The border-image attribute and several others of CSS 3 will make it possible to use images as borders of the elements of the page, without special HTML code, simply with style sheets.
4. Shadows in CSS 3 with box-shadow: Create shadows in CSS3 with the box-shadow attribute. At last we can apply shadows to the elements of the page, without using images, Javascript or anything extra, simply with a CSS 3 attribute.
5. Outer glow with CSS3: How to make an element that has an outer glow with CSS3 and the box-shadow property.
6. CSS 3 background-origin property: The CSS 3 background-origin property allows you to decide the position of the background image with respect to the border, padding or element content.
7. CSS3 overflow-x and overflow-y attributes: Description of the CSS3 overflow-x and overflow-y attributes, which are used to define how to render content when it exceeds the limits of a container in the horizontal or vertical position.
8. Introduction to @ font-face in CSS: Fonts in CSS 3. Syntax and main characteristics of the CSS rule @ font-face, which allows us to use any typeface on a web page.
9. Shadows in text with CSS text-shadow: How to apply shadows and other effects to text with CSS and the text-shadow attribute.

Advantages and disadvantages of css3

You get greater control over the presentation of the site by having all the CSS code gathered in one, which facilitates its modification.
By being able to choose the CSS file that we want to display, you can increase accessibility since we can assign a specific CSS code to people with visual impairments, for example. This is detected by the web browser.
We manage to make the HTML code much more readable by having the CSS code apart (As long as we don’t use inline styles, of course).
Different style sheets can be displayed depending on the device we are using (printed version, mobile version, read by a voice synthesizer…) or let the user choose.
Thanks to the CSS Sprites technique we can lighten the load on our site by putting all the images together in one.
The novelties of CSS3 allow us to save time and work by being able to follow various techniques (rounded edges, shadow in the text, shadow in the boxes, etc.) without using a graphic editor.

Disadvantages

There are limitations that CSS 2.x still does not allow, for example, vertical alignment of layers, shadows, rounded edges…
The use of tables allowed us to create complex designs much easier than using CSS, although CSS3 is trying facilitate such work.
Sometimes, depending on the browser (Acid tests), the page that has been laid out with CSS may look different (Although, if we have followed the web standards correctly, the problem is with the browser).

Applications or uses of css3

1. Buttons and HTML: We show some shortcomings of HTML in the design of forms and specifically in the touch-up of buttons for submitting forms.
   2. Buttons and CSS: We explain the improvements that can be obtained by the use of style sheets in the creation of forms and, more specifically, the submit buttons.
   3. Buttons and images: How we can improve the buttons with the use of images instead of ordinary submit buttons.
2. Buttons, CSS and tables: We are going to improve the normal buttons, which when clicked make a click effect, with images on the sides to improve their appearance.
   5. Buttons, images and events: So that the image buttons do not ignore the keyboard events, we are going to use a Javascript function.
   6. Buttons, tables and events: We extend the previous example so that the button text can be easily edited, without losing its presentation.

Importance of its use in certain problems or in certain systems

The CSS allows us to control the styles of our HTML elements, in fact with the HTML we define the structure of the web & with the CSS everything else – that is, colors, fonts, location & everything that is going to be displayed on our website.

Ways to apply CSS to an HTML page

1. Inside the HTML tag – controlling only the tag – for example – p {color: red; text-align: center;}.
2. Inside the HTML file (inside the HEAD zone) – controlling only this file –
   <style> p {color: red; text-align: center;} </style>.
3. Creating an external.css file, controlling all the web files of the site using the tag to apply the styles – <link rel = ”stylesheet” type = ”text / css” href = ”theme.css” /> – this goes inside the HEAD of our page p {color: red; text-align: center;} – we apply the styles in the external css file.

CSS3 considered cutting edge or modern technology

The new CSS features allow us to add animation effects to most HTML elements, without the need for Javascript or Flash. At the moment, it is compatible with WebKit browsers – including Safari, Safari for iOS and Chrome – and Firefox. Internet Explorer, as of version 10, is expected to also have support for this type of animation. Because the technology is relatively new, a prefix must be added with the browser engine. In our case, we will carry out the examples with the prefixes webkit and moz.