Question: Descreva CSSForm Elements com exemplos praticos

~MSG~
Aprenda sobre: CSSForm Elements
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Form Elements ❮ Previous

CSS
Form Elements
❮ Previous
Next ❯
Style Textarea
By default, a <textarea> can be resized with a "grabber" in the bottom right
corner. To remove the grabber, set the
resize
property to
none
:
Some text...
Example
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Try it Yourself »
Style a Dropdown Menu
Australia
Canada
USA
Example
select
{
width: 100%;
padding: 16px 20px;
bord...
~/MSG~

example buttons bottom dropdown yourself solid elements select resize textarea

padding border-radius height text-decoration box-sizing


Question: Qual e a funcao de CSSForm Styling Code Challenge em CSS?

~MSG~
Aprenda sobre: CSSForm Styling Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Form Styling Code Challenge ❮ Previous

CSS
Form Styling Code Challenge
❮ Previous
Next ❯
Challenge: Form Styling
Test your understanding of CSS by completing a small coding challenge.
❮ Previous
Next ❯
★
+1
Sign in to track progress
COLOR PICKER...
~/MSG~

understanding picker color styling track previous completing small coding progress


Question: Qual e a diferenca entre CSSCounters e outros elementos?

~MSG~
Aprenda sobre: CSSCounters
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Counters ❮ Previous

CSS
Counters
❮ Previous
Next ❯
CSS Counters
With CSS counters, you can create dynamic numbering of elements (like
headings, sections, or list items) without using JavaScript.
CSS counters are "variables" maintained by CSS, and their values can
be incremented (or decremented) by CSS rules.
Pizza
Hamburger
Hotdogs
CSS Automatic Numbering With Counters
CSS counters are like "variables". The variable values can be incremented
(or decremented) by CSS rules.
To work with CSS counters we will use th...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
counter-reset
~/CODE~

automatic values elements generated increments counters decrements counter following inserts

counter-increment counter-reset content element properties


Question: Qual e a funcao de CSSNested Counters em CSS?

~MSG~
Aprenda sobre: CSSNested Counters
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Nested Counters ❮ Previous

CSS
Nested Counters
❮ Previous
Next ❯
CSS Using Two Counters
You can create multiple counters for different levels of numbering. The following example creates one counter for the page (named "section") and one
counter for each <h1> element (named "subsection"):
Example
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." ...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
counters()
~/CODE~

returns yourself values counters current multiple counter following element previous

counter-increment counter-reset content li list-style-type


Question: Como funciona CSSCounters Code Challenge?

~MSG~
Aprenda sobre: CSSCounters Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Counters Code Challenge ❮ Previous

CSS
Counters Code Challenge
❮ Previous
Next ❯
Challenge: Counters
Test your understanding of CSS by completing a small coding challenge.
❮ Previous
Next ❯
★
+1
Sign in to track progress
COLOR PICKER...
~/MSG~

understanding picker color track previous counters completing small coding progress


Question: Qual e a diferenca entre CSSUnits e outros elementos?

~MSG~
Aprenda sobre: CSSUnits
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Units ❮ Previous

CSS
Units
❮ Previous
Next ❯
CSS Units
CSS units are used to define the length and size of several properties.
Several CSS properties take "length" values, such as
font-size
,
width
,
margin
,
padding
,
border
, etc.
CSS has two types of units:
Absolute units
Relative units
CSS Absolute Units
Absolute units are fixed, and the length expressed in any of these will appear exactly that size.
Absolute units do NOT change when the screen size change, and are not recommended for websites.
However, the...
~/MSG~

medium define types width previous length appear change absolute exactly


Question: Qual e a funcao de CSSAbsolute Units em CSS?

~MSG~
Aprenda sobre: CSSAbsolute Units
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Absolute Units ❮ Previous

CSS
Absolute Units
❮ Previous
Next ❯
CSS Absolute Units
Absolute units are fixed, and the length expressed in any of these will appear exactly that size.
Absolute units do not change when the screen size change, and are not recommended for websites.
However, they can be used if the output medium is known, such
as for print layout.
The most used absolute unit is
px
(pixels).
Unit
Name
Description
px
Pixels
The most used absolute unit for screens (1px = 1/96th of 1in)
Try it
cm
Centimeters
Prima...
~/MSG~

screens medium centimeters pixels previous print length stylesheet description appear


Question: Qual e a diferenca entre CSSRelative Units e outros elementos?

~MSG~
Aprenda sobre: CSSRelative Units
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Relative Units ❮ Previous

CSS
Relative Units
❮ Previous
Next ❯
CSS Relative Units
Relative units specify a length relative to another length property (like parent element, root element, or viewport).
Relative length units scale better between different screen sizes.
Tip:
The
em
and
rem
units are perfect for creating scalable and responsive websites!
Unit
Description
em
Relative to the font-size of the parent element
Try it
rem
Relative to the font-size of the root HTML element
Try it
vw
Relative to 1% of the width of the...
~/MSG~

scalable creating better scale width perfect element previous different length


Question: Como funciona CSSUnits Code Challenge?

~MSG~
Aprenda sobre: CSSUnits Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Units Code Challenge ❮ Previous

CSS
Units Code Challenge
❮ Previous
Next ❯
Challenge: Units
Test your understanding of CSS by completing a small coding challenge.
❮ Previous
Next ❯
★
+1
Sign in to track progress
COLOR PICKER...
~/MSG~

understanding picker color track previous completing small coding progress challenge


Question: Descreva CSSInheritance com exemplos praticos

~MSG~
Aprenda sobre: CSSInheritance
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Inheritance ❮ Previous

CSS
Inheritance
❮ Previous
Next ❯
CSS Inheritance
CSS inheritance is about what happens if no value is specified for a
property on an element.
If no value is specified for a property, the value can either be inherited
from the parent element, or be set to its initial (default) value.
For CSS inheritance, properties are categorized in two types:
inherited properties
non-inherited properties
Inherited Properties
Inherited properties are, by default, set to the computed value of the parent elemen...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
font-family
~/CODE~

color computed specified inherited related initial value previous parent properties


Question: Explique o conceito de CSSInheritance Code Challenge em CSS

~MSG~
Aprenda sobre: CSSInheritance Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Inheritance Code Challenge ❮ Previous

CSS
Inheritance Code Challenge
❮ Previous
Next ❯
Challenge: Inheritance
Test your understanding of CSS by completing a small coding challenge.
❮ Previous
Next ❯
★
+1
Sign in to track progress
COLOR PICKER...
~/MSG~

understanding picker color track previous completing small coding progress inheritance


Question: Como funciona CSSSpecificity?

~MSG~
Aprenda sobre: CSSSpecificity
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Specificity ❮ Previous

CSS
Specificity
❮ Previous
Next ❯
CSS Specificity
CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element.
If two or more CSS rules point to the same element, the declaration with the highest specificity will "win", and
that style will be applied to the HTML element.
Look at the following examples:
Example
Here, we have specified a red color for <p> elements.
Result:
The text will be red:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
...
~/MSG~

following rules example highest determines yourself ultimately declaration applied algorithm


Question: Explique o conceito de CSSSpecificity Hierarchy em CSS

~MSG~
Aprenda sobre: CSSSpecificity Hierarchy
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Specificity Hierarchy ❮ Previous

CSS
Specificity Hierarchy
❮ Previous
Next ❯
Specificity Hierarchy
Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights".
Selector
Example
Description
Weight
Inline styles
<h1 style="color: pink;">
Highest priority, will override all other selectors
Id selectors
#navbar
Second highest priority
1-0-0
Classes, attribute selectors and pseudo-classes
.test, [type="text"], :hover
Third highest priority
0-1-0
Elements and pseudo-elements...
~/MSG~

elements three position types third highest priority selectors selector previous

background-color scenarios applied weight specificity


Question: Descreva CSSSpecificity Code Challenge com exemplos praticos

~MSG~
Aprenda sobre: CSSSpecificity Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Specificity Code Challenge ❮ Previous

CSS
Specificity Code Challenge
❮ Previous
Next ❯
Challenge: Specificity
Test your understanding of CSS by completing a small coding challenge.
❮ Previous
Next ❯
★
+1
Sign in to track progress
COLOR PICKER...
~/MSG~

understanding picker color coding track previous completing small specificity progress


Question: Qual e a funcao de CSS The!important Rule em CSS?

~MSG~
Aprenda sobre: CSS The!important Rule
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS The !important Rule ❮ Previous

CSS The
!important Rule
❮ Previous
Next ❯
CSS !important Rule
The
!important
rule is used to give the
value of a specific property the highest priority.
The
!important
rule will override ALL previous styling rules for that
specific property on that element!
The
!important
keyword is added to the end
of a CSS declaration, before the semicolon.
Syntax
selector {
property: value !important;
}
CSS !important Rule Example
In the following example, all three paragraphs will get a yellow background ...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
!important
~/CODE~

though higher three following rules highest styling value previous added

like rule property background-color important


Question: Descreva CSS!important Code Challenge com exemplos praticos

~MSG~
Aprenda sobre: CSS!important Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS !important Code Challenge ❮ Previous

CSS
!important Code Challenge
❮ Previous
Next ❯
Challenge: !important
Test your understanding of CSS by completing a small coding challenge.
❮ Previous
Next ❯
★
+1
Sign in to track progress
COLOR PICKER...
~/MSG~