Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions exercises/04.1-Combined-Rules/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Los archivos CSS ocupan espacio en tu servidor y también tardan en descargarse (como todo); es otro documento de texto que el navegador debe descargar antes de mostrar la página, por lo que es importante mantener el documento CSS lo más pequeño posible.

Una forma de hacerlo es combinando varias propiedades en una, como con "border":
Una forma de hacerlo es combinando varias propiedades en una, como con `border`:

```css
border-color: black;
Expand All @@ -16,7 +16,7 @@ Las propiedades de border se pueden consolidar en una sola línea así:
border: black 1px solid;
```

# 📝 Instrucciones:
## 📝 Instrucciones:


1. Combina las 4 reglas de padding en una sola utilizando la regla `padding`.
Expand All @@ -25,7 +25,7 @@ border: black 1px solid;

*El `background-size` no se puede combinar, los navegadores aún no lo admiten.*

## Pista:
## 💡 Pista:

- Como usar el background-size: http://lmgtfy.com/?q=css+background
- Como usar el padding: http://lmgtfy.com/?q=css+padding
- Cómo usar el background-size: http://lmgtfy.com/?q=css+background
- Cómo usar el padding: http://lmgtfy.com/?q=css+padding
10 changes: 5 additions & 5 deletions exercises/04.1-Combined-Rules/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ tutorial: "https://youtu.be/watch?v=uQS5QeEE-B4"

# `04.1` Combined Rules

CSS files take space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why is important to keep the CSS document as small as possible.
CSS files take up space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why it's important to keep the CSS document as small as possible.

One way to do that is by combining several properties into one such as with `border`:
One way to do that is by combining several properties into one, such as with `border`:

```css
border-color: black;
border-style: solid;
border-width: 1px;
```

Border's properties can be consolidated into a single line as:
Border's properties can be consolidated into a single line like this:

```css
border: black 1px solid;
Expand All @@ -24,11 +24,11 @@ border: black 1px solid;

1. Combine the 4 padding rules into just one using the `padding` rule.

2. Combine the all background rules, but the `background-size`, into just one line using the `background:` rule.
2. Combine all background rules, but the `background-size`, into just one line using the `background:` rule.

*The `background-size` cannot be combined, the browsers don't support it yet.*

## Hint:
## 💡 Hint:

- How to use the background-size: http://lmgtfy.com/?q=css+background

Expand Down
12 changes: 6 additions & 6 deletions exercises/04.1-Combined-Rules/tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ describe("All the styles should be applied", ()=> {
const link = document.querySelector("link");
const title = document.querySelector('title');

test("The body tag should not contains any inline style", ()=> {
test("The body tag should not contain any inline style", ()=> {
document.querySelector(
"head"
).innerHTML = `<style>${css.toString()}</style>`;
let emptyBodyInlineStyle = {};
expect(body.style._values).toEqual(emptyBodyInlineStyle);
});

test("the width should be '50px'", ()=> {
test("The width should be '50px'", ()=> {
// get computed styles of any element you like
document.querySelector(
"head"
Expand All @@ -37,7 +37,7 @@ describe("All the styles should be applied", ()=> {
expect(orangeHoverSelector).toBe('50px');
});

test("the height should be '50px'", ()=> {
test("The height should be '50px'", ()=> {
// get computed styles of any element you like
document.querySelector(
"head"
Expand All @@ -55,7 +55,7 @@ describe("All the styles should be applied", ()=> {
expect(orangeHoverSelector).toBe('50px');
});

test("the background-size should be contain", ()=> {
test("The background-size should be 'contain'", ()=> {
document.querySelector(
"head"
).innerHTML = `<style>${css.toString()}</style>`;
Expand All @@ -72,7 +72,7 @@ describe("All the styles should be applied", ()=> {
expect(orangeHoverSelector).toBe('contain');
});

test("the background should include the shorthand property", ()=> {
test("The background should include the shorthand property", ()=> {
document.querySelector(
"head"
).innerHTML = `<style>${css.toString()}</style>`;
Expand Down Expand Up @@ -102,7 +102,7 @@ describe("All the styles should be applied", ()=> {
expect(orangeHoverSelector).toContain('url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)');
});

test("the padding should include the shorthand property in the right order (top, right, bottom, left)", ()=> {
test("The padding should include the shorthand property in the right order (top, right, bottom, left)", ()=> {
document.querySelector(
"head"
).innerHTML = `<style>${css.toString()}</style>`;
Expand Down