style tags\u2014or external style sheets\u2014typed in a separate file that is referenced from your HTML file. Most developers prefer external style sheets because they keep the styles separate from the HTML elements, therefore improving the readability and reusability of your code.",
""
],
[
"",
"",
"The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.style of your h2 element.",
"The style that is responsible for the color of an element's text is the \"color\" style.",
"Here's how you would set your h2 element's text color to blue:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"h2 element's style so that its text color is red."
],
"challengeSeed": [
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "h2 element should be red.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Lass uns jetzt die Farbe von unserem Text ändern.",
"Wir können das bewerkstelligen, indem wir den style des h2 Elements ändern.",
"Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.",
"So könntest du die Textfarbe des h2 Elements in Blau ändern:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"h2 Elements, damit die Textfarbe rot (\"red\") ist."
]
},
"fr": {
"title": "Changer la couleur du texte",
"description": [
"Changeons maintenant la couleur de quelques-uns de nos textes.",
"Nous pouvons le faire en changeant le style de votre élément h2.",
"Le style responsable de la couleur de texte d'un élément est \"color\".",
"Voici comment changer en bleu la couleur du texte de votre élément h2 :",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"h2 pour que son texte soit de couleur rouge."
]
},
"pt-br": {
"title": "Substitua a Cor do Texto",
"description": [
"Agora vamos substituir a cor de parte do nosso texto.",
"Podemos fazer isso mudando o style do elemento h2.",
"A propriedade de estilo responsável pela cor do texto se chama \"color\".",
"Você pode mudar a cor do texto de seu elemento h2 para azul assim:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"h2 para que seu texto fique com a cor vermelha."
]
},
"ru": {
"title": "Измените цвет текста",
"description": [
"Теперь давайте изменим цвет части нашего текста.",
"Мы можем сделать это изменив style нашего элемента h2.",
"Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".",
"Вот как вы могли бы установить цвет текста вашего элемента h2 синим:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"h2 таким образом, чтобы текст элемента стал красным."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08805",
"title": "Use CSS Selectors to Style Elements",
"description": [
"With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.",
"When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were giving that individual h2 element an inline style.",
"That's one way to add style to an element, but there's a better way to use CSS, which stands for Cascading Style Sheets.",
"At the top of your code, create a style element like this:",
"<style>", "Inside that style element, you can create a
</style>
CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this:",
"<style>", "Note that it's important to have both opening and closing curly braces (
h2 {color: red;}
</style>
{ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.",
"h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue."
],
"challengeSeed": [
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "h2 element.');",
"assert($(\"style\") && $(\"style\").length > 1, 'message: Create a style element.');",
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your h2 element should be blue.');",
"assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');",
"assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/style elements are valid and have a closing tag.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"CSS liefert dir hunderte Attribute oder properties um HTML Elemente auf deiner Seite zu gestalten.",
"Mit <h2 style=\"color: red\">CatPhotoApp</h2> hast du dem einzelnen h2 Element einen sogenannten inline style gegeben.",
"Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser CSS, was für Cascading Style Sheets steht, zu benutzen.",
"Erstelle über deinem Code ein style Element:",
"<style>", "Innerhalb des Style Elements kannst du einen
</style>
CSS selector für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente rot färben willst, schreibst du:",
"<style>", "Beachte, dass du öffnende und schließende geschwungene Klammern (
h2 {color: red;}
</style>
{ und }) um jeden Style setzen musst. Außerdem musst du sichergehen, dass deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon.",
"h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben."
]
},
"fr": {
"title": "Utiliser les sélecteurs CSS pour styliser des éléments",
"description": [
"Avec CSS, il y a des centaines de propriétés que vous pouvez utliser pour changer l'apparence d'un élément dans votre page.",
"Quand vous avez entré <h2 style=\"color: red\">CatPhotoApp</h2>, vous donniez à cet élément h2 uniquement, un style inline.",
"C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser CSS, acronyme de Cascading Style Sheets.",
"Au sommet de votre code, créez un élément style comme ceci :",
"<style>", "À l'intérieur de cet élément style, vous pouvez créer des
</style>
sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :",
"<style>", "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes (
h2 {color: red;}
</style>
{ and }) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.",
"h2 et créez plutôt un élément de style CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments h2 de couleur bleu."
]
},
"pt-br": {
"title": "Use Seletores CSS para Estilizar Elementos",
"description": [
"Com o CSS, existem centenas de propriedades que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.",
"Quando você usou o <h2 style=\"color: red\">CatPhotoApp<h2>, você deu ao elemento h2 um estilo inline.",
"Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar Folhas de Estilo em Cascata (Cascading Style Sheets, CSS).",
"Acima de seu código, crie um elemento style como esse: <style></style>",
"Dentro do elemento style, é possível criar um seletor CSS para todos os elementos h2. Por exemplo, se você quiser que todos os elementos h2 tenham a cor vermelha, seu elemento style será assim:",
"<style>",
" h2 {color: red;}",
"</style>",
"Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.",
"style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul."
]
},
"ru": {
"title": "Используйте CSS-селекторы для стилизации элементов",
"description": [
"В CSS существуют сотни CSS-свойств, которые вы можете использовать для изменения внешнего вида элементов вашей страницы.",
"Когда вы вводите <h2 style=\"color: red\">CatPhotoApp</h2>, вы присваиваете определённому h2 элементу встроенный стиль.",
"Это один из способов добавления стиля к элементу, но лучший способ - использование CSS, который является сокращением от Cascading Style Sheets (Каскадные таблицы стилей).",
"Вверху вашего кода создайте элемент style следующим образом:",
"<style>", "Внутри этого элемента
</style>
style вы можете создать CSS-селектор для всех элементов h2 в документе. Например, если бы вы хотели, чтобы все элементы h2 были красными, ваш элемент style выглядел бы следующим образом:",
"<style>", "Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок (
h2 {color: red;}
</style>
{ и }) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента style. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.",
"h2 и взамен создайте CSS-элемент style. Добавьте необходимый CSS, чтобы все элементы h2 стали синими."
]
}
}
},
{
"id": "bad87fee1348bd9aecf08806",
"title": "Use a CSS Class to Style an Element",
"description": [
"Classes are reusable styles that can be added to HTML elements.",
"Here's an example CSS class declaration:",
"<style>", "You can see that we've created a CSS class called
.blue-text {
color: blue;
}
</style>
blue-text within the <style> tag.",
"You can apply a class to an HTML element like this:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
"style element, change the h2 selector to .red-text and update the color's value from blue to red.",
"Give your h2 element the class attribute with a value of 'red-text'."
],
"challengeSeed": [
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "h2 element should be red.');",
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');",
"assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a red-text class and have its color set to red.');",
"assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like style=\"color: red\" in your h2 element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.",
"So sieht eine CSS Klasse aus:",
"<style>", "Du siehst, dass wir die CSS Klasse
.blue-text {
color: blue;
}
</style>
blue-text innerhalb von <style> geschrieben haben.",
"Du kannst eine Klasse folgendermaßen einem HTML Element beifügen:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginnen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.",
"h2 Selektor innerhalb deines style Elements zu .red-text und ändere den Farbwert von blue zu red.",
"Gib deinem h2 Element das class Attribut mit dem Wert 'red-text'."
]
},
"fr": {
"title": "Utiliser les classes CSS pour styler un élément",
"description": [
"Les classes sont des styles réutilisables qui peuvent être ajoutées à des éléments HTML.",
"Voici un exemple de déclaration de classe CSS :",
"<style>", "Remarquez que nous avons créer une classe CSS nommée
.blue-text {
color: blue;
}
</style>
blue-text à l'intérieur de notre balise <style>.",
"Vous pouvez appliquer une classe à un élément HTML comme ceci :",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Prenez note que que dans votre élément CSS style, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.",
"style, changez le sélecteur du h2 pour .red-text et changez la couleur, passant de blue à red.",
"Donnez à votre élément h2 l'attribut de classe la valeur de red-text."
]
},
"pt-br": {
"title": "Use Classes CSS para Estilizar Elementos",
"description": [
"As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.",
"Aqui está um exemplo de como declarar uma classe com CSS:",
"<style>",
" .blue-text {",
" color: blue;",
" }",
"</style>",
"Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <style>.",
"Você pode aplicar uma classe a um elemento HTML assim:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.",
"style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.",
"Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2."
]
},
"ru": {
"title": "Используйте CSS-класс для стилизации элемента",
"description": [
"Классы являются повторно применяемыми стилями, которые могут быть добавлены к HTML-элементам.",
"Вот пример объявления CSS-класса:",
"<style>", "Вы можете увидеть, что мы создали CSS-класс названный
.blue-text {
color: blue;
}
</style>
blue-text внутри элемента <style>.",
"Вы можете применить класс к HTML-элементу следующим образом:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Обратите внимание, что в вашем CSS-элементе style названию классов следует начинаться с точки. При присваивании классов HTML-элементам названия классов не должны начинаться с точки.",
"style, замените селектор h2 на .red-text и измените значение цвета с blue на red.",
"Присвойте вашему элементу h2 атрибут class со значением 'red-text'."
]
}
}
},
{
"id": "bad87fee1348bd9aefe08806",
"title": "Style Multiple Elements with a CSS Class",
"description": [
"Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text class to the first p element."
],
"challengeSeed": [
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "h2 element should be red.');",
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');",
"assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your first p element should be red.');",
"assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'message: Your second and third p elements should not be red.');",
"assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'message: Your first p element should have the class red-text.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.",
"Vergiss nicht dass CSS Klassenselektoren einen Punkt am Anfang brauchen:",
".blue-text {", "Aber Klassen-Deklarationen brauchen keinen Punkt:", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp</h2>",
"red-text Klasse dem ersten p Element hinzu."
]
},
"fr": {
"title": "Stylez plusieurs éléments avec une classe CSS",
"description": [
"Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant class=\"votre-classe-ici\" à l'intérieur de la balise ouvrante correspondante.",
"Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :",
".blue-text {", "Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp</h2>",
"red-text à votre premier élément p."
]
},
"pt-br": {
"title": "Estilize Múltiplos Elementos com uma Classe CSS",
"description": [
"Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\" dentro da tag de abertura do elemento.",
"Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:",
".blue-text {",
" color: blue;",
"}",
"Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:",
"<h2 class=\"blue-text\">CatPhotoApp<h2>",
"red-text ao seu primeiro elemento p."
]
},
"ru": {
"title": "Стилизуйте множество элементов с помощью CSS-класса",
"description": [
"Помните, что вы можете присваивать классы HTML-элементам используя class=\"ваш-класс-тут\" внутри открывающей метки соответствующего элемента.",
"Помните, что селекторы CSS-классов должны начинаться с точки, например:",
".blue-text {", "Но также не забывайте, что присваивание классов не использует точку, например:", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp</h2>",
"red-text к вашим элемент первые p."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08806",
"title": "Change the Font Size of an Element",
"description": [
"Font size is controlled by the font-size CSS property, like this:",
"h1 {", "
font-size: 30px;
}
<style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px)."
],
"challengeSeed": [
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Schriftgröße wird von dem CSS Attribut font-size kontrolliert:",
"h1 {", "
font-size: 30px;
}
<style> Elements, das auch deine red-text Klasse enthält, einen Eintrag für p Elemente und setzte font-size auf 16 Pixel (16px)."
]
},
"fr": {
"title": "Changez la taille de police d'un élément",
"description": [
"La taille de police est contrôlée par la propriété CSS font-size, comme ceci :",
"h1 {", "
font-size: 30px;
}
<style> qui contiens votre classe .red-text, créez une nouvelle entrée pour les éléments p et paramétrer le font-size à 16 pixels (16px)."
]
},
"pt-br": {
"title": "Mude o Tamanho da Fonte de um Elemento",
"description": [
"O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:",
"h1 {",
" font-size: 30px;",
"}",
"<style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)."
]
},
"ru": {
"title": "Измените размер шрифта элемента",
"description": [
"Размером шрифта управляют с помощтю CSS-своайства font-size, например:",
"h1 {", "
font-size: 30px;
}
<style>, который содержит ваш класс red-text, создайте вхождение для элементов p и установите свойство font-size равным 16 пикселей (16px)."
]
}
}
},
{
"id": "bad87fee1348bd9aede08807",
"title": "Set the Font Family of an Element",
"description": [
"You can set an element's font by using the font-family property.",
"For example, if you wanted to set your h2 element's font to Sans-Serif, you would use the following CSS:",
"h2 {", "
font-family: Sans-Serif;
}
p elements use the Monospace font."
],
"challengeSeed": [
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "p elements should use the font Monospace.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Du kannst einem Element mit font-family eine Schriftart zuweisen.",
"Wenn du zum Beispiel deinem h2 Element die Schriftart Sans-Serif zuweisen willst, kannst du das mit dem folgenden CSS tun:",
"h2 {", "
font-family: Sans-Serif;
}
p Elemente die Schriftart Monospace."
]
},
"fr": {
"title": "Paramétrer la famille de police d'un élément",
"description": [
"Vous pouvez paramétrer la police d'un élément en utilisant la propriété font-family.",
"Par exemple, si vous voulez paramétrer la police de votre élément h2 à Sans-Serif, vous devez utiliser le CSS suivant :",
"h2 {", "
font-family: Sans-Serif;
}
p aient la police Monospace."
]
},
"pt-br": {
"title": "Defina a Fonte para um Elemento",
"description": [
"Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.",
"Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-Serif, você poderá utilizar o seguinte código em CSS:",
"h2 {",
" font-family: Sans-Serif;",
"}",
"p utilizem o estilo de fonte Monospace."
]
},
"ru": {
"title": "Установите семейство шрифтов для элемента",
"description": [
"Вы можете установить семейство шрифтов для элемента используя свойство font-family.",
"Например, если бы вы хотели установить семейство шрифтов Sans-Serif для вашего элемента h2, вы бы использовали следующий CSS:",
"h2 {", "
font-family: Sans-Serif;
}
Monospace всем вашим элементам p."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08807",
"title": "Import a Google Font",
"description": [
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
"First, you'll need to make a call to Google to grab the Lobster font and load it into your HTML.",
"Copy the following code snippet and paste it into the top of your code editor:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Remember, before you can apply styles, like a new font, to an element, you'll need to create a CSS rule.",
"h2 {", "
font-family: Sans-Serif;
}
font-family of Lobster and apply this new font to your h2 element."
],
"challengeSeed": [
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "Lobster font.');",
"assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your h2 element should use the font Lobster.');",
"assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'message: Use an h2 CSS selector to change the font.');",
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your p element should still use the font Monospace.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Lass uns jetzt eine Google Font importieren und verwenden. (Beachte dass du diese Challenge überspringen musst, falls Google in deinem Land blockiert wird)",
"Zuerst musst du einen call (Anfrage) an Google machen um um auf Lobster zugreifen und in dein HMTL einbinden zu können.",
"Kopiere den folgenden Code und füge diesen in deinen Editor oben ein:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen.",
"h2 Element die Schriftart oder font-family Lobster hinzu."
]
},
"fr": {
"title": "Importer une police de Google",
"description": [
"Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).",
"Premièrement, vous devrez faire un appel vers Google pour prendre la police Lobster et la charger dans votre HTML.",
"Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :",
"Maintenant vous pouvez paramétrer Lobster comme valeur de police de votre élément h2.",
"Lobster à la font-family de votre élément h2."
]
},
"pt-br": {
"title": "Importe uma Fonte a Partir do Google Fonts",
"description": [
"Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.",
"Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.",
"Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Lobster como o valor para font-family em seu elemento h2."
]
},
"ru": {
"title": "Импортируйте шрифт Google",
"description": [
"Теперь давайте импортируем и применим шрифт Google (обратите внимание, что если Google заблокирован в ваней стране, вам нужно будет пропустить это испытание).",
"Сначала вам понадобится сделать запрос к Google для получения шрифта Lobster и загрузить его в ваш HTML.",
"Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Теперь вы можете установить шрифт Lobster в качестве значения семейства шрифтов для вашего h2.",
"font-family со значением Lobster к вашему элементу h2."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08808",
"title": "Specify How Fonts Should Degrade",
"description": [
"There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif",
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
"For example, if you wanted an element to use the Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:",
"p {", "
font-family: Helvetica, Sans-Serif;
}
Lobster font isn't available. Notice how it degrades to the Monospace font.",
"NoteClick here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "Lobster.');",
"assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*Monospace\\s*;\\s*\\}/gi.test(code), 'message: Your h2 element should degrade to the font Monospace when Lobster is not available.');",
"assert(new RegExp(\"\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem Monospace, Serif und Sans-Serif.",
"Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.",
"Wenn du zum Beispiel einem Element die Schriftart Helvetica geben möchtest, aber gleichzeitig als Alertnative die Schrift Sans-Serif laden willst, falls Helvetica nicht verfügbar ist, kannst du diesen CSS Style verwenden:",
"p {", "
font-family: Helvetica, Sans-Serif;
}
Lobster nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart Monospace geladen wird."
]
},
"fr": {
"title": "Spécifier comment vos polices devraient dégrader",
"description": [
"Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend Monospace, Serif et Sans-Serif.",
"Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.",
"Par exemple, si vous voulez qu'un élément utilise la police Helvetica, mais également dégrader vers Sans-Serif lorsque la police Helvetica n'est pas disponible, vous pouvez utiliser le style CSS suivant :",
"p {", "
font-family: Helvetica, Sans-Serif;
}
Lobster ne soit pas disponible. Regardez comment la police se dégrade vers Monospace."
]
},
"pt-br": {
"title": "Especifique como as Fontes Devem se Degradar",
"description": [
"Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo Monospace, Serif e Sans-Serif.",
"No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.",
"Por exemplo, se você deseja que um elemento use a fonte Helvetica, e que degrade para a fonte Sans-Serif quando a Helvetica não estiver disponível, você pode utilizar o seguinte CSS:",
"p {",
" font-family: Helvetica, Sans-Serif;",
"}",
"Lobster não esteja disponível. Note como a fonte degrada para Monospace."
]
},
"ru": {
"title": "Укажите порядок деградации шрифтов",
"description": [
"Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них Monospace, Serif и Sans-Serif",
"Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.",
"Например, если бы вы хотели, чтобы элемент использовал шрифт Helvetica, но также деградировал до шрифта Sans-Serif, когда Helvetica недоступен, вы могли бы использовать этот CSS-стиль:",
"p {", "
font-family: Helvetica, Sans-Serif;
}
Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace."
]
}
}
},
{
"id": "bad87fee1348bd9acdf08812",
"title": "Size your Images",
"description": [
"CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.",
"For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:",
"<style>", "
.larger-image {
width: 500px;
}
</style>
smaller-image and use it to resize the image so that it's only 100 pixels wide.",
"NoteClick here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "img element should have the class smaller-image.');",
"assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel px um die Größe zu definieren.",
"Wenn wir also die CSS Klasse larger-image erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:",
"<style>", "
.larger-image {
width: 500px;
}
</style>
smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
"Notizwidth qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.",
"Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
"<style>", "
.larger-image {
width: 500px;
}
</style>
smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
"Prenez notewidth, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px (pixels) como medida para especificar a largura de nossa imagem.",
"Por exemplo, se queremos criar uma classe CSS chamada larger-image que dê aos elementos HTML uma largura de 500px, vamos usar:",
"<estilo>",
" .larger-image{",
" width: 500px;",
" }",
"</style>",
"smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
]
},
"ru": {
"title": "Установите размер ваших изображений",
"description": [
"В CSS есть свойтсво, называемое width, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px (пиксели) для указания ширины изображения.",
"Например, если бы мы хотели создать CSS-класс larger-image, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:",
"<style>", "
.larger-image {
width: 500px;
}
</style>
smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.",
"Вниманиеstyle, color and width",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
"<style>", "
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
thick-green-border that puts a 10-pixel-wide green border with a style of solid around an HTML element, and apply that class to your cat photo.",
"Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:",
"<img class=\"class1 class2\">"
],
"challengeSeed": [
"",
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "img element should have the class smaller-image.');",
"assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your img element should have the class thick-green-border.');",
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of 10px.');",
"assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of solid.');",
"assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your img element should be green.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"CSS Rahmen haben Attribute wie style, color und width",
"Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:",
"<style>", "
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
thick-green-border, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style solid um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.",
"Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class Attribut trennst. Zum Beispiel:",
"<img class=\"class1 class2\">"
]
},
"fr": {
"title": "Ajouter des bordures autour de vos éléments",
"description": [
"Les bordures CSS ont des propriétés comme style, color et width",
"Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
"<style>", "
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
"Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :",
"<img class=\"class1 class2\">"
]
},
"pt-br": {
"title": "Adicione Bordas ao Redor de seus Elementos",
"description": [
"As bordas em CSS possuem propriedades como style, color e width",
"Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:",
"<style>",
" .thin-red-border {",
" border-color: red;",
" border-width: 5px;",
" border-style: solid;",
" }",
"</style>",
"thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.",
"Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:",
"<img class=\"clase1 clase2\">"
]
},
"ru": {
"title": "Дбавьте границы вокруг ваших элементов",
"description": [
"CSS-границы имеют свойства: style, color и width",
"Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:",
"<style>", "
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
thick-green-border, который добавляет зелёную границу шириной в 10 пикселей со стилем solid вокруг HTML-элемента и примените этот класс к вашему фото кота.",
"Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:",
"<img class=\"class1 class2\">"
]
}
}
},
{
"id": "bad87fee1348bd9aedf08814",
"title": "Add Rounded Corners with a Border Radius",
"description": [
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.",
"border-radius with pixels. Give your cat photo a border-radius of 10px.",
"Note: this waypoint allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or .smaller-image class."
],
"challengeSeed": [
"",
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "10px');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Füge abgerundete Ecken mit Border Radius hinzu",
"description": [
"Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.",
"border-radius mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius von 10px.",
"Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius zu der .thick-green-border oder .smaller-image Klasse hinzufügen."
]
},
"es": {
"title": "Agrega esquinas redondeadas usando Border Radius",
"description": [
"Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.",
"border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.",
"Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image."
]
},
"pt-br": {
"title": "Insira Bordas Arredondadas com o Border Radius",
"description": [
"Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.",
"border-radius com pixels. Adicione um border-radius de 10px para a sua foto.",
"Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image."
]
},
"ru": {
"title": "Добавьте скруглённые углы с помощью радиуса границы",
"description": [
"У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius.",
"border-radius в пикселях. Присвойте вашему фото кота свойство border-radius со значением 10px.",
"Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius как к классу .thick-green-border, так и к классу .smaller-image."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08815",
"title": "Make Circular Images with a Border Radius",
"description": [
"In addition to pixels, you can also specify a border-radius using a percentage.",
"border-radius of 50%."
],
"challengeSeed": [
"",
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "50%, making it perfectly circular.');",
"assert(code.match(/50%/g), 'message: Be sure to use a percentage value of 50%.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle runde Bilder mit einem Border Radius",
"description": [
"Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.",
"border-radius von 50%."
]
},
"es": {
"title": "Crea imágenes circulares usando Border Radius",
"description": [
"Además de pixeles, puedes especificar un border-radius usando porcentajes.",
"border-radius de 50%."
]
},
"pt-br": {
"title": "Deixe as Imagens Circulares com o Border Radius",
"description": [
"Assim como pixels, você também pode usar o border-radius com porcentagens.",
"border-radius de 50%."
]
},
"ru": {
"title": "Сделайте круглые изображения с помощью радиуса границы",
"description": [
"В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius.",
"border-radius со значением 50%."
]
}
}
},
{
"id": "bad87fed1348bd9aede07836",
"title": "Give a Background Color to a Div Element",
"description": [
"You can set an element's background color with the background-color property.",
"For example, if you wanted an element's background color to be green, you'd put this within your style element:",
".green-background {", "
background-color: green;
}
silver-background with the background-color of silver. Assign this class to your div element."
],
"challengeSeed": [
"",
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "div element the class silver-background.');",
"assert($(\".silver-background\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'message: Your div element should have a silver background.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Gib einem Div Element eine Hintergrundfarbe",
"description": [
"Du kannst die Hintergrundfarbe von einem Element mit dem background-color Attribut setzen",
"Wenn du zum Beispiel die Hintergrundfarbe von einem Element green machen willst, schreibe dies in dein style Element:",
".green-background {", "
background-color: green;
}
silver-background mit der background-color grau (silver). Füge diese Klasse deinem div Element hinzu"
]
},
"es": {
"title": "Da un color de fondo a un elemento Div",
"description": [
"Puedes fijar el color de fondo de un elemento con la propiedad background-color.",
"Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green), dentro de tu elemento style pondrías:",
".green-background {", "
background-color: green;
}
silver-background con la propiedad background-color en gris (silver). Asigna esta clase a tu elemento div ."
]
},
"pt-br": {
"title": "Dê uma Cor de Fundo a um Elemento Div",
"description": [
"Você pode acrescentar uma cor de fundo de um elemento com a propriedade background-color.",
"Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (green), dentro de seu elemento style seria assim:",
".green-background {",
" background-color: green;",
"}",
"silver-background com a propriedade background-color em cinza (silver). Depois, adicione essa classe ao seu elemento div."
]
},
"ru": {
"title": "Присвойте цвет фона элементу div",
"description": [
"Вы можете установить цвет фона элемента с помощью свойства background-color.",
"Например, если бы вы хотели установить цвет фона элемента зелёным, вы бы использовали следующий стиль внутри вашего элемента style:",
".green-background {", "
background-color: green;
}
silver-background со значением свойства background-color равным silver. Назначьте этот класс вашему элементу div."
]
}
}
},
{
"id": "bad87eee1348bd9aede07836",
"title": "Set the ID of an Element",
"description": [
"In addition to classes, each HTML element can also have an id attribute.",
"There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.",
"id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.",
"Here's an example of how you give your h2 element the id of cat-photo-app:",
"<h2 id=\"cat-photo-app\">",
"form element the id cat-photo-form."
],
"challengeSeed": [
"",
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "form element the id of cat-photo-form.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Setze die ID von einem Element",
"description": [
"Zusätzlich zu Klassen, kann jedes HTML Element auch ein id Attribut haben.",
"Es hat mehrere Vorteile id Attribute zu verwenden und du wirst mehr über diese erfahren wenn du anfängst mit jQuery zu arbeiten.",
"id Attribute sollten eindeutig sein. Browser werden das nicht durchsetzen, aber es ist eine weit verbreitete und erprobte Herangehensweise. Also gib bitte nie mehr als einem Element das gleiche id Attribut.",
"Hier ist ein Beispiel wie du deinem h2 Element die Id cat-photo-app gibst:",
"<h2 id=\"cat-photo-app\">",
"form Element die Id cat-photo-form."
]
},
"es": {
"title": "Establecer el ID de un elemento",
"description": [
"Además de las clases, cada elemento HTML también puede tener un atributo de identificación id.",
"Hay varias ventajas al usar atributos id, y aprenderás más sobre estas cuando comiences a usar jQuery.",
"Los atributos id deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le des a más de un elemento un mismo atributo id. ",
"He aquí un ejemplo de cómo le das la identificación cat-photo-app a tu elemento h2:",
"<h2 id=\"cat-photo-app\">",
"form la id cat-photo-form."
]
},
"pt-br": {
"title": "Estabeleça a ID de um Elemento",
"description": [
"Além das classes, cada elemento HTML também pode ter um atributo de identificação chamado id.",
"Existem várias vantagens ao utilizar atributos id, e você aprenderá mais sobre elas quando começar a utilizar jQuery.",
"Os atributos id devem ser únicos. Os navegadores não o obrigarão a isso, mas isso é amplamente reconhecido como uma boa prática. Assim, não dê um mesmo atributo id a mais de um elemento.",
"Veja aqui um exemplo de como dar a id cat-photo-app ao seu elemento code>h2:",
"<h2 id=\"cat-photo-app\">",
"form a id cat-photo-form."
]
},
"ru": {
"title": "Установите id элемента",
"description": [
"В дополнение к классам, каждый HTML-элемент может также иметь атрибут id.",
"Есть некоторые преимущества использования атрибутов id, вы узнаете о них больше, когда начнёте использовать jQuery.",
"Атрибутам id следует быть уникальными. Браузеры не принуждают к этому, но широкой общественностью это признано лучшей практикой. Поэтому, пожалуйста, не присваивайте множеству элементов одинаковое значение атрибута id.",
"Вот пример того, как вы можете присвоить вашему элементу h2 значение атрибута id равное cat-photo-app:",
"<h2 id=\"cat-photo-app\">",
"form атрибут id со значением cat-photo-form."
]
}
}
},
{
"id": "bad87dee1348bd9aede07836",
"title": "Use an ID Attribute to Style an Element",
"description": [
"One cool thing about id attributes is that, like classes, you can style them using CSS.",
"However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.",
"Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element:",
"#cat-photo-element {", "Note that inside your
background-color: green;
}
style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.",
"id attribute of cat-photo-form, a green background."
],
"challengeSeed": [
"",
"",
"",
"Click here to view more cat photos.
", " ", "Things cats love:
", "Top 3 things cats hate:
", "form element the id of cat-photo-form.');",
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'message: Your form element should have the background-color of green.');",
"assert(code.match(/form element has an id attribute.');",
"assert(!code.match(/form any class or style attributes.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Benutze ein ID Attribute um ein Element zu stylen",
"description": [
"Eine coole Eigenschaft von id Attributen ist, dass du sie, genauso wie Klassen, mit CSS stylen kannst.",
"Hier ist ein Beispiel wie du einem Element mit dem id Attribut cat-photo-element eine grüne Hintergrundfarbe geben kannst. In deinem style Element:",
"#cat-photo-element {", "Beachte, dass du in deinem
background-color: green;
}
style Element Klassen immer mit einem . vor deren Namen ansprichst. Ids sprichst du immer mit # vor deren Namen an.",
"id Attribut cat-photo-form hat, einen grünen Hintergrund zu geben."
]
},
"es": {
"title": "Usa un atributo ID para dar estilo a un elemento",
"description": [
"Una cosa buena sobre los atributos id es que, al igual que con clases, puedes darles estilo usando CSS.",
"He aquí un ejemplo de cómo puedes tomar tu elemento con atributo id de cat-photo-element y ponerle el color de fondo verde. En tu elemento style: ",
"#cat-photo-element {", "Ten en cuenta que dentro de tu elemento
background-color: green;
}
style, siempre referencias clases poniendo un . en frente de sus nombres. Y siempre referencias identificaciones poniendo un # frente a sus nombres. ",
"id en cat-photo-form, un fondo verde."
]
},
"pt-br": {
"title": "Use um Atributo ID para Estilizar um Elemento",
"description": [
"Algo interessante sobre os atributos id é que, da mesma forma que com as classes, é possível dar estilos a eles usando CSS.",
"Aqui está um exemplo de como você pode usar seu elemento com atributo id em cat-photo-element e dar a ele a cor de fundo verde.",
"#cat-photo-element {",
" background-color: green;",
"}",
"Note que dentro de seu elemento style, você deve sempre referenciar uma classe colocando um . logo antes de seu nome. Já com uma id, você deve referenciar colocando um # antes de seu nome.",
"cat-photo-form, um fundo verde."
]
},
"ru": {
"title": "Используйте атрибут id для стилизации элемента",
"description": [
"Одной из замечательных вещей в отношении атрибута id является то, что, как и с классами, вы можете стилизовать их с помощью CSS.",
"Вот пример того как вы можете присвоить вашему элементу со значением атрибута id равным cat-photo-element зелёный цвет фона. В вашем элементе style:",
"#cat-photo-element {", "Обратите внимание, что внутри вашего элемента
background-color: green;
}
style вы ссылаетесь на классы используя . перед их именами. При этом вы всегда ссылаетесь на идентификаторы вставляя # перед их именами.",
"id равный cat-photo-form, зелёный в качестве цвета фона."
]
}
}
},
{
"id": "bad88fee1348bd9aedf08825",
"title": "Adjusting the Padding of an Element",
"description": [
"Now let's put our Cat Photo App away for a little while and learn more about styling HTML.",
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
"Three important properties control the space that surrounds each HTML element: padding, margin, and border.",
"An element's padding controls the amount of space between the element's content and its border.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more padding than the green box.",
"When you increase the green box's padding, it will increase the distance between the text padding and the border around it.",
"padding of your green box to match that of your red box."
],
"challengeSeed": [
"",
"green-box class should give elements 20px of padding.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Justiere den Innenabstand eines Elements",
"description": [
"Lass uns jetzt mal unsere Katzenfoto App kurz beiseite legen um mehr über HTML Styling zu lernen",
"Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.",
"Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: padding, margin und border.",
"padding kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – border",
"Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding hat als die grüne Box.",
"padding der grünen Box um es an die rote Box anzugleichen."
]
},
"es": {
"title": "Ajusta el relleno de un elemento",
"description": [
"Ahora vamos a dejar de lado nuestra aplicación de fotos de gatos por un tiempo, y aprenderemos más sobre dar estilo a HTML",
"Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.",
"Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (padding), margen (margin) y borde (border)",
"El relleno (padding) de un elemento controla la cantidad de espacio entre el elemento y su borde (border).",
"Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (padding) que el cuadro verde. ",
"Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto padding y el borde alrededor de este.",
"padding) de la caja verde para que coincida con el de tu cuadro rojo."
]
},
"pt-br": {
"title": "Ajuste o Preenchimento de um Elemento",
"description": [
"Agora vamos deixar nosso aplicativo de fotos de gatos um pouco de lado, e aprender mais sobre dar estilos em HTML.",
"Você provavelmente já deve ter notado, mas todos os elementos HTML são, essencialmente, pequenos retângulos.",
"Três propriedades importantes controlam o espaço ao redor de cada elemento HTML: preenchimento (padding), margem (margin) e borda (border).",
"O preenchimento (padding) de um elemento controla a quantidade de espaço entre o elemento e sua borda (border).",
"Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (padding) que o quadro verde.",
"Quando você aumenta o preenchimento da caixa verde, a distância entre o texto padding e a borda ao seu redor também será maior.",
"padding) da caixa verde para que coincida com a de seu quadrado vermelho."
]
},
"ru": {
"title": "Настройка отступа содержимого для элемента",
"description": [
"Теперь давайте отложим наше фото кота на некоторое время и изучим стилизацию HTML.",
"Вы могли уже заметить это, но все HTML-элеметы в приницпе являются небольшими прямоугольниками.",
"Пространство вокруг каждого HTML-элемента контролируют три важных свойства: padding, margin, border.",
"Свойство элемента padding управляет размером пространства между элементом и его границей border.",
"Тут мы можем видеть, что зелёный и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ содержимого padding, чем зелёный прямоугольник.",
"Когда вы увеличиваете padding зелёного прямоугольника, увеличивается расстояние между границей содержимого и границей самого элемента border.",
"padding вашего зелёного прямоугольника, чтобы он был равен соответствующему значению красного прямоугольника."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08822",
"title": "Adjust the Margin of an Element",
"description": [
"An element's margin controls the amount of space between an element's border and surrounding elements.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.",
"When you increase the green box's margin, it will increase the distance between its border and surrounding elements.",
"margin of the green box to match that of the red box."
],
"challengeSeed": [
"",
"green-box class should give elements 20px of margin.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Passe den Außenabstand eines Elements an",
"description": [
"margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.",
"In diesem Beispiel sehen wir die grüne und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr margin aufweist als die grüne Box, wodurch sie kleiner wirkt.",
"Wenn du den Außenabstand – margin – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.",
"margin der grünen Box dem der roten Box an."
]
},
"es": {
"title": "Ajusta el margen de un elemento",
"description": [
"El margen (margin) de un elemento controla la cantidad de espacio entre el borde (border) y los elementos alrededor.",
"Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (margin) que la caja verde, haciendo que parezca más pequeña. ",
"Cuando aumentes el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
"margin) de la caja verde para que coincida con el de la caja roja."
]
},
"pt-br": {
"title": "Ajuste a Margem de um Elemento",
"description": [
"A margem (margin) de um elemento controla a quantidade de espaço entre a borda (border) e os elementos ao seu redor.",
"Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.",
"Quando você aumenta a margem (margin) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.",
"margin) da caixa verde para que coincida com a margem da caixa vermelha."
]
},
"ru": {
"title": "Настройка отступа элемента",
"description": [
"Значение свойства margin контролирует размер отступа между границей border элемента и его окружением.",
"Тут мы можем видеть, что зелёный прямоугольник и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ margin, чем зелёный прямоугольник, что делает его визуально меньше.",
"Когда вы увеличиваете отступ margin зелёного прямоугольника, увеличивается расстояние между его границей и окружающими элементами.",
"margin зелёного прямоугольника так, чтобы оно равнялось соответствующему значению красного прямоугольника."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08823",
"title": "Add a Negative Margin to an Element",
"description": [
"An element's margin controls the amount of space between an element's border and surrounding elements.",
"If you set an element's margin to a negative value, the element will grow larger.",
"margin to a negative value like the one for the red box.",
"Change the margin of the green box to -15px, so it fills the entire horizontal width of the yellow box around it."
],
"challengeSeed": [
"",
"",
"green-box class should give elements -15px of margin.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Füge einem Element negativen Außenabstand hinzu",
"description": [
"margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.",
"Wenn du dem Außenabstand - margin - eines Elements einen negativen Wert zuweist, wird das Element größer.",
"margin - auf einen negativen Wert, wie bei der roten Box, zu setzen.",
"Ändere den Außenabstand – margin – der grünen Box auf -15px, damit sie die gelbe Box horizontal ausfüllt."
]
},
"es": {
"title": "Agregar un margen negativo a un elemento",
"description": [
"El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.",
"Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.",
"margin) a un valor negativo como el de la caja roja.",
"Cambia el margen (margin) de la caja verde a -15px, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea."
]
},
"pt-br": {
"title": "Adicione uma Margem Negativa a um Elemento",
"description": [
"A margem de um elemento controla a quantidade de espaço entre a borda do elemento e os elementos ao seu redor.",
"Se você estabelece a margem de um elemento com um valor negativo, o elemento ficará maior.",
"margin) a um valor negativo como o da caixa vermelha.",
"Mude a margem (margin) da caixa verde para -15px, de forma que ocupe toda a largura horizontal da caixa amarela que a rodeia."
]
},
"ru": {
"title": "Добавьте отрицательный отступ к элементу",
"description": [
"Значение свойства margin контролирует размер отступа между границей border элемента и его окружением.",
"Если вы установите значение свойства margin элемента отрицательным, то элемент будет становиться больше.",
"margin зелёного прямоугольника отрицательным, по аналогии с красным прямоугольником.",
"Измените значение свойства margin зелёного прямоугольника на -15px, таким образом он занимает всю ширину окружающего жёлтого прямоугольника."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08824",
"title": "Add Different Padding to Each Side of an Element",
"description": [
"Sometimes you will want to customize an element so that it has different padding on each of its sides.",
"CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left properties.",
"padding of 40px on its top and left side, but only 20px on its bottom and right side."
],
"challengeSeed": [
"",
"green-box class should give the top of the elements 40px of padding.');",
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box class should give the right of the elements 20px of padding.');",
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of the elements 20px of padding.');",
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box class should give the left of the elements 40px of padding.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
"description": [
"Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also padding – geben wollen.",
"CSS erlaubt dir den Innenabstand - padding - eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu steuern.",
"padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite."
]
},
"es": {
"title": "Añade relleno diferente a cada lado de un elemento",
"description": [
"A veces querrás personalizar un elemento para que tenga diferente relleno (padding) en cada uno de sus lados.",
"CSS te permite controlar el relleno (padding) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades padding-top, padding-right, padding-bottom y padding-left. ",
"padding) de 40px en las partes superior e izquierda, pero sólo 20px en sus partes inferior y derecha."
]
},
"pt-br": {
"title": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
"description": [
"As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (padding) diferente em cada um de seus lados.",
"O CSS permite controlar o preenchimento (padding) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades padding-top, padding-right, padding-bottom e padding-left.",
"padding) de 40px nas partes superior e esquerda, e de apenas 20px em suas partes inferior e direita."
]
},
"ru": {
"title": "Добавьте разный отступ содердимого с каждой стороны элемента",
"description": [
"Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого padding с каждой из сторон был разным.",
"CSS позволяет вам контролировать значение свойства padding элемента со всех сторон с помощью свойств: padding-top, padding-right, padding-bottom, padding-left.",
"padding равный 40px сверху и слева, но только 20px снизу и справа."
]
}
}
},
{
"id": "bad87fee1248bd9aedf08824",
"title": "Add Different Margins to Each Side of an Element",
"description": [
"Sometimes you will want to customize an element so that it has a different margin on each of its sides.",
"CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties.",
"margin of 40px on its top and left side, but only 20px on its bottom and right side."
],
"challengeSeed": [
"",
"green-box class should give the top of elements 40px of margin.');",
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of margin.');",
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of margin.');",
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of margin.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
"description": [
"Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - margin - geben wollen.",
"CSS erlaubt dir ebenfalls den Außenabstand - margin - eines Elements auf jeder Seite einzeln mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu steuern.",
"margin – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite."
]
},
"es": {
"title": "Añade márgenes diferentes a cada lado de un elemento",
"description": [
"A veces querrás personalizar un elemento para que tenga un margen (margin) diferente en cada uno de sus lados.",
"CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades margin-top, margin-right, margin-bottom y margin-left. ",
"margin) de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho."
]
},
"pt-br": {
"title": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento",
"description": [
"Talvez você queira personalizar um elemento para que possua uma margem (margin) diferente em cada um de seus lados.",
"O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades margin-top, margin-right, margin-bottom e margin-left.",
"margin) de 40px nas partes superior e esquerda, e de apenas 20px nas partes inferior e direita."
]
},
"ru": {
"title": "Добавьте разный отступ для элемента",
"description": [
"Иногда вам может потребоваться изменить элемент, установив разный отступ margin с каждой из его сторон.",
"CSS позволяет вам контролировать отступ margin элемента с каждой из его сторон с помощью свойств: margin-top, margin-right, margin-bottom, margin-left.",
"margin равное 40px сверху и слева, но только 20px снизу и справа."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08826",
"title": "Use Clockwise Notation to Specify the Padding of an Element",
"description": [
"Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties, you can specify them all in one line, like this:",
"padding: 10px 20px 10px 20px;",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
"padding of 40px on its top and left side, but only 20px on its bottom and right side."
],
"challengeSeed": [
"",
"green-box class should give the top of elements 40px of padding.');",
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of padding.');",
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of padding.');",
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of padding.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
"description": [
"Anstatt die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu verwenden, kannst du sie alle in einer Zeile schreiben:",
"padding: 10px 20px 10px 20px;",
"Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.",
"padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite."
]
},
"es": {
"title": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
"description": [
"En lugar de especificar las propiedades padding-top, padding-right, padding-bottom y padding-left de un elemento, puedes especificar todas en una sóla línea, así: ",
"padding: 10px 20px 10px 20px;",
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
".green-box\" un relleno de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ."
]
},
"pt-br": {
"title": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
"description": [
"Ao invés de especificar as propriedades padding-top, padding-right, padding-bottom e padding-left de um elemento, você pode especificar todas elas em uma só linha, assim:",
"padding: 10px 20px 10px 20px;",
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.",
"notação em sentido horário para dar para a classe \".green-box\" um preenchimento de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito."
]
},
"ru": {
"title": "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
"description": [
"Вместо указания свойств элемента: padding-top, padding-right, padding-bottom, padding-left, вы можете указать их в строку, например:",
"padding: 10px 20px 10px 20px;",
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
"padding равное 40px сверху и слева, но только 20px снизу и справа."
]
}
}
},
{
"id": "bad87fee1348bd9afdf08726",
"title": "Use Clockwise Notation to Specify the Margin of an Element",
"description": [
"Let's try this again, but with margin this time.",
"Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties, you can specify them all in one line, like this:",
"margin: 10px 20px 10px 20px;",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
"Clockwise Notation to give the element with the green-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side."
],
"challengeSeed": [
"",
"green-box class should give the top of elements 40px of margin.');",
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of margin.');",
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of margin.');",
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of margin.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
"description": [
"Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also margin.",
"Anstatt die Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu verwenden, kannst du alle in eine Zeile schreiben:",
"margin: 10px 20px 10px 20px;",
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.",
"Clockwise Notation genannt – um dem Element mit der Klasse green-box 40px Außenabstand auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite zu verleihen."
]
},
"es": {
"title": "Utiliza notación en sentido horario para especificar el margen de un elemento",
"description": [
"Vamos a intentar esto de nuevo, pero esta vez con el margen (margin).",
"En lugar de especificar las propiedades margin-top, margin-right, margin-bottom, y margin-left de un elemento, puedes especificarlas en una sóla línea así: ",
"margin: 10px 20px 10px 20px;",
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
"notación en sentido horario para dar al elemento con la clase green-box un margen de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ."
]
},
"pt-br": {
"title": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
"description": [
"Vamos praticar isso outra vez, mas desta vez será com a margem (margin).",
"Ao invés de especificar as propriedades margin-top, margin-right, margin-bottom, e margin-left de um elemento, você pode especificar todas elas em apenas uma linha assim:",
"margin: 10px 20px 10px 20px;",
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.",
"notação em sentido horário para dar para a classe \".green-box\" uma margem de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito."
]
},
"ru": {
"title": "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
"description": [
"Давайте попробуем то же самое, но со свойством margin на этот раз.",
"Вмето указания свойств элемента: margin-top, margin-right, margin-bottom, margin-left, вы можете указать их в строку, например:",
"margin: 10px 20px 10px 20px;",
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
"green-box значения отступа margin равное 40px сверху и слева, но только 20px снизу и справа."
]
}
}
},
{
"id": "bad82fee1322bd9aedf08721",
"title": "Understand Absolute versus Relative Units",
"description": [
"The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use.",
"The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.",
"Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size.",
"Notepadding property to the element with class red-box and set it to 1.5em."
],
"challengeSeed": [
"",
"red-box class should have a padding property.');",
"assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'message: Your red-box class should give elements 1.5em of padding.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "bad87fee1348bd9aedf08736",
"title": "Style the HTML Body Element",
"description": [
"Now let's start fresh and talk about CSS inheritance.",
"Every HTML page has a body element.",
"body element exists here by giving it a background-color of black.",
"We can do this by adding the following to our style element:",
"body {" ], "challengeSeed": [ "" ], "tests": [ "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your
background-color: black;
}
body element the background-color of black.');",
"assert(code.match(/"
],
"tests": [
"assert(($(\"h1\").length > 0), 'message: Create an h1 element.');",
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'message: Your h1 element should have the text Hello World.');",
"assert(code.match(/<\\/h1>/g) && code.match(/body element the color property of green.');",
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'message: Give your body element the font-family property of Monospace.');",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'message: Your h1 element should inherit the font Monospace from your body element.');",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Your h1 element should inherit the color green from your body element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Erbe Styles vom Body Element",
"description": [
"Jetzt haben wir bewiesen dass jede HTML Seite ein body Element besitzt und dass dieses body Element ebenfalls mit CSS gestylt werden kann.",
"Vergiss nicht, dass du dein body Element wie jedes andere HTML Element stylen kannst und dass alle anderen Elemente von deinem body Element Styles erben werden.",
"h1 Element mit dem Text Hello World",
"Dann gib allen Elementen auf deiner Seite die Farbe green indem du color:green; deinen body Element Styles hinzufügst.",
"Gib deinem body Element abschließend die Schriftart Monospace indem du font-family: Monospace; deinen body Element Styles hinzufügst."
]
},
"es": {
"title": "Hereda estilos del elemento cuerpo",
"description": [
"Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS.",
"Recuerda que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento body.",
"h1 con el texto Hello World",
"Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.",
"Por último, da a tu elemento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body."
]
},
"pt-br": {
"title": "Herde Estilos do Elemento Body",
"description": [
"Já demonstramos que cada página HTML possui um corpo (body), e que podemos dar estilo a ele através do CSS.",
"Observe que você pode dar estilo ao seu elemento body como a qualquer outro elemento HTML, e que todos os outros elementos herdarão os estilos de seu elemento body.",
"h1 com o texto Hello World",
"Depois, dê a todos os elementos de sua página uma cor verde (green) adicionando color: green; na declaração de estilo de seu elemento body.",
"Por último, dê ao seu elemento body o tipo de fonte Monospace adicionando font-family: Monospace; na declaração de estilo de seu elemento body."
]
},
"ru": {
"title": "Наследование стилей от элемента Body",
"description": [
"Мы доказали наличие у каждой HTML-страницы элемента body и то, что этот элемент body можно стилизовать с помощью CSS.",
"Не забывайте, что вы можете стилизовать ваш элемент body так же как и любой другой HTML-элемент, а все остальные элементы унаследуют стили элемента body.",
"h1 с текстом Hello World",
"Затем присвойте всем элементам на вашей странице зелёный цвет путём добавления color: green; к свойствам, указанным в объявлении стилей для элемента body.",
"В завершении, присвойте вашему элементу body свойство семейства шрифтов равное Monospace путём добавления font-family: Monospace; к свойствам, указанным в объявлении стилей для элемента body."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08756",
"title": "Prioritize One Style Over Another",
"description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your h1 element can't be both green and pink at the same time.",
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?",
"pink-text that gives an element the color pink.",
"Give your h1 element the class of pink-text."
],
"challengeSeed": [
"",
"h1 element should have the class pink-text.');",
"assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'message: Your <style> should have a pink-text CSS class that changes the color.');",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Ziehe einen Style einem Anderen vor",
"description": [
"Manchmal werden deine HTML Elemente mehrere Styles erhalten die sich gegenseitig widersprechen.",
"Zum Beispiel könnte dein h1 Element nicht gleichzeitig grün und pink sein.",
"color:green; Eigenschaft unseres body Elements überschreiben - override - ?"
]
},
"es": {
"title": "Priorizar un estilo sobre otro",
"description": [
"A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.",
"Por ejemplo, el elemento h1 no puede ser verde y rosa al mismo tiempo.",
"Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override) nuestra clase la propiedad CSS color: green del elemento body?",
"pink-text que le da a un elemento el color rosado.",
"Ponle a tu elemento h1 la clase de pink-text."
]
},
"pt-br": {
"title": "Priorize um Estilo Sobre o Outro",
"description": [
"As vezes os elementos HTML recebem múltiplos estilos que entram em conflito entre si.",
"Por exemplo, o elemento h1 não pode ser verde e rosa ao mesmo tempo.",
"Vamos ver o que acontece quando criamos uma classe que faz com que o texto seja rosa e então o aplicamos a um elemento. Isso irá sobrepor (override) a propriedade CSS color: green do elemento body de nossa classe?",
"pink-text, que dê a cor rosa a um elemento.",
"Depois, adicione a classe pink-text ao seu elemento h1."
]
},
"ru": {
"title": "Установите приоритет одного стиля над другим",
"description": [
"Иногда вашим HTML-элементам будут присвоены множественные стили, конфликтующие друг с другом.",
"Например, ваш элемент h1 не может быть одновременно зелёным и розовым.",
"Давайте посмотрим, что произойдёт, когда мы создадим класс, который делает текст розовым, затем присвоим его элементу. Переопределит ли наш класс значение CSS-свойства элемента body равное color: green;?",
"pink-text, который назначает элементу розовый в качестве цвета.",
"Назначьте вашему элементу h1 класс pink-text."
]
}
}
},
{
"id": "bad87fee1348bd9aedf04756",
"title": "Override Styles in Subsequent CSS",
"description": [
"Our \"pink-text\" class overrode our body element's CSS declaration!",
"We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class?",
"blue-text that gives an element the color blue. Make sure it's below your pink-text class declaration.",
"Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.",
"Applying multiple class attributes to a HTML element is done with a space between them like this:",
"class=\"class1 class2\"",
"Note: It doesn't matter which order the classes are listed in the HTML element.",
"However, the order of the class declarations in the <style> section are what is important. The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text"
],
"challengeSeed": [
"",
"h1 element should have the class pink-text.');",
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');",
"assert($(\".pink-text\").hasClass(\"blue-text\"), 'message: Both blue-text and pink-text should belong to the same h1 element.');",
"assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your h1 element should be blue.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Überschreibe Styles mit nachträglichen CSS",
"description": [
"Unsere \"pink-text\" Klasse hat unsere CSS Angaben des body