ACTIVITY:

“CSS3”

TÉCNICO SUPERIOR UNIVERSITARIO EN

TECNOLOGÍAS DE LA INFORMACIÓN
AREA: DESARROLLO DE SOFTWARE
MULTIPLATAFORMA
PRESENTS:

HUMBERTO MISAEL ARAGUZ CRUZ

CT. REYNOSA, TAMAULIPAS AUGUST 2024.

Table of contents

Subject Page

Table of contents .................................................................................................. i

Index of figures .................................................................................................... ii

Introduction ......................................................................................................... 1

DIVs (Division elements) ..................................................................................... 2

Flexbox and grid layouts ................................................................................. 2

Colors ................................................................................................................. 3

Color schemes and variables .......................................................................... 3

Positioning .......................................................................................................... 4

Relative, absolute, and fixed positioning ......................................................... 4

Margins and padding .......................................................................................... 5

Spacing techniques ......................................................................................... 5

Fonts ................................................................................................................... 6

Font styling and responsive typography .......................................................... 6

Media queries ..................................................................................................... 7

Responsive design .......................................................................................... 7

Mobile application view example......................................................................... 7

Conclusion ........................................................................................................ 11

References........................................................................................................ 12

i
Index of figures

Figure Page

Figure 1 Flexbox example ................................................................................... 2

Figure 2 Grid example ........................................................................................ 2
Figure 3 Variables color example........................................................................ 3
Figure 4 Gradients color example ....................................................................... 3
Figure 5 Relative positioning example ................................................................ 4
Figure 6 Absolute positioning example ............................................................... 4
Figure 7 Fixed positioning example .................................................................... 5
Figure 8 Margin example .................................................................................... 5
Figure 9 Padding example .................................................................................. 5
Figure 10 Font families’ example ........................................................................ 6
Figure 11 Responsive typography example ........................................................ 6
Figure 12 Media query example.......................................................................... 7
Figure 13 Mobile application view example 1 ..................................................... 7
Figure 14 Mobile application view example 2 ..................................................... 8
Figure 15 Mobile application view example 3 ..................................................... 9
Figure 16 Mobile application view example 4 ..................................................... 9
Figure 17 Mobile application view ..................................................................... 10

ii
Introduction

Cascading Style Sheets (CSS) is a language used to illustrate a document’s look,

style, and format in any markup language. In simple words, it is used to style and
organize the layout of Web pages. CSS3 is the latest version of an earlier CSS
version, CSS2.

A significant change in CSS3 compared to CSS2 is the introduction of modules.

This functionality has the advantage of expediting the finalization and acceptance
of specifications, as segments can be finalized and accepted incrementally. Also,
this allows the browser to support segments of the specification.

The CSS3 specification adds new features to the CSS, including animation and
transitions, as well as support for responsive design. It also provides more
selectors, allowing web designers to select specific elements on a web page
quickly. (Lambdatest, 2024)

1
DIVs (Division elements)

Flexbox and grid layouts

Flexbox: A one-dimensional layout method for arranging items in rows or

columns.

Figure 1 Flexbox example

Grid: A two-dimensional layout system for complex layouts.

Figure 2 Grid example

2
Colors

Color schemes and variables

Variables: Define reusable color variables.

Figure 3 Variables color example

Gradients: Use gradients for backgrounds.

Figure 4 Gradients color example

3
Positioning

Relative, absolute, and fixed positioning

Relative positioning: Moves an element relative to its normal position.

Figure 5 Relative positioning example

Absolute positioning: Positions an element relative to its nearest positioned

ancestor.

Figure 6 Absolute positioning example

Fixed positioning: Positions an element relative to the viewport.

4
 Figure 7 Fixed positioning example

Margins and padding

Spacing techniques

Margins: External spacing of an element.

Figure 8 Margin example

Padding: Internal spacing within an element.

Figure 9 Padding example

5
Fonts

Font styling and responsive typography

Font families: Use custom fonts with “@font-face” or web-safe fonts.

Figure 10 Font families’ example

Responsive typography: Adjust font size based on screen size.

Figure 11 Responsive typography example

6
Media queries

Responsive design

Basic media query: Adjust layout and styles for different screen sizes.

Figure 12 Media query example

Mobile application view example

Combining the above elements to create a simple, responsive mobile application

view:

Figure 13 Mobile application view example 1

7
Figure 14 Mobile application view example 2

8
Figure 15 Mobile application view example 3

Figure 16 Mobile application view example 4

9
Figure 17 Mobile application view

10
Conclusion

In conclusion, by using CSS3 properties effectively, you can create mobile apps
that are not only visually appealing but also responsive and easy to use. Grid and
Flexbox layouts help shape DIVs, while media queries ensure responsiveness.
Using color variations and gradients can improve visual design, and proper
placement, margins, and padding can keep your design clean and organized.
Responsive typography ensures readability on different screen sizes.

11
References

EDUCBA. (2019, 5 29). What is CSS3? | Uses & Need | Features and Advantages
of CSS3. Retrieved from EDUCBA: https://www.educba.com/what-is-css3/

Lambdatest. (2024). What is CSS3. Retrieved from Lambdatest.com:

https://www.lambdatest.com/software-testing-questions/what-is-css3

12