Question: Explique o conceito de CSSIntroduction em CSS

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

Response:
~MSG~
CSS Introduction ❮ Previous

CSS
Introduction
❮ Previous
Next ❯
What is CSS?
CSS is the language we use to style a Web page.
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen,
  paper, or in other media
CSS saves a lot of work. It can control the layout of
  multiple web pages all at once
External stylesheets are stored in CSS files
CSS Demo - One HTML Page - Multiple Styles!
Here we will show one HTML page displayed with four different stylesheets.
Click on the "Stylesh...
~/MSG~

introduction click language pages elements style media files multiple previous

text-align font-size ideo background-color color


Question: Explique o conceito de CSSSyntax em CSS

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

Response:
~MSG~
CSS Syntax ❮ Previous

CSS
Syntax
❮ Previous
Next ❯
CSS Syntax
A CSS rule consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
Example
In this example all <p> elements will be center-aligned, w...
~/MSG~

~FILE[example_4.code]~
~LANG[Code]~
~CODE~
text-align
~/CODE~

block blocks yourself elements multiple declarations curly element selector previous


Question: Como funciona CSSSelectors?

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

Response:
~MSG~
CSS Selectors ❮ Previous

CSS
Selectors
❮ Previous
Next ❯
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you
want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class)
Combinator selectors
(select
  elements based on a specific relationship between them)
Pseudo-class selectors
(select elements based on a certain state)
Pseudo-elements selectors
(select
  and style a part of an element)
Attribute selectors
(select elements ...
~/MSG~

divide selectors relationship specific elements combinator style element selector previous

text-align categories center-aligned ote color


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

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

Response:
~MSG~
CSS Grouping Selectors

CSS
Grouping
Selectors
❮ Previous
Next ❯
The CSS Universal Selector
The
universal selector (*)
selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*
{
text-align: center;
color: blue;
}
Try it Yourself »
The CSS Grouping Selector
The
grouping selector
selects all the HTML elements with the same style
definitions.
Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):
h1
{
text-align: center;
color: ...
~/MSG~

~FILE[example_1.sql]~
~LANG[Sql]~
~CODE~
universal selector (*)
~/CODE~

following example grouping below selectors yourself elements every element selector


Question: Descreva CSSSelectors Code Challenge com exemplos praticos

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

Response:
~MSG~
CSS Selectors Code Challenge ❮ Previous

CSS
Selectors Code Challenge
❮ Previous
Next ❯
Challenge: Group Headings and Paragraphs
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 selectors headings track previous paragraphs completing small


Question: Como funciona How To Add CSS?

~MSG~
Aprenda sobre: How To Add CSS
Categoria: CSS
~/MSG~

Response:
~MSG~
How To Add CSS ❮ Previous Next ❯

How To Add CSS
❮ Previous
Next ❯
How to Add CSS
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
There are three ways of inserting a style sheet:
External CSS - link to an external .css file
Internal CSS - use the <style> element in the head section
Inline CSS - use the style attribute on HTML elements
External CSS
With an
external style sheet, you can change the look of an entire website by changing
just one file!
Each HTML p...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
margin-left: 20 px;
~/CODE~

browser elements style three internal information document website entire reads


Question: Qual e a funcao de How To Add Internal CSS em CSS?

~MSG~
Aprenda sobre: How To Add Internal CSS
Categoria: CSS
~/MSG~

Response:
~MSG~
How To Add Internal CSS ❮ Previous Next ❯

How To Add Internal CSS
❮ Previous
Next ❯
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head
section.
Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
  heading</h1>
<p>This...
~/MSG~

styles unique example yourself sheet within style previous inside section


Question: Explique o conceito de How To Add Inline CSS em CSS

~MSG~
Aprenda sobre: How To Add Inline CSS
Categoria: CSS
~/MSG~

Response:
~MSG~
How To Add Inline CSS ❮ Previous Next ❯

How To Add Inline CSS
❮ Previous
Next ❯
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
Example
Inline styles are defined within the "style" attribute of the relevant
  element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
  is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tr...
~/MSG~

advantages yourself within style loses mixing defined contain relevant previous


Question: Qual e a funcao de Multiple Style Sheets & Cascading Order em CSS?

~MSG~
Aprenda sobre: Multiple Style Sheets & Cascading Order
Categoria: CSS
~/MSG~

Response:
~MSG~
Multiple Style Sheets & Cascading Order ❮ Previous Next ❯

Multiple Style Sheets & Cascading Order
❮ Previous
Next ❯
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets,
 the value from the last read style sheet will be used.
Assume that an
external style sheet
has the following style for the <h1> element:
h1
{
color: navy;
}
Then, assume that an
internal style sheet
also has the following style for the <h1> element:
h1
{
color: orange;
}
Example
If the internal style is defined
after
the ...
~/MSG~

elements style after multiple internal defined following selector previous different


Question: Qual e a diferenca entre CSSHow To Code Challenge e outros elementos?

~MSG~
Aprenda sobre: CSSHow To Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS How To Code Challenge ❮ Previous

CSS
How To Code Challenge
❮ Previous
Next ❯
Challenge: How To Add CSS
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: Como funciona CSSComments?

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

Response:
~MSG~
CSS Comments ❮ Previous

CSS
Comments
❮ Previous
Next ❯
CSS Comments
Comments are used to explain the CSS code, and may help when you edit the
source code at a later date.
Comments are also used to temporarily disable sections of CSS code within a
stylesheet.
Comments are ignored by browsers!
A CSS comment is placed inside the HTML
<style>
element, and starts with
/*
and ends with
*/
:
Example
/* This is a single-line comment */
p
{
color: red;
}
Try it Yourself »
You can add comments wherever you want in the code:
Ex...
~/MSG~

~FILE[example_4.code]~
~LANG[Code]~
~CODE~
<!--...-->
~/CODE~

placed example ignored starts comment yourself within source later previous


Question: Explique o conceito de CSSErrors em CSS

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

Response:
~MSG~
CSS Errors ❮ Previous

CSS
Errors
❮ Previous
Next ❯
CSS Errors
Errors in CSS can lead to unexpected behavior or styles not being applied correctly.
This page shows common CSS mistakes, and how to avoid them.
Missing Semicolons
Forgetting a semicolon at the end of a property declaration can break the style rule.
Example
.bad {
color: red
background-color: yellow;
}
Try it Yourself »
Invalid Property Names
Using a property name that does not exist will simply be ignored by the browser.
Example
.bad {
colr: blue;
font-si...
~/MSG~

yourself semicolons values style missing avoid being simply unexpected previous

padding font-size colr background-color color


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

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

Response:
~MSG~
CSS Colors ❮ Previous

CSS
Colors
❮ Previous
Next ❯
CSS Colors
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Try it Yourself »
CSS/HTML support
140 standard color names
.
CSS Background Color
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing ...
~/MSG~

dolor world yourself dodgerblue colors violet orange laoreet nonummy color

transparent borders name values elements


Question: Explique o conceito de CSSRGB Colors em CSS

~MSG~
Aprenda sobre: CSSRGB Colors
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS RGB Colors ❮ Previous

CSS
RGB Colors
❮ Previous
Next ❯
RGB Value
An RGB color value represents RED, GREEN, and BLUE light sources.
In CSS, a color can be specified as an RGB value, using this formula:
rgb(
red,
green
,
blue
)
Each parameter (red, green, and
blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red,
because red is set to its highest value (255) and the others are
set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To ...
~/MSG~

parameters colors color parameter highest specified value previous green represents


Question: Explique o conceito de CSSHEX Colors em CSS

~MSG~
Aprenda sobre: CSSHEX Colors
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS HEX Colors ❮ Previous

CSS
HEX Colors
❮ Previous
Next ❯
HEX Value
A hexadecimal color is specified with: #RRGGBB.
In CSS, a color can be specified using a hexadecimal value in the form:
#
rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to
the lowest value (00).
To display black, set all values to 00, like this: #000000.
To display white, set al...
~/MSG~

values colors color highest specified rrggbb value previous displayed decimal


Question: Qual e a funcao de CSSHSL Colors em CSS?

~MSG~
Aprenda sobre: CSSHSL Colors
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS HSL Colors ❮ Previous

CSS
HSL Colors
❮ Previous
Next ❯
HSL Value
HSL stands for hue, saturation, and lightness.
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(
hue
,
saturation
,
lightness
)
Hue
is a degree on the color wheel (from 0 to 360):
0 (or 360) is red
120 is green
240 is blue
Saturation
is a percentage value: 0% means a shade of gray, and 100% is the full color.
Lightness
is also a percentage; 0% is black, 50% is neither light or dark, 100% is white.
Experiment b...
~/MSG~

degree lightness percentage colors mixing color wheel neither specified value


Question: Como funciona CSSColors Code Challenge?

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

Response:
~MSG~
CSS Colors Code Challenge ❮ Previous

CSS
Colors Code Challenge
❮ Previous
Next ❯
Challenge: Colors
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 colors track previous completing small coding progress


Question: Qual e a funcao de CSSBackgrounds em CSS?

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

Response:
~MSG~
CSS Backgrounds ❮ Previous

CSS
Backgrounds
❮ Previous
Next ❯
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
In these chapters, you will learn about the following CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
background
(shorthand property)
CSS background-color
The
background-color
property specifies the background color of an element.
Example
The background color of a page is set like this:
body {
bac...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
background-color
~/CODE~

following example color backgrounds valid yourself specified often these value


Question: Qual e a funcao de CSSBackground Image em CSS?

~MSG~
Aprenda sobre: CSSBackground Image
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Background Image ❮ Previous

CSS
Background Image
❮ Previous
Next ❯
CSS background-image
The
background-image
property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Example
Set the background image for a page:
body {
background-image: url("paper.gif");
}
Try it Yourself »
Example
This example shows a
bad combination
of text and background image. The text is
hardly readable:
body {
background-image: url("bgdesert.jpg");
}
Try it Yourself »
Note:...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
background-image
~/CODE~

repeated image example disturb combination yourself entire shows using previous


Question: Descreva CSSBackground Image Repeat com exemplos praticos

~MSG~
Aprenda sobre: CSSBackground Image Repeat
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Background Image Repeat ❮ Previous

CSS
Background Image Repeat
❮ Previous
Next ❯
CSS background-repeat
The
background-repeat
property sets if/how a background image will be
repeated.
By default, a background-image is repeated both vertically and horizontally.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
body
{
background-image: url("gradient_bg.png");
}
Try it Yourself »
CSS background-repeat Horizontally
If the image above is repeated only horizontally (
backgroun...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
background-repeat
~/CODE~

repeated image should example above yourself images previous vertically property

corner background-position background-repeat better once


Question: Qual e a funcao de CSSBackground Attachment em CSS?

~MSG~
Aprenda sobre: CSSBackground Attachment
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Background Attachment ❮ Previous

CSS
Background Attachment
❮ Previous
Next ❯
CSS background-attachment
The
background-attachment
property specifies
whether the background image should scroll or be fixed (will not scroll with the
rest of the page):
Example
Specify that the background image should be fixed:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Try it Yourself »
Example
Specify that the background image should scroll with the r...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
background-attachment
~/CODE~

should image description attachment example yourself scroll previous fixed right

page background-position background-repeat fixed background-attachment


Question: Descreva CSSBackground Shorthand com exemplos praticos

~MSG~
Aprenda sobre: CSSBackground Shorthand
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Background Shorthand ❮ Previous

CSS
Background Shorthand
❮ Previous
Next ❯
CSS background - Shorthand property
To shorten the code, it is possible to specify all the background properties in one
single property. This is called a shorthand property.
Instead of writing:
body {
background-color: #ffffff;
background-image:
  url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
You can use the shorthand property
background
:
Example
Use the shorthand property to set all the background properties in...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
background
~/CODE~

following example instead shorthand possible shorten yourself called previous right

writing background-position background-repeat declaration background


Question: Qual e a diferenca entre CSSBackgrounds Code Challenge e outros elementos?

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

Response:
~MSG~
CSS Backgrounds Code Challenge ❮ Previous

CSS
Backgrounds Code Challenge
❮ Previous
Next ❯
Challenge: Backgrounds
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 backgrounds track previous completing small coding progress


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

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

Response:
~MSG~
CSS Borders ❮ Previous

CSS
Borders
❮ Previous
Next ❯
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
I have borders on all sides.
I have a red, bottom border.
I have rounded borders.
I have a blue, left border.
CSS Border Style
The
border-style
property specifies what kind of border to display.
The following values are allowed:
dotted
- Defines a dotted border
dashed
- Defines a dashed border
solid
- Defines a solid border
double
- Defines a double border
...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
border-style
~/CODE~

bottom effect values dashed solid depends style specifies color following


Question: Descreva CSSBorder Width com exemplos praticos

~MSG~
Aprenda sobre: CSSBorder Width
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Border Width ❮ Previous

CSS
Border Width
❮ Previous
Next ❯
CSS Border Width
The
border-width
property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using
one of the three pre-defined values: thin, medium, or thick:
Example
Demonstration of the different border widths:
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: dotted;
border-width: 2px;
}
p.four
{
border-style: dotted;
b...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
border-width
~/CODE~

example widths yourself medium specific border using thick previous different


Question: Qual e a funcao de CSSBorder Color em CSS?

~MSG~
Aprenda sobre: CSSBorder Color
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Border Color ❮ Previous

CSS
Border Color
❮ Previous
Next ❯
CSS Border Color
The
border-color
property is used to set the color of the four borders.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent
Note:
If
border-color
is not set, it inherits the color of the element.
Example
Demonstration of the different border colors:
p.one
{
border-style: solid;
bor...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
border-color
~/CODE~

example transparent inherits border previous different property demonstration color specify


Question: Explique o conceito de CSSBorder Sides em CSS

~MSG~
Aprenda sobre: CSSBorder Sides
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Border Sides ❮ Previous

CSS
Border Sides
❮ Previous
Next ❯
CSS Border - Individual Sides
From the examples on the previous pages, you have seen that it is possible to specify a
different border for each side.
In CSS, there are also properties for specifying each of the borders (top,
right, bottom, and left):
border-top-style
border-right-style
border-bottom-style
border-left-style
In the example below we use the four properties above to set the style of
each border side:
Example
p
{
border-top-style: dotted;
border-...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
border-top-style
~/CODE~

yourself style shorthand borders sides previous different specify individual possible

works esult above side border-left-style


Question: Como funciona CSSShorthand Border Property?

~MSG~
Aprenda sobre: CSSShorthand Border Property
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Shorthand Border Property ❮ Previous

CSS
Shorthand Border Property
❮ Previous
Next ❯
CSS Border - Shorthand Property
Like you saw in the previous page, there are many properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in
one property.
The
border
property is a shorthand property for the following individual border properties:
border-width
border-style
(required)
border-color
Example
p {
border: 5px solid red;
}
Result:
Some text
Try it Yourself ...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
border-width
~/CODE~

following there example possible consider dealing shorten individual border solid

esult border-left side border properties


Question: Qual e a funcao de CSSRounded Borders em CSS?

~MSG~
Aprenda sobre: CSSRounded Borders
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Rounded Borders ❮ Previous

CSS
Rounded Borders
❮ Previous
Next ❯
CSS Rounded Borders
The
border-radius
property is used to add rounded borders to an element:
Normal border
Round border
Rounder border
Roundest border
Example
p {
border: 2px solid red;
border-radius: 5px;
}
Try it Yourself »
More Examples
All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.
Set the style of the bottom border
This example demon...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
border-radius
~/CODE~

bottom yourself demonstrates solid style shorthand width round borders roundest


Question: Como funciona CSSBorders Code Challenge?

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

Response:
~MSG~
CSS Borders Code Challenge ❮ Previous

CSS
Borders Code Challenge
❮ Previous
Next ❯
Challenge: Borders
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 borders track previous completing small coding progress


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

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

Response:
~MSG~
CSS Margins ❮ Previous

CSS
Margins
❮ Previous
Next ❯
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
Margins define the distance between an element's border and the surrounding
elements.
With CSS, you have full control over the margins. CSS has properties
for setting the margin for each individual side of an element (top, right, bottom, and left),
and a shorthand property for setting all the margin properties in one
declaration.
This element has a ma...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
margin-top
~/CODE~

yourself define shorthand defined distance margins surrounding setting element sides

works margin-top margin-left margin-right values


Question: Explique o conceito de CSSMargin Collapse em CSS

~MSG~
Aprenda sobre: CSSMargin Collapse
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Margin Collapse ❮ Previous

CSS
Margin Collapse
❮ Previous
Next ❯
CSS Margin Collapse
Margin collapse is when two margins collapse into a single margin.
Top and bottom margins of elements are sometimes collapsed into a single
margin that is equal to the largest of the two margins.
Note:
Margin collapse only happens with top and bottom
margins! Not left and right margins!
In the following example, the <h1> element has a bottom margin of 50px and
the <h2> element has a top margin of 20px. So, the vertical margin between t...
~/MSG~

equal bottom largest elements sometimes right happens following margins would

margin-top collapse px ote margin-bottom


Question: Como funciona CSSMargins Code Challenge?

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

Response:
~MSG~
CSS Margins Code Challenge ❮ Previous

CSS
Margins Code Challenge
❮ Previous
Next ❯
Challenge: Margins
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 margins track previous completing small coding progress


Question: Descreva CSSPadding com exemplos praticos

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

Response:
~MSG~
CSS Padding ❮ Previous

CSS
Padding
❮ Previous
Next ❯
CSS Padding
The CSS padding properties are used to generate space around
an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right, bottom, and left),
and a shorthand property for setting all the padding properties in one
declaration.
This element has a padding of 70px.
Try it Yourself »
Padding - Individual Sides
CSS has properties f...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
padding-top
~/CODE~

padding there around generate setting individual yourself specifying element sides

works padding-top padding-bottom padding values


Question: Como funciona CSSPaddingand box-sizing?

~MSG~
Aprenda sobre: CSSPaddingand box-sizing
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Padding and box-sizing

CSS
Padding
and box-sizing
❮ Previous
Next ❯
Padding and Element Width
The CSS
width
property specifies the width of the element's content area. The
content area is the portion inside the padding, border, and margin of an element
(
the box model
).
So, if an element has a specified width, the padding added to that element will
be added to the total width of the element. This is often an undesirable result.
Example
Here, the <div> element is given a width of 300px.
However, the actual width o...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
box-sizing
~/CODE~

often inside given specifies width specified element previous added total

padding calculated values box-sizing width


Question: Explique o conceito de CSSPadding Code Challenge em CSS

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

Response:
~MSG~
CSS Padding Code Challenge ❮ Previous

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

understanding padding picker color track previous completing small coding progress


Question: Qual e a funcao de CSSHeight and Width em CSS?

~MSG~
Aprenda sobre: CSSHeight and Width
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Height and Width ❮ Previous

CSS
Height and Width
❮ Previous
Next ❯
CSS Height and Width
The CSS
height
and
width
properties are used to set the height and width of an element.
This element has a height of 70 pixels and a width of 100%.
Try it Yourself »
CSS Set height and width
The
height
and
width
properties are used to set the
height and width of an element.
The height and width do not include padding, borders, or margins.
It sets the height and width of the area inside the padding, border,
and margin of the element.
...
~/MSG~

height pixels yourself element previous properties include inside margin width

height values element ote background-color


Question: Qual e a funcao de CSSMin/Max Height and Width em CSS?

~MSG~
Aprenda sobre: CSSMin/Max Height and Width
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Min/Max Height and Width ❮ Previous

CSS
Min/Max Height and Width
❮ Previous
Next ❯
CSS Min/Max Height and Width
The
min-width
and
max-width
properties are used to set the minimum and maximum width of an element.
The
min-height
and
max-height
properties are used to set the minimum and maximum height of an element.
CSS Using max-width
The
max-width
property sets the maximum
allowed width of an element. This prevents the width of an element to be larger
than the
max-width
property value.
The
max-width
property can have the followin...
~/MSG~

~FILE[example_3.code]~
~LANG[Code]~
~CODE~
min-height
~/CODE~

following height defines larger using element previous allowed properties property


Question: Qual e a diferenca entre CSSHeight and Width Code Challenge e outros elementos?

~MSG~
Aprenda sobre: CSSHeight and Width Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Height and Width Code Challenge ❮ Previous

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

understanding picker height color track previous completing small coding progress


Question: Qual e a diferenca entre CSSBox Model e outros elementos?

~MSG~
Aprenda sobre: CSSBox Model
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Box Model ❮ Previous

CSS
Box Model
❮ Previous
Next ❯
The CSS Box Model
In CSS, the term "box model" is used when talking about web design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
Every box consists of four parts: content, padding, borders and margins.
The image below illustrates the CSS box model:
Explanation of the different parts (from innermost part to outermost part):
Content
- The content of the box, where text and images appear
Padding
- Clears an area around the...
~/MSG~

outermost every parts talking borders essentially previous different consists about


Question: Como funciona CSSBox Model Code Challenge?

~MSG~
Aprenda sobre: CSSBox Model Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Box Model Code Challenge ❮ Previous

CSS
Box Model Code Challenge
❮ Previous
Next ❯
Challenge: Box Model
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 model progress


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

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

Response:
~MSG~
CSS Outline ❮ Previous

CSS
Outline
❮ Previous
Next ❯
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
This element has a black border and a green outline with a width of 5px.
Try it Yourself »
Note:
Outline differs from
borders
! The outline is
drawn outside the element's border, and may overlap other content. Also, the outline is
NOT a part of the element's dimensions; the element's total width and height
is not affected by the width of the outlin...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
outline-style
~/CODE~

yourself specifies differs width following borders element previous black green

esult values outline-style ote properties


Question: Descreva CSSOutline Width com exemplos praticos

~MSG~
Aprenda sobre: CSSOutline Width
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Outline Width ❮ Previous

CSS
Outline Width
❮ Previous
Next ❯
CSS Outline Width
The
outline-width
property specifies the width of the outline,
and can have one of the following values:
thin
(typically 1px)
medium
(typically 3px)
thick
(typically 5px)
A specific size (in px, pt, cm, em, etc)
CSS Outline Width Examples
Here are some outlines with different widths:
A thin outline.
A medium outline.
A thick outline.
A
8px thick outline.
Example
Demonstration of different outline widths:
p {
padding: 5px;
outline-style: sol...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
outline-width
~/CODE~

following outline example medium specific outlines thick previous examples different

padding outline-width widths values outline-color


Question: Qual e a funcao de CSSOutline Color em CSS?

~MSG~
Aprenda sobre: CSSOutline Color
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Outline Color ❮ Previous

CSS
Outline Color
❮ Previous
Next ❯
CSS Outline Color
The
outline-color
property is used to set the color of the outline.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)
CSS Outline Color Examples
Here are some different outlines ...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
outline-color
~/CODE~

ensures outline performs outlines regardless these elements previous invert inversion


Question: Explique o conceito de CSSOutline Shorthand em CSS

~MSG~
Aprenda sobre: CSSOutline Shorthand
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Outline Shorthand ❮ Previous

CSS
Outline Shorthand
❮ Previous
Next ❯
CSS Outline - Shorthand property
The
outline
property is a shorthand property for
setting the following individual outline properties:
outline-width
outline-style
(required)
outline-color
You can specify one, two, or three values from the list above. The order of the values does not matter.
CSS Outline Shorthand Examples
Here are some different outlines specified with the shorthand
outline
property:
A dashed outline.
A dotted red outline.
A 7px solid yell...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
outline-width
~/CODE~

values dashed solid three shorthand following setting specified previous different

outline border-radius properties property corners


Question: Como funciona CSSOutline Offset?

~MSG~
Aprenda sobre: CSSOutline Offset
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Outline Offset ❮ Previous

CSS
Outline Offset
❮ Previous
Next ❯
CSS Outline Offset
The
outline-offset
property adds
a space between an outline and the edge/border of an element. The space between an
element and its outline is transparent.
The following example specifies an outline 15px outside the border edge:
This paragraph has a black border and a red outline 15px outside the border edge.
Example
p {
margin: 30px;
padding: 5px;
border: 1px solid black;
outline:
  3px solid red;
outline-offset: 15px;
}
Try it Yourself...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
outline-offset
~/CODE~

following paragraph outline example offset yourself solid border shows element


Question: Como funciona CSSOutline Code Challenge?

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

Response:
~MSG~
CSS Outline Code Challenge ❮ Previous

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

understanding outline color picker track previous completing small coding progress


Question: Qual e a funcao de CSSText Color em CSS?

~MSG~
Aprenda sobre: CSSText Color
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Text Color ❮ Previous

CSS
Text Color
❮ Previous
Next ❯
CSS Text Formatting
CSS has a lot of properties for styling and formatting text.
text formatting
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
"Try it Yourself"
link.
Try it Yourself »
CSS Text Color
The
color
property is used to set the color of the ...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
background-color
~/CODE~

heading styled formatting paragraph yourself characters styling underline removed specified

by mportant property background-color color


Question: Descreva CSSText Alignment com exemplos praticos

~MSG~
Aprenda sobre: CSSText Alignment
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Text Alignment ❮ Previous

CSS
Text Alignment
❮ Previous
Next ❯
CSS Text Alignment and Text Direction
In this chapter you will learn about the following properties:
text-align
text-align-last
vertical-align
direction
unicode-bidi
Text Alignment
The
text-align
property is used to set the horizontal alignment of a text.
This property can have one of the following values:
left
- Aligns the text to the left
right
- Aligns the text to the right
center
- Centers the text
justify
- Stretches the lines so that
  each line has eq...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-align
~/CODE~

center equal lines alignment justify right chapter default width following

text-align text-align-last values elements properties


Question: Descreva CSSText Decoration com exemplos praticos

~MSG~
Aprenda sobre: CSSText Decoration
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Text Decoration ❮ Previous

CSS
Text Decoration
❮ Previous
Next ❯
CSS Text Decoration
The CSS
text-decoration
property is used to control the appearance of decorative lines on text.
It is a shorthand property for the following individual properties:
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
Add a Decoration Line to Text
The CSS
text-decoration-line
property
sets the type of decoration line added to the text.
This property can have one or more of the following values:
none
-...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-decoration
~/CODE~

following under displayed default lines individual decorative underline appearance decoration

lines values text-decoration-color text-decoration-line ote


Question: Qual e a diferenca entre CSSText Decoration Styles e outros elementos?

~MSG~
Aprenda sobre: CSSText Decoration Styles
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Text Decoration Styles ❮ Previous

CSS
Text Decoration Styles
❮ Previous
Next ❯
Specify a Style for the Decoration Line
The CSS
text-decoration-style
property
sets the style of the decoration line.
This property can have one of the following values:
solid
- Default value. Single line
double
- Double line
dotted
- Dotted line
dashed
- Dashed line
wavy
- Wavy line
Example
Add different styles for the decoration line:
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-de...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-decoration-style
~/CODE~

following example dashed solid single decoration style previous double different

text-decoration-style text-decoration-thickness for text-decoration values


Question: Como funciona CSSText Transformation?

~MSG~
Aprenda sobre: CSSText Transformation
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Text Transformation ❮ Previous

CSS
Text Transformation
❮ Previous
Next ❯
CSS Text Transformation
The CSS
text-transform
property is used to
control the capitalization of text in an element.
It can be used to transform a text into uppercase or lowercase letters, or
capitalize the first letter of each word, without changing the original content
in HTML.
This property can have one of the following values:
none
- No transformation. Text renders as it is
capitalize
- Transforms the first character of each word to uppercase
uppe...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-transform
~/CODE~

lowercase following capitalize character without previous transformation changing demonstration transforms


Question: Explique o conceito de CSSText Spacing em CSS

~MSG~
Aprenda sobre: CSSText Spacing
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Text Spacing ❮ Previous

CSS
Text Spacing
❮ Previous
Next ❯
CSS Text Spacing
CSS has several properties to control text spacing.
In this chapter you will learn about the following properties:
text-indent
letter-spacing
line-height
word-spacing
white-space
CSS Text Indentation
The CSS
text-indent
property is used to specify the indentation of the first line
in a text-block.
Tip:
Negative values are allowed. The first line will be
indented to the left if the value is negative.
Example
Indent the first line of text in a ...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-indent
~/CODE~

yourself values chapter following value previous indented about specify spacing

text-block letter-spacing text-indent words white-space


Question: Explique o conceito de CSSText Shadow em CSS

~MSG~
Aprenda sobre: CSSText Shadow
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Text Shadow ❮ Previous

CSS
Text Shadow
❮ Previous
Next ❯
CSS Text Shadow
The
text-shadow
property adds shadow to text.
In its simplest use, you only specify the horizontal and the vertical shadow.
In addition, you can add a shadow color and blur effect.
Text shadow effect!
Example
Horizontal and vertical shadow:
h1
{
text-shadow: 2px 2px;
}
Try it Yourself »
Next, add a color (red) to the shadow:
Text shadow effect!
Example
Horizontal and vertical shadow, with color:
h1
{
text-shadow: 2px 2px red;
}
Try it Yourself »
...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-shadow
~/CODE~

simplest example yourself effect previous vertical property shadow horizontal color


Question: Como funciona CSSText Code Challenge?

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

Response:
~MSG~
CSS Text Code Challenge ❮ Previous

CSS
Text Code Challenge
❮ Previous
Next ❯
Challenge: Text
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: Explique o conceito de CSSFonts em CSS

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

Response:
~MSG~
CSS Fonts ❮ Previous

CSS
Fonts
❮ Previous
Next ❯
Font Selection is Important
Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand.
Choosing a font that is easy to read is important. It is also important to choose
a good color and size
for your font.
The CSS font-family Property
The CSS
font-family
property
specifies the font for an element.
Tip:
The
font-family
property should
hold several font names as a "fallback" system. ...
~/MSG~

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

readers browser right tries specifies color impact previous choose names


Question: Descreva CSSWeb Safe Fonts com exemplos praticos

~MSG~
Aprenda sobre: CSSWeb Safe Fonts
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Web Safe Fonts ❮ Previous

CSS
Web Safe Fonts
❮ Previous
Next ❯
What are Web Safe Fonts?
Web safe fonts are fonts that are universally installed across all browsers and devices.
Fallback Fonts
However, there are no 100% completely web safe fonts. There is always a
chance that a font is not found or is not installed properly.
Therefore, it is very important to always use fallback fonts.
This means that you should add a list of similar "backup fonts" in
the
font-family
property. If the
first font does not work, the brows...
~/MSG~

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

should fonts there completely similar browsers first browser always previous


Question: Como funciona CSSFont Fallbacks?

~MSG~
Aprenda sobre: CSSFont Fallbacks
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Font Fallbacks ❮ Previous

CSS
Font Fallbacks
❮ Previous
Next ❯
Commonly Used Font Fallbacks
Below are some commonly used font fallbacks, organized by the 5 generic font families:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Serif Fonts
font-family
Example text
Code
"Times New Roman", Times, serif
This is a Heading
This is a paragraph.
Try it
Georgia, serif
This is a Heading
This is a paragraph.
Try it
Garamond, serif
This is a Heading
This is a paragraph.
Try it
Sans-Serif Fonts
font-family
Example text
Code
Arial, Helveti...
~/MSG~

heading fonts example generic below fantasy commonly fallbacks cursive previous


Question: Como funciona CSSFont Style?

~MSG~
Aprenda sobre: CSSFont Style
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Font Style ❮ Previous

CSS
Font Style
❮ Previous
Next ❯
CSS Font Style
The CSS
font-style
property
specifies the font style for a text..
This property can have one of the following values:
normal
- The text is shown normally
italic
- The text is shown in italics
oblique
- The text is "leaning"
(oblique is very similar to italic)
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Try it Yourself »
CSS Font Weight
The CSS
font-weight
property specifies
how thic...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
font-style
~/CODE~

following should example oblique similar italics yourself characters italic style

values font-style font-variant font-weight


Question: Descreva CSSFont Size com exemplos praticos

~MSG~
Aprenda sobre: CSSFont Size
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Font Size ❮ Previous

CSS
Font Size
❮ Previous
Next ❯
CSS Font Size
The CSS
font-size
property
is used to specify the size of the text/font.
Being able to manage the text size is very important in web design.
However, you
should not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.
The
font-size
can be set to an absolute size or to a relative size.
Absolute sizes:
px
: Pixels off...
~/MSG~

adjustments always headings proper being pixels previous manage offers specify


Question: Qual e a funcao de CSSGoogle Fonts em CSS?

~MSG~
Aprenda sobre: CSSGoogle Fonts
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Google Fonts ❮ Previous

CSS
Google Fonts
❮ Previous
Next ❯
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
Just add a special style sheet link in the <head> section and then refer to the font in the CSS.
Example
Here, we want to use a font named "Sofia" from Google Fonts:
<head>
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
effect=effectname
~/CODE~

fonts special example sofia dolor named sheet style previous ipsum


Question: Qual e a funcao de CSSGreat Font Pairings em CSS?

~MSG~
Aprenda sobre: CSSGreat Font Pairings
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Great Font Pairings ❮ Previous

CSS
Great Font Pairings
❮ Previous
Next ❯
Font Pairing Rules
Great font pairings are essential to great design!
Here are some basic rules to create great font pairings:
1. Complement
It is always safe to find font pairings that complement one another.
A great font combination should harmonize, without being too similar or too different.
2. Use Font Superfamilies
A font superfamily is a set of fonts designed to work well together. So, using different fonts within the same superfamily is safe.
For...
~/MSG~

combination always within pairing superfamilies being following rules pairings without

fonts pairings font-size standards xample


Question: Como funciona CSSFont Property?

~MSG~
Aprenda sobre: CSSFont Property
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Font Property ❮ Previous

CSS
Font Property
❮ Previous
Next ❯
The CSS Font Shorthand Property
To shorten the code, it is possible to specify all the individual font properties in one
declaration.
The CSS
font
property is a shorthand property for:
font-style
font-variant
font-weight
font-stretch
font-size
line-height
font-family
Rules for the CSS Font Shorthand Property
The
font-size
and
font-family
values are required. If one of the other values is missing, their default value are used.
If defined,
font-style
,
font-var...
~/MSG~

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

rules possible shorten individual values precede preceded their value previous


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

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

Response:
~MSG~
CSS Fonts Code Challenge ❮ Previous

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

understanding fonts color picker track previous completing small coding progress


Question: Explique o conceito de CSS Icons -Font Awesome em CSS

~MSG~
Aprenda sobre: CSS Icons -Font Awesome
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Icons - Font Awesome ❮ Previous

CSS Icons -
Font Awesome
❮ Previous
Next ❯
How To Add Icons
Icons can easily be added to your HTML page, by using an icon library.
Just add the name of the icon class to any inline HTML element
(like
<i>
or
<span>
).
Icons from icon libraries are scalable vectors that can be customized with CSS (size, color, shadow, etc.).
Font Awesome Icons
To use the Font Awesome icons, go to
fontawesome.com
, sign in, and get a code to add in the
<head>
section of your HTML page.
The code looks something like...
~/MSG~

~FILE[example_4.code]~
~LANG[Code]~
~CODE~
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
~/CODE~

awesome libraries class yourcode scalable looks using element customized previous


Question: Descreva CSS Icons -Bootstrap com exemplos praticos

~MSG~
Aprenda sobre: CSS Icons -Bootstrap
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Icons - Bootstrap ❮ Previous

CSS Icons -
Bootstrap
❮ Previous
Next ❯
Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside the
<head>
section of your HTML page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Note:
No downloading or installation is required!
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-clou...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
~/CODE~

following example color picker yourself track installation previous inside downloading


Question: Explique o conceito de CSS Icons -Google em CSS

~MSG~
Aprenda sobre: CSS Icons -Google
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Icons - Google ❮ Previous

CSS Icons -
Google
❮ Previous
Next ❯
Google Icons
To use the Google icons, add the following line inside the
<head>
section of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Note:
No downloading or installation is required!
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i  class="material-icons">favorite</i>
<i  ...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
~/CODE~

following example complete color picker yourself track installation previous tutorial


Question: Descreva CSSIcons Code Challenge com exemplos praticos

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

Response:
~MSG~
CSS Icons Code Challenge ❮ Previous

CSS
Icons Code Challenge
❮ Previous
Next ❯
Challenge: Icons
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 icons completing small coding progress


Question: Como funciona CSSLinks?

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

Response:
~MSG~
CSS Links ❮ Previous

CSS
Links
❮ Previous
Next ❯
CSS Styling Links
HTML links can be styled with many CSS properties, like
color
,
text-decoration
,
background-color
,
font-size
,
font-weight
,
font-family
, etc.).
Example
Style a link with a color, background-color, and a bold font-weight:
a {
color: hotpink;
background-color: yellow;
font-weight: bold;
}
Try it Yourself »
Styling Links Depending on State
In addition, links can be styled differently depending on what
state
they are in.
The four link states are:
:li...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
text-decoration
~/CODE~

styled example depending yourself styling differently style visited previous states

rules text-decoration are links font-size


Question: Qual e a diferenca entre CSSLink Buttons e outros elementos?

~MSG~
Aprenda sobre: CSSLink Buttons
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Link Buttons ❮ Previous

CSS
Link Buttons
❮ Previous
Next ❯
CSS Link Buttons
CSS can be used to create HTML link buttons:
Link Button
Link Button
Example
Combine several CSS properties to display links as boxes/buttons
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
Try it Yourself »
Example
Another example of how to create link boxes/buttons:
a:link, a:visited {
background-co...
~/MSG~

another example several buttons display yourself solid button previous combine

padding display text-align buttons text-decoration


Question: Descreva CSSLinks Code Challenge com exemplos praticos

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

Response:
~MSG~
CSS Links Code Challenge ❮ Previous

CSS
Links Code Challenge
❮ Previous
Next ❯
Challenge: Links
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 links progress


Question: Explique o conceito de CSSLists em CSS

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

Response:
~MSG~
CSS Lists ❮ Previous

CSS
Lists
❮ Previous
Next ❯
CSS Styling Lists
In HTML, there are two main types of lists:
<ul> - unordered lists (list items are marked with bullets)
<ol> - ordered lists (list items are marked with numbers or letters)
CSS has the following properties for styling HTML lists:
list-style-type
- Specifies the type of list-item marker
list-style-image
- Specifies an image as the list-item marker
list-style-position
- Specifies the position of the list-item markers
list-style
- A shorthand property f...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
list-style-type
~/CODE~

style marker shorthand position specifies types following lists styling ordered

image lists list-style-position list-style-image start


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

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

Response:
~MSG~
CSS Lists Code Challenge ❮ Previous

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

understanding lists picker color track previous completing small coding progress


Question: Como funciona CSSTables?

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

Response:
~MSG~
CSS Tables ❮ Previous

CSS
Tables
❮ Previous
Next ❯
HTML tables can be greatly improved with CSS:
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Berglunds snabbköp
Christina Berglund
Sweden
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Handel
Roland Mendel
Austria
Island Trading
Helen Bennett
UK
Königlich Essen
Philip Cramer
Germany
Laughing Bacchus Winecellars
Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti
Giovanni Rovelli
Italy
Try it Yourself »
CSS Table Borders
The CSS
border
prope...
~/MSG~

~FILE[example_3.code]~
~LANG[Code]~
~CODE~
border-width
~/CODE~

essen centro yourself island italy futterkiste comercial roland anders maria


Question: Como funciona CSSTable Size (Width and Height)?

~MSG~
Aprenda sobre: CSSTable Size (Width and Height)
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Table Size (Width and Height) ❮ Previous

CSS
Table Size (Width and Height)
❮ Previous
Next ❯
CSS Table Width
The CSS
width
property is used to set the width of a table.
The width can be set:
in percent (%)
as a fixed length (px)
by the
auto
keyword
CSS Table Width in Percent
To create a table that spans the entire screen (full-width), use
width: 100%;
:
Firstname
Lastname
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Example
Full-width table:
table
{
width: 100%;
}
Try it Yourself »
To create a table that spans half th...
~/MSG~

~FILE[example_3.code]~
~LANG[Code]~
~CODE~
width: 100%;
~/CODE~

lastname percent savings yourself width peter firstname entire previous griffin


Question: Explique o conceito de CSSTable Alignment em CSS

~MSG~
Aprenda sobre: CSSTable Alignment
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Table Alignment ❮ Previous

CSS
Table Alignment
❮ Previous
Next ❯
Horizontal Alignment
The CSS
text-align
property is used to set the horizontal alignment
of the content in <th> or <td>.
This property can have one of the following values:
left
- Aligns the text to the left
right
- Aligns the text to the right
center
- Centers the text
Note:
By default, the content of <th> elements are
center-aligned and the content of <td> elements are left-aligned!
CSS text-align: center
To center-align the content of <td> elements, use...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-align
~/CODE~

table following firstname lastname peter aligns content center centers savings

height text-align values elements vertical-align


Question: Qual e a diferenca entre CSSTable Styling e outros elementos?

~MSG~
Aprenda sobre: CSSTable Styling
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Table Styling ❮ Previous

CSS
Table Styling
❮ Previous
Next ❯
CSS Table Padding
To add some more space between the inner borders and the content in a table, use the
padding
property on
<td> and <th> elements:
First Name
Last Name
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Example
th, td
{
padding: 10px;
text-align: left;
}
Try it Yourself »
CSS Horizontal Dividers
To create horizontal dividers for a table, add the
border-bottom
property to <th> and <td>
elements:
First Name
Last Name
Savings
Peter
Gr...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
border-bottom
~/CODE~

savings yourself inner peter borders styling previous griffin horizontal create


Question: Descreva CSSResponsive Tables com exemplos praticos

~MSG~
Aprenda sobre: CSSResponsive Tables
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Responsive Tables ❮ Previous

CSS
Responsive Tables
❮ Previous
Next ❯
CSS Responsive Tables
A responsive table will display a horizontal scrollbar if the screen is too
small to display the full content.
Resize the browser window to see the effect:
First Name
Last Name
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Jill
Smith
50
50
50
50
50
50
50
50
50
50
50
50
Eve
Jackson
94
94
94
94
94
94
94
94
94
94
94
94
Adam
Johnson
67
67
67
67
67
67
67
67
67
67
67
67
How to do it:
Wrap the <table> e...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
overflow-x
~/CODE~

table responsive smith display browser window screen first resize previous


Question: Descreva CSSTables Code Challenge com exemplos praticos

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

Response:
~MSG~
CSS Tables Code Challenge ❮ Previous

CSS
Tables Code Challenge
❮ Previous
Next ❯
Challenge: Tables
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 tables


Question: Como funciona CSSThe displayProperty?

~MSG~
Aprenda sobre: CSSThe displayProperty
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS The display Property

CSS
The display
Property
❮ Previous
Next ❯
The CSS display Property
The
display
property is
an important CSS property for controlling layout. It specifies whether an HTML
element is treated as a block or an inline element.
Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is
block
or
inline
.
The
display
property is used to change the default display behavior of HTML elements.
Block-level Elements
A block-level ...
~/MSG~

block always elements every specifies default width treated element value


Question: Explique o conceito de CSSHideElements em CSS

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

Response:
~MSG~
CSS Hide Elements

CSS
Hide
Elements
❮ Previous
Next ❯
CSS display: none;
When using
display: none;
the element is completely hidden from the document flow
and does not take
    up any space.
It is commonly used with JavaScript to hide
or show elements without deleting and recreating them.
Click to show hidden panel
This panel contains a <div> element, which is hidden by default, with display: none.
We use JavaScript to show it (change it to display: block).
Example
How to use CSS and JavaScript to show a hidde...
~/MSG~

~FILE[example_1.css]~
~LANG[Css]~
~CODE~
display: none;
~/CODE~

click completely example document deleting elements using element commonly without


Question: Como funciona CSSDisplay Code Challenge?

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

Response:
~MSG~
CSS Display Code Challenge ❮ Previous

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

understanding display color picker track previous completing small coding progress


Question: Explique o conceito de CSSThe max-width Property em CSS

~MSG~
Aprenda sobre: CSSThe max-width Property
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS The max-width Property ❮ Previous

CSS
The max-width Property
❮ Previous
Next ❯
The CSS max-width Property
The
max-width
property defines the maximum width of an element.
This property prevents the element's width from being larger than the
specified value (it can be smaller, but not larger).
This property is useful for creating responsive layouts and to ensure
content readability across various screen sizes.
Problem with width:
Here we have a horizontally centered <div> element with a specific
width
(600px):
This <div> element...
~/MSG~

layouts various ensure creating prevents being width specified larger element


Question: Descreva CSSMax-width Code Challenge com exemplos praticos

~MSG~
Aprenda sobre: CSSMax-width Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Max-width Code Challenge ❮ Previous

CSS
Max-width Code Challenge
❮ Previous
Next ❯
Challenge: Max-width
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 CSSThe positionProperty com exemplos praticos

~MSG~
Aprenda sobre: CSSThe positionProperty
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS The position Property

CSS
The position
Property
❮ Previous
Next ❯
CSS Positioning
CSS positioning is about controlling the placement of elements within a web page.
With CSS positioning, you can override the normal document flow.
The CSS position Property
The
position
property specifies the positioning
type for an element.
This property can have one of the following values:
static
- This is default. Element is positioned according to the normal
document flow
relative
- Element is positioned relative to its normal po...
~/MSG~

positioned positioning static elements within position specifies following document element


Question: Qual e a diferenca entre CSSFixed and Absolute Positioning e outros elementos?

~MSG~
Aprenda sobre: CSSFixed and Absolute Positioning
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Fixed and Absolute Positioning ❮ Previous

CSS
Fixed and Absolute Positioning
❮ Previous
Next ❯
CSS position: fixed
An element with
position: fixed;
is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used set the final location of the element.
A fixed element does not leave a gap in the page where it would normally have been located.
This <div> element has
position: fixed;
Notice the fixed element in the lower-right corner o...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
position: fixed;
~/CODE~

positioned positioning corner always stays final leave location would element


Question: Qual e a funcao de CSSSticky Positioning em CSS?

~MSG~
Aprenda sobre: CSSSticky Positioning
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Sticky Positioning ❮ Previous

CSS
Sticky Positioning
❮ Previous
Next ❯
CSS position: sticky
An element with
position: sticky;
toggles between
a
relative
and
fixed
position, depending on the scroll position.
A sticky element is positioned relative until a certain scroll position is
reached - then it "sticks" in that place (like position:fixed).
Note:
You must specify at least one of the
top
,
right
,
bottom
or
left
properties, for
sticky positioning to work.
In this example, when the sticky element reach the top of the pag...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
position: sticky;
~/CODE~

sticky positioning positioned bottom right position sticks toggles element previous


Question: Descreva CSSPosition Code Challenge com exemplos praticos

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

Response:
~MSG~
CSS Position Code Challenge ❮ Previous

CSS
Position Code Challenge
❮ Previous
Next ❯
Challenge: Position
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 position progress


Question: Como funciona CSSPositionOffsets?

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

Response:
~MSG~
CSS Position Offsets

CSS
Position
Offsets
❮ Previous
Next ❯
Positioning with top, right, bottom, and left
The
top
,
right
,
bottom
, and
left
properties are used to position elements.
These properties only work on
positioned elements
(elements with
position
set to
relative
,
absolute
,
fixed
, or
sticky
).
Positioning Text On an Image
How to position text on an image:
Example
Bottom Left
Top Left
Top Right
Bottom Right
Centered
Try it Yourself:
Top Left »
Top Right »
Bottom Left »
Bottom Right »
Centered »
All CSS P...
~/MSG~

positioned positioning sticky bottom elements right position offsets previous centered


Question: Explique o conceito de CSSPosition Offsets Code Challenge em CSS

~MSG~
Aprenda sobre: CSSPosition Offsets Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Position Offsets Code Challenge ❮ Previous

CSS
Position Offsets Code Challenge
❮ Previous
Next ❯
Challenge: Position Offsets
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 offsets track previous completing small coding position


Question: Como funciona CSSThe z-indexProperty?

~MSG~
Aprenda sobre: CSSThe z-indexProperty
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS The z-index Property

CSS
The z-index
Property
❮ Previous
Next ❯
The CSS z-index Property
The
z-index
property specifies the stack order of
positioned elements.
The stack order defines which element should be placed in front or behind other
elements.
When elements are positioned, they can overlap other elements.
An element can have a positive or negative stack order (z-index):
This is a heading
Because the image has a z-index of -1, it will be placed behind the text.
Example
img
{
position: absolute;
left: 0px;
top...
~/MSG~

heading works positioned positive yourself elements specifies front element previous


Question: Como funciona CSSZ-index Code Challenge?

~MSG~
Aprenda sobre: CSSZ-index Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Z-index Code Challenge ❮ Previous

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


Question: Qual e a diferenca entre CSSThe overflow Property e outros elementos?

~MSG~
Aprenda sobre: CSSThe overflow Property
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS The overflow Property ❮ Previous

CSS
The overflow Property
❮ Previous
Next ❯
The CSS overflow Property
The CSS
overflow
property controls what
happens to content that is too big to fit into an area.
It specifies whether to clip the content or to add scrollbars when the content of an element is too big.
The
overflow
property has the following values:
visible
- Default. The overflow is not clipped. The content renders outside the element's box
hidden
- The overflow is clipped, and the rest of the content is hidden
scroll
- Scrol...
~/MSG~

specifies following visible content scroll element overflow previous outside property


Question: Descreva CSSoverflow-x and overflow-y com exemplos praticos

~MSG~
Aprenda sobre: CSSoverflow-x and overflow-y
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS overflow-x and overflow-y ❮ Previous

CSS
overflow-x and overflow-y
❮ Previous
Next ❯
Overflow in Specific Directions
The
overflow-x
and
overflow-y
properties allow you to control overflow behavior independently for horizontal and vertical directions.
CSS overflow-x and overflow-y
The
overflow-x
and
overflow-y
properties specifies
whether to change the overflow of content just horizontally or vertically (or
both):
overflow-x
specifies what to do with the left/right edges of the
content.
overflow-y
specifies what to do with the to...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
overflow-x
~/CODE~

better specifies happens allow previous independently horizontal edges whether change

overflow-x content overflow-y only scrollbar


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

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

Response:
~MSG~
CSS Overflow Code Challenge ❮ Previous

CSS
Overflow Code Challenge
❮ Previous
Next ❯
Challenge: Overflow
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 overflow previous completing small coding progress


Question: Explique o conceito de CSSFloat em CSS

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

Response:
~MSG~
CSS Float ❮ Previous

CSS
Float
❮ Previous
Next ❯
The CSS float Property
The
float
property specifies how an element should float
within its container.
It places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
The
float
property can have one of the following values:
left
- The element floats to the left of its container
right
- The element floats to the right of its container
none
- Default. The element does not float
  and is displayed just where it occur...
~/MSG~

within elements right specifies following inherits element container previous inline


Question: Qual e a diferenca entre CSSclear and Clearfix Hack e outros elementos?

~MSG~
Aprenda sobre: CSSclear and Clearfix Hack
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS clear and Clearfix Hack ❮ Previous

CSS
clear and Clearfix Hack
❮ Previous
Next ❯
The CSS clear Property
The
clear
property specifies what
should happen with the element that is NEXT to a floating element.
The
clear
property prevents elements from wrapping around or beside the floated content.
This property can have one of the
following values:
none
- Default. Allows elements to float
  on either side
left
- The element is pushed below
  floated elements on its left side
right
- The element is pushed below
  floated elements...
~/MSG~

pushed elements clear right prevents specifies either clearfix following floated


Question: Descreva CSSFloat Examples com exemplos praticos

~MSG~
Aprenda sobre: CSSFloat Examples
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Float Examples ❮ Previous

CSS
Float Examples
❮ Previous
Next ❯
Create Equal Width Boxes
With the
float
property, it is easy to float boxes of content side by side:
Box 1
Box 2
Box 1
Box 2
Box 3
Example
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three
  boxes (use 25% for four, and 50% for two, etc) */
padding:
  50px; /* if you want space between the images */
}
Try it Yourself »
What is box-sizing?
You can easily create three floating boxes side by side. However, when you add something that en...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
box-sizing
~/CODE~

example boxes equal content enlarges yourself images floating previous examples


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

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

Response:
~MSG~
CSS Float Code Challenge ❮ Previous

CSS
Float Code Challenge
❮ Previous
Next ❯
Challenge: Float
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 float small progress


Question: Descreva CSSdisplay: inline-block com exemplos praticos

~MSG~
Aprenda sobre: CSSdisplay: inline-block
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS display: inline-block ❮ Previous

CSS
display: inline-block
❮ Previous
Next ❯
The CSS display: inline-block
The
display: inline-block
property combines the features of both inline and block elements.
An element with
display: inline-block
will
appear on the same line as other inline or inline-block elements. In addition,
you can set the
width
,
height
,
margin-top
, and
margin-bottom
properties for
the element (like block elements).
The following example shows the different behavior of
display: inline
,
display: inline-block
a...
~/MSG~

~FILE[example_1.css]~
~LANG[Css]~
~CODE~
display: inline-block
~/CODE~

block combines solid features default width following element previous different


Question: Explique o conceito de CSSInline-block Code Challenge em CSS

~MSG~
Aprenda sobre: CSSInline-block Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Inline-block Code Challenge ❮ Previous

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


Question: Explique o conceito de CSSCenter Align em CSS

~MSG~
Aprenda sobre: CSSCenter Align
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Center Align ❮ Previous

CSS
Center Align
❮ Previous
Next ❯
CSS Centering Elements
With CSS, you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element.
I am vertically and horizontally centered.
Example
Center a div element using flexbox:
.center {
display: flex;
justify-content: center;
align-items: center;
}
Try it Yourself »
Horizontal Alignment
There are several ways to horizontally align elements:
margin: auto
- Center block elements
text-align: center
- Cent...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
align-items: center
~/CODE~

block center yourself centering elements alignment inside position element previous

techniques display text-align elements place-items


Question: Qual e a funcao de CSSHorizontal Align em CSS?

~MSG~
Aprenda sobre: CSSHorizontal Align
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Horizontal Align ❮ Previous

CSS
Horizontal Align
❮ Previous
Next ❯
Horizontal Centering
There are several ways to horizontally center elements in CSS, depending on the type of element.
Center Align Block Elements
Use
margin: auto;
,
to horizontally center a block-level element (like <div>).
Also specify a
width
for the element, to prevent it from stretching out to the edges of its container.
Note:
Center aligning has no effect on block-level elements if the
width
property is not set
(or set to 100%).
Below, the <div> ele...
~/MSG~

~FILE[example_1.css]~
~LANG[Css]~
~CODE~
margin: auto;
~/CODE~

block center effect centering elements prevent equally width element previous

margin-left padding display text-align margin-right


Question: Qual e a funcao de CSSVertical Align em CSS?

~MSG~
Aprenda sobre: CSSVertical Align
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Vertical Align ❮ Previous

CSS
Vertical Align
❮ Previous
Next ❯
Vertical Centering
Vertical centering in CSS can be achieved using modern layout techniques like Flexbox and Grid, or using positioning with transforms.
Center Align with Flexbox
With
CSS flexbox
you can center elements, both horizontally and vertically, within a flex container.
A flex container with both the
justify-content
and the
align-items
properties set to
center
will align the item(s) in the center (in both axis):
I am vertically and horizontally cente...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
justify-content
~/CODE~

techniques positioning center yourself centering within solid container previous flexbox


Question: Como funciona CSSAlign Code Challenge?

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

Response:
~MSG~
CSS Align Code Challenge ❮ Previous

CSS
Align Code Challenge
❮ Previous
Next ❯
Challenge: Align
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 align track previous completing small coding progress


Question: Como funciona CSSCombinators?

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

Response:
~MSG~
CSS Combinators ❮ Previous

CSS
Combinators
❮ Previous
Next ❯
CSS Combinators
A combinator is something that defines the relationship between two or more selectors.
A CSS selector can contain more than one selector. Between the selectors, we can include a combinator, to create a more specific selection.
There are four different combinators in CSS:
Descendant combinator (space)
Child combinator (>)
Next sibling combinator (+)
Subsequent-sibling combinator (~)
Descendant Combinator (space)
The
descendant combinator
matches a...
~/MSG~

elements inside descendant contain following specified selector previous different include


Question: Descreva CSSCombinators Code Challenge com exemplos praticos

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

Response:
~MSG~
CSS Combinators Code Challenge ❮ Previous

CSS
Combinators Code Challenge
❮ Previous
Next ❯
Challenge: Combinators
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 combinators track previous completing small coding progress


Question: Qual e a funcao de CSSPseudo-classes em CSS?

~MSG~
Aprenda sobre: CSSPseudo-classes
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Pseudo-classes ❮ Previous

CSS
Pseudo-classes
❮ Previous
Next ❯
CSS Pseudo-classes
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
Some common use for pseudo-classes:
Style an element when a user moves the mouse over it
Style visited and unvisited links differently
Style an element when it gets focus
Style valid/invalid/required/optional form elements
Style an element that is the first child of its parent
Syntax
Pseudo-classes are always denoted by a si...
~/MSG~

moves denoted always elements define style unvisited visited state mouse


Question: Qual e a diferenca entre CSSInteractive Pseudo-classes e outros elementos?

~MSG~
Aprenda sobre: CSSInteractive Pseudo-classes
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Interactive Pseudo-classes ❮ Previous

CSS
Interactive Pseudo-classes
❮ Previous
Next ❯
Interactive Pseudo-classes
Interactive pseudo-classes apply styles based on user interaction with elements.
Here we use the
:hover
pseudo-class and the
:focus
pseudo-class:
Mouse Over Me
Pseudo-classes Used on Links
For HTML links, it is common to use the following pseudo-classes:
:link
- Styles unvisited links
:visited
- Styles visited links
:hover
- Styles a link on mouse over
:active
- Styles an activated link
Example
Display links in different...
~/MSG~

following mouse example display depending interactive colors common activated previous

pseudo-classes classes display focus padding


Question: Explique o conceito de CSSStructural Pseudo-classes em CSS

~MSG~
Aprenda sobre: CSSStructural Pseudo-classes
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Structural Pseudo-classes ❮ Previous

CSS
Structural Pseudo-classes
❮ Previous
Next ❯
Structural Pseudo-classes
Structural pseudo-classes select elements based on their position in the document tree.
The CSS :first-child Pseudo-class
The
:first-child
pseudo-class matches a specific element that is the first child of another element.
Style all first child <p> elements
In the following example, the selector matches all <p> elements that is the first child of any element:
Example
p:first-child
{
color: blue;
}
Try it Yourself »
Style t...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
:first-child
~/CODE~

yourself elements style position select following document element their selector


Question: Qual e a diferenca entre CSSPseudo-classes Code Challenge e outros elementos?

~MSG~
Aprenda sobre: CSSPseudo-classes Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Pseudo-classes Code Challenge ❮ Previous

CSS
Pseudo-classes Code Challenge
❮ Previous
Next ❯
Challenge: Pseudo-classes
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 CSSPseudo-elements com exemplos praticos

~MSG~
Aprenda sobre: CSSPseudo-elements
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Pseudo-elements ❮ Previous

CSS
Pseudo-elements
❮ Previous
Next ❯
CSS Pseudo-Elements
A CSS pseudo-element is a keyword that can be added to a selector, to style a
specific part of an element.
Some common use for pseudo-elements:
Style the first letter or first line, of an element
Insert content before or after an element
Style the markers of list items
Style the user-selected portion of an element
Style the viewbox behind a dialog box
Syntax
Pseudo-elements are denoted by a double colon (::) followed by the pseudo-elemen...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
::first-line
~/CODE~

viewbox denoted style after parts element previous added double markers


Question: Descreva CSSPseudo-elementsfor Text com exemplos praticos

~MSG~
Aprenda sobre: CSSPseudo-elementsfor Text
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Pseudo-elements for Text

CSS
Pseudo-elements
for Text
❮ Previous
Next ❯
Pseudo-elements for Text
Pseudo-elements for text, allow you to style specific parts of text content, such as the first line or first letter.
The CSS ::first-line Pseudo-element
The
::first-line
pseudo-element is used to add a special style
to the first line of a text.
Note:
The
::first-line
pseudo-element can only be applied to block-level
elements.
Example
Format the first line of text in all <p>
elements:
p::first-line
{
color: red;
font-vari...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
::first-line
~/CODE~

example special first yourself allow specific applied style previous parts


Question: Descreva CSSPseudo-elementsfor Content com exemplos praticos

~MSG~
Aprenda sobre: CSSPseudo-elementsfor Content
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Pseudo-elements for Content

CSS
Pseudo-elements
for Content
❮ Previous
Next ❯
Pseudo-elements for Content
Pseudo-elements for content allow you to insert content before or after elements, style list markers, and more.
The CSS ::before Pseudo-element
The
::before
pseudo-element
is used to insert some content before the content of a specified element.
Use the
content
property to specify the content to insert.
Example
Insert an image before the content of each <h3> element:
h3::before
{
content: url(smiley.gif);
}
Try it Yo...
~/MSG~

image example content yourself allow specified style insert after previous

background-color content font-size box element


Question: Explique o conceito de CSSPseudo-elements Code Challenge em CSS

~MSG~
Aprenda sobre: CSSPseudo-elements Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Pseudo-elements Code Challenge ❮ Previous

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


Question: Qual e a funcao de CSSOpacity em CSS?

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

Response:
~MSG~
CSS Opacity ❮ Previous

CSS
Opacity
❮ Previous
Next ❯
CSS Image Opacity
The
opacity
property specifies the opacity/transparency of an element.
The
opacity
property can take a value from 0.0 - 1.0:
0.0 - The element will be completely transparent
0.5 - The element will be 50% transparent
1.0 - Default. The element will be fully opaque
opacity 0.2
opacity 0.5
opacity 1.0
(default)
Example
img {
opacity: 0.5;
}
Try it Yourself »
Opacity and :hover
The
opacity
property is often used with
:hover
to change the opacity on mou...
~/MSG~

image completely opaque opacity transparent fully example yourself change often


Question: Qual e a diferenca entre CSSOpacity Code Challenge e outros elementos?

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

Response:
~MSG~
CSS Opacity Code Challenge ❮ Previous

CSS
Opacity Code Challenge
❮ Previous
Next ❯
Challenge: Opacity
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 opacity track previous completing small coding progress


Question: Qual e a funcao de CSSNavigation Bars em CSS?

~MSG~
Aprenda sobre: CSSNavigation Bars
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Navigation Bars ❮ Previous

CSS
Navigation Bars
❮ Previous
Next ❯
CSS Navigation Bars
A navigation bar is an important component of web design.
Navigation bars
helps users to easily navigate between different sections of a website.
Navigation bars are typically built with HTML list elements ( <ul> and <li>),
and then styled with CSS to get a great look.
A navigation bar is typically located at the top or at the side of a webpage.
A vertical navbar:
Home
News
Contact
About
A horizontal navbar:
Home
News
Contact
About
Navi...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
list-style-type: none;
~/CODE~

elements located component navigation contact previous easily different navigate basically

padding sense element navbar list-style-type


Question: Explique o conceito de CSSVertical Navigation Bar em CSS

~MSG~
Aprenda sobre: CSSVertical Navigation Bar
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Vertical Navigation Bar ❮ Previous

CSS
Vertical Navigation Bar
❮ Previous
Next ❯
CSS Vertical Navigation Bar
In a vertical navigation bar, the navigation links are stacked vertically (on
top of each other), and is typically aligned along the left or right side of a
webpage.
The basics of a vertical navigation bar is an unordered list (<ul>), with list
items (<li>), each holding a link (<a>), as shown in the
Navbar Intro
page.
CSS Vertical Navbar Example
Here, we create a basic vertical navigation bar with a gray background col...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
text-align: center;
~/CODE~

right navigation color navbar previous shown intro links create change

padding display text-decoration on text-align


Question: Explique o conceito de CSSHorizontal Navigation Bar em CSS

~MSG~
Aprenda sobre: CSSHorizontal Navigation Bar
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Horizontal Navigation Bar ❮ Previous

CSS
Horizontal Navigation Bar
❮ Previous
Next ❯
CSS Horizontal Navigation Bar
In a horizontal navigation bar, the navigation links are stacked horizontally (next
to each other), and is typically aligned on the top of a
webpage.
The basics of a horizontal navigation bar is an unordered list (<ul>), with list
items (<li>), each holding a link (<a>), as shown in the
Navbar Intro
page.
It is also common to add a <nav> element around the <ul> element, that will
serve as a container for your navig...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
overflow:
  hidden;
~/CODE~

creating navigation element container navbar previous shown intro horizontal links

padding display text-align text-decoration them


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

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

Response:
~MSG~
CSS Navbar Code Challenge ❮ Previous

CSS
Navbar Code Challenge
❮ Previous
Next ❯
Challenge: Navbar
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 navbar previous completing small coding progress


Question: Descreva CSSDropdowns com exemplos praticos

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

Response:
~MSG~
CSS Dropdowns ❮ Previous

CSS
Dropdowns
❮ Previous
Next ❯
CSS Dropdowns
CSS dropdowns are used to display a list of options or content when a user
clicks or hover over an element, like a button or a navigation link.
A CSS dropdown consists of a trigger element (like <div>, <button>, <p>, <a>,
etc.).
When the trigger element is clicked or hovered over, the dropdown content
will be displayed.
The dropdown content is a container element (e.g. <div>) that holds the hidden content
(can be text, links, images, etc.).
Mouse...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
position:relative
~/CODE~

dropdown options clicked hidden navigation three mouse clicks element container


Question: Explique o conceito de CSSAdvanced Dropdowns em CSS

~MSG~
Aprenda sobre: CSSAdvanced Dropdowns
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Advanced Dropdowns ❮ Previous

CSS
Advanced Dropdowns
❮ Previous
Next ❯
CSS Right-aligned Dropdown
Left
Link 1
Link 2
Link 3
Right
Link 1
Link 2
Link 3
If you want the dropdown menu to go from right to left, instead of left to right, add
right: 0;
Example
.dropdown-content {
right: 0;
}
Try it Yourself »
CSS Dropdown Image
How to add an image and other content inside the dropdown box.
Example
Hover over the image:
Beautiful Cinque Terre
Try it Yourself »
CSS Dropdown Navbar
How to add a dropdown menu inside a navigation bar.
...
~/MSG~

image cinque advanced example instead content dropdown yourself beautiful dropdowns


Question: Explique o conceito de CSSDropdowns Code Challenge em CSS

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

Response:
~MSG~
CSS Dropdowns Code Challenge ❮ Previous

CSS
Dropdowns Code Challenge
❮ Previous
Next ❯
Challenge: Dropdowns
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 dropdowns track previous completing small coding progress


Question: Descreva CSSImage Gallery com exemplos praticos

~MSG~
Aprenda sobre: CSSImage Gallery
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Image Gallery ❮ Previous

CSS
Image Gallery
❮ Previous
Next ❯
CSS Image Gallery
A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page.
Here we use CSS to create an image gallery:
Cinque Terre
Green Forest
Northern Lights
Mountains
The HTML structure for an image gallery is:
A container element to wrap the entire gallery (like a <div> with
  class="gallery").
Another container element for each image (like a <div> with
  class="gallery-item"), that contai...
~/MSG~

~FILE[example_1.css]~
~LANG[Css]~
~CODE~
display: flex;
~/CODE~

terre often forest mountains collection cinque lights entire possibly element


Question: Explique o conceito de CSSImage Gallery Code Challenge em CSS

~MSG~
Aprenda sobre: CSSImage Gallery Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Image Gallery Code Challenge ❮ Previous

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

understanding image picker color track previous completing small coding gallery


Question: Qual e a diferenca entre CSSImage Sprites e outros elementos?

~MSG~
Aprenda sobre: CSSImage Sprites
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Image Sprites ❮ Previous

CSS
Image Sprites
❮ Previous
Next ❯
CSS Image Sprites
An image sprite is a collection of various small images put into one larger image
file, called a "sprite image".
A sprite image is typically arranged in a grid-like way, like this:
A web page with multiple images takes a longer time to load, and generates
multiple server requests.
So, instead of downloading each image separately, the browser downloads the
single sprite image file, which will reduce the number of server requests and
reduce...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
background-image
~/CODE~

longer various generates browser instead multiple collection arranged server requests

height are background-position explained this


Question: Como funciona CSSImage Sprites Code Challenge?

~MSG~
Aprenda sobre: CSSImage Sprites Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Image Sprites Code Challenge ❮ Previous

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

understanding image picker color sprites track previous completing small coding


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

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

Response:
~MSG~
CSS Attribute Selectors

CSS
Attribute
Selectors
❮ Previous
Next ❯
CSS Attribute Selectors
CSS attribute selectors are used to select and style HTML elements with
a specific attribute or attribute value, or both.
Attribute selectors are enclosed in square brackets
[]
.
CSS has the following attribute selectors:
[attribute]
- Select elements with the specified attribute
[attribute="value"]
- Select elements with a specific attribute and an exact value
[attribute~="value"]
- Select elements with an attribute value contai...
~/MSG~

~FILE[example_2.code]~
~LANG[Code]~
~CODE~
[attribute]
~/CODE~

containing start elements style select enclosed following selectors specified value

selectors border xample attribute background-color


Question: Descreva CSSAdvanced Attribute Selectors com exemplos praticos

~MSG~
Aprenda sobre: CSSAdvanced Attribute Selectors
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Advanced Attribute Selectors ❮ Previous

CSS
Advanced Attribute Selectors
❮ Previous
Next ❯
Advanced Attribute Selectors
Advanced attribute selectors match elements based on partial attribute values using special operators.
CSS [attribute^="value"] Selector
The
[attribute^="value"]
selector
is used to select elements with the specific attribute, whose value
starts with
a specific value.
The following example selects all elements with a class attribute value that
starts with "top":
Example
[class^="top"] {
background: yellow;
}
Try it...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
[attribute^="value"]
~/CODE~

advanced yourself values elements select following special selectors selector previous

background-color padding type background ip


Question: Descreva CSSAttribute Selectors Code Challenge com exemplos praticos

~MSG~
Aprenda sobre: CSSAttribute Selectors Code Challenge
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Attribute Selectors Code Challenge ❮ Previous

CSS
Attribute Selectors Code Challenge
❮ Previous
Next ❯
Challenge: Attribute Selectors
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 selectors track previous attribute completing small coding


Question: Qual e a funcao de CSSForms em CSS?

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

Response:
~MSG~
CSS Forms ❮ Previous

CSS
Forms
❮ Previous
Next ❯
CSS Styling Forms
CSS is used to style HTML forms. The look of an HTML form can be greatly improved with CSS:
First Name
Last Name
Country
Australia
Canada
USA
Try it Yourself »
Styling Form Input Fields
With CSS, you can style most of the different input types, like text fields,
password fields, checkboxes, radio buttons, and file inputs. You can also style
input labels and form buttons.
Some commonly used CSS properties for styling input fields, are:
width
padding...
~/MSG~

~FILE[example_5.code]~
~LANG[Code]~
~CODE~
border-radius
~/CODE~

yourself style color labels canada improved width styling previous different


Question: Qual e a funcao de CSSForm Inputs em CSS?

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

Response:
~MSG~
CSS Form Inputs ❮ Previous

CSS
Form Inputs
❮ Previous
Next ❯
Styling Form Input Fields
With CSS, you can style most of the different input types, like text fields,
password fields, checkboxes, radio buttons, and file inputs. You can also style
input labels and form buttons.
Some commonly used CSS properties for styling input fields, are:
width
padding
margin
border
border-radius
background-color
color
font-size
Style Input Width
The
width
property
is used to set the width of an input field.
Tip:
The default width of an...
~/MSG~

~FILE[example_5.code]~
~LANG[Code]~
~CODE~
border-radius
~/CODE~

style color default labels width styling previous different first border

padding border-radius them are box-sizing


Question: Explique o conceito de CSSForm Focus and Icons em CSS

~MSG~
Aprenda sobre: CSSForm Focus and Icons
Categoria: CSS
~/MSG~

Response:
~MSG~
CSS Form Focus and Icons ❮ Previous

CSS
Form Focus and Icons
❮ Previous
Next ❯
Style Input with Focus
By default, some browsers will add a blue outline around the input when it gets
focus (clicked on). You can remove this behavior by adding
outline: none;
to the input.
Use the
:focus
selector to do something with the input field when it gets focus:
Example
input[type=text]:focus
{
background-color: lightblue;
}
Try it Yourself »
Example
input[type=text]:focus
{
border: 3px solid #555;
}
Try it Yourself »
Style Input with icon/ima...
~/MSG~

~FILE[example_1.code]~
~LANG[Code]~
~CODE~
outline: none;
~/CODE~

yourself solid style inside position adding selector previous remove around

outline focus background-position background-repeat padding-left