CSS Tutorial

CSS is a language that describes the style of an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

CSS selector

CORES

Clique aqui para lista de cores

BACKGROUND

Demonstrating the Box Model

CSS - Uso de Float

Controlando float

Uso de w3.css

Uso de w3.css -Container

Uso de w3.css - Panel

Uso de w3.css - Borders

Uso de w3.css - Display

Uso de w3.css - Buttons

Uso de w3.css - Table and List

Uso de w3.css - Image

Image- Album

VOLTAR

O que é HTML?

HTML é a linguagem de marcação padrão para criar páginas da Web.

	

VOLTAR

Como inserir comentarios

	

        

VOLTAR

Manipulacao de elementos html

 
		Javascript muda valor de elemento html	
		elemento html 	 
			'<'p id="titulo"'>' Portalx  Page '<'/p'>' 
		botao chamada da funcao 
			'<'button type="button" onclick="MudarTitulo()"'>'MudarTitulo '<'/button '>'
		 
		'<'script type="text/javascript"'>'
		function MudarTitulo()
		{
			document.getElementById("titulo").value //	pega valor de elemento html se desejar manipular
			document.getElementById("titulo").innerHTML="PORTALX J"	// coloca novo valor no elemento
		}
		'<'/scrip'>'
		

VOLTAR

Atributo de estilo HTML

VOLTAR

Elementos de formatação



VOLTAR

Outras Formatacoes

VOLTAR

CORES

Valores de cores CSS

Com o CSS, as cores podem ser especificadas de diferentes maneiras:

Por nomes de cores

- Como valores RGB

- Como valores hexadecimais

- Como valores de HSL (CSS3)

- Como valores HWB (CSS4)

Nomes de cores suportados por todos os navegadores

Todos os navegadores modernos suportam os 140 nomes de cores a seguir

(clique no nome de uma cor ou em um valor hexadecimal para exibir a cor

como a cor de segundo plano junto com cores de texto diferentes):

Cores RGB

Valores de cores RGB são suportados em todos os navegadores.

Um valor de cor RGB é especificado com: rgb ( RED , GREEN , BLUE ).

Cada parâmetro define a intensidade da cor como um inteiro entre 0 e 255.

Por exemplo, rgb (0,0,255) é renderizado como azul, porque o parâmetro blue

é definido como seu valor mais alto (255) e os outros são definidos como 0.

Como valores hexadecimais

Cores hexadecimais

Valores de cor hexadecimais também são suportados em todos os navegadores.

Uma cor hexadecimal é especificada com: # RR GG BB .

RR (vermelho), GG (verde) e BB (azul) são inteiros hexadecimais

entre 00 e FF especificando a intensidade da cor.

Por exemplo, # 0000FF é exibido como azul, porque o componente azul é definido

como seu valor mais alto (FF) e os outros são definidos como 00.

RnnGnnBnn

nn variam de 00 a 99 e de AA aFF

#FF000

Clique aqui para lista de cores


VOLTAR

Exemplo de expressao ternaria


		

VOLTAR

Demonstrating the Box Model

Demonstrating the Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.

This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Demonstrating the Box Modelwitn +outline por fora da borda

This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +outline

VOLTAR

Controle Fluxo switch

	   	

VOLTAR

Alert Box

	
		

VOLTAR

Confirm Box

	
		

VOLTAR

Prompt Box

	
		

VOLTAR

Interacao For

	
		

VOLTAR

Interacao Do While

VOLTAR

Lista de 140 cores classificadas por HEX Value

VOLTAR

Color Name HEX Color

AliceBlue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4

Black #000000

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9

DarkGrey #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

DarkOliveGreen #556B2F

DarkOrange #FF8C00

DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkSlateGrey #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DimGrey #696969

DodgerBlue #1E90FF

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

GoldenRod #DAA520

Gray #808080

Grey #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0

Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYellow #FAFAD2

LightGray #D3D3D3

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

LightSalmon #FFA07A

LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateGray #778899

LightSlateGrey #778899

LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

MediumPurple #9370DB

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970

MintCream #F5FFFA

MistyRose #FFE4E1

Moccasin #FFE4B5

NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #DB7093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9

Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

RebeccaPurple #663399

Red #FF0000

RosyBrown #BC8F8F

RoyalBlue #4169E1

SaddleBrown #8B4513

Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD

SlateGray #708090

SlateGrey #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

Wheat #F5DEB3

White #FFFFFF

WhiteSmoke #F5F5F5

Yellow #FFFF00

YellowGreen #9ACD32

VOLTAR

Background

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

This div has background-image: url(../images/bt_br.gif); - paragraph has its own background color.

This div has background-image: url(../images/bt_br.gif);background-repeat: repeat-x;

This div has margin-right: 200px; background-image: url(../images/bt_br.gif);background-repeat: no-repeat;

background-position: right top; background-size: 100px 100px border-radius: 12px

background-origin: padding-box (default):

Hello World

The background image starts from the upper left corner of the padding edge.

background-origin: border-box:

Hello World

The background image starts from the upper left corner of the border.

background-origin: content-box:

Hello World

The background image starts from the upper left corner of the content.

VOLTAR

Float

In this example, the image will float to the right left or none in the paragraph, and the text in the paragraph will wrap around the image.

Cal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

VOLTAR

Controlando Floats

Without clear

div1
div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.


With clear

div3
div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".

In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:

Without Clearfix

Cal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...

Add the clearfix hack to the containing element, to fix this problem:

With Clearfix

Cal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...

VOLTAR


Grid of Boxes

Float boxes side by side:

Some text inside the box1.

Some text inside the box2.

Some text inside the box3.

Note that we also use the clearfix hack to take care of the layout flow, and that add the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.


VOLTAR


To Use w3.css

Link na head da sua pagina ou w3.css direto no site da w3sclool

To use W3.CSS in your web site, just add a link to "w3.css" from your web pages:

https://www.w3schools.com/w3css/4/w3.css

Or download w3.css from w3css_downloads and add a link to w3.css::

My Header

Car

A car is a wheeled, self-powered motor vehicle used for transportation.

My Footer


VOLTAR


Uso de w3.css -Container

w3-container

London

Container with class=w3-container w3-red.

Adds a 16px left and right padding to any HTML element. Without margins

London

Container with class=w3-container w3-yellow. br>
Is the perfect class to use for all HTML

London

Container with class=w3-container w3-text-red..

Is the perfect class to use for all HTML

London

Container with class w3-container w3-orange w3-hover-red.


VOLTAR


Uso de w3.css - Panel

The Panel Class

The w3-panel class is perfect for displaying notes with class w3-panel w3-pale-green.

The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element.

London is the most .. div w3-panel w3-blue w3-round-xlarge....

X

Click on the X to close this panel.

To close panel.


VOLTAR


Uso de w3.css The Borders

I have red borders.

I have a green top and bottom border.

I have a thick blue left border and a pale-blue background color.

I have a thick red top and bottom border and a pale-red background color.

Border that turns red on hover

Red border that turns blue on hover

Thick (invisible) left border that turns green on hover.

Thick (invisible) bottom border that turns green on hover.

Class			Defines
w3-border			Adds borders (top, right, bottom, left) to an element
w3-border-top			Adds a top border to an element
w3-border-right			Adds a right border to an element
w3-border-bottom		Adds a bottom border to an element
w3-border-left			Adds a left border to an element
w3-border-0			Removes all borders
w3-border-color			Displays the border in a specified color (like red, blue, etc)
w3-hover-border-color		Adds a hoverable border color
w3-bottombar			Adds a thick bottom border to an element
w3-leftbar			Adds a thick left border to an element
w3-rightbar			Adds a thick right border to an element
w3-topbar			Adds a thick top border to an element

VOLTAR


Uso de w3.css Display

Using w3-display-container

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle

The w3-display-container Class

Position of text inside an image

Lights
Top Left
Top Right
Bottom Left
Bottom Right
Top Mid
Left
Right
Middle
Bottom Mid

The w3-display-hover Class

The w3-display-hover class displays content on hover inside a w3-display-container (goes from hidden to shown).

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Mouse over this box!
Top Mid
Bottom Mid

The w3-display-hover Class

Avatar

Floating Classes

The w3-left class floats an element to the left, and the w3-right class floats an element to the right:

w3-left
w3-right

VOLTAR


Uso de w3.css Display

Class	Defines
w3-btn	A rectangular button with a shadow hover effect.
Default color is black.
w3-button	A rectangular button with a gray hover effect.
Default color is light-gray in W3.CSS version 3.
Default color is inherited from parent element in version 4.
w3-bar	A horizontal bar that can be used to group buttons together.
(Perfect for horizontal navigation menus)
w3-block	Class that can be used to define a full width (100%) button.
w3-circle	Can be used to define a circular button.
w3-ripple	Can be used to create a ripple effect.

Buttons (w3-button)

Link Button

Buttons (w3-btn) Shadows

Link Button

Button Colors

Button Shapes

Button Sizes

Button Borders

Buttons with Text Effects

Buttons With Extra Padding

Full-width Buttons (w3-button)

The w3-block class creates a full-width button.

Full-width Buttons (w3-btn)

Buttons as Blocks (w3-button)

The size of the block can be defined using style="width:".

Buttons as Blocks (w3-btn)

Disabled Buttons (w3-button)

Link buttons:

Link Button Link Button

Button buttons:

Input buttons:

Disabled Buttons (w3-btn)

Link buttons:

Link Button Link Button

Button buttons:

Input buttons:

Button Bars

Buttons can be grouped together in a horizontal bar using the w3-bar class:

Button Bars

Buttons can be grouped together without a space between them by using w3-bar-item class:

Button Bars

Two button groups on the same line (if enough space):

Button Bars

Buttons bars can be centered using the w3-center class:

Two button groups on the same line (if enough space):

Button Bars

Buttons bars can easily be used as navigation bars:



Button Bars

The size of each items can be defined by using style="width:":

Left and Right Buttons

Used to create "previous/next" buttons:

Buttons with Ripple Effect

Click on the buttons to see the effect:

Circular Buttons

Images are Buttons

topo com neve

button is a image

topo com neve

button is a image



Uso de w3.css - Table and List

Table All

The w3-table-all class combines the w3-table, w3-bordered, w3-striped, and w3-border classes:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Flipped Stripes

To flip the zebra-stripes, add thead around the table header:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Centering Content in Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Hoverable Table

The w3-hoverable class adds a grey background color on mouse-over

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Table With Different Hover Colors

If you want different hover colors, add w3-hover-color classes to each tr element:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Hoverable List

If you want a specific hover color, add any of the w3-hover-classes to each li element:

  • Jill
  • Eve
  • Adam
  • Bo
  • Anja

List as a Card

The w3-card class makes the list look like a card:

  • Jill
  • Eve
  • Adam

More shadows:

  • Jill
  • Eve
  • Adam

Avatar List

You can combine w3-ul and the w3-bar classes to create an avatar list:

  • ×
    Mike
    Web Designer
  • ×
    Jill
    Support
  • ×
    Jane
    Accountant



Uso de w3.css - Image

Rounded Images

The w3-round classes add rounded corners to an image:

w3-round-small:

Norway

w3-round:

Norway

w3-round-large:

Norway

w3-round-xlarge:

Norway

w3-round-xxlarge:

Norway

Image in a Circle

The w3-circle class shapes an image to a circle:

Norway

Bordered Image

The w3-border class adds borders around the image.

Padding added wil be inside the borders:

Norway

More padding:

Norway

Image as a Card

Wrap any of the w3-card classes around the image to display it as a card:

Card with shadows:

Person

Simon

The boss of all bosses


More shadows:

Person

Jane

The other boss

Image Text

Position content inside an image with the w3-display-classes - Note that we have added the w3-container class to get more padding:

Lights

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right

Middle

Top Middle

Bottom Middle

Opacity/Transparency

The w3-opacity classes adds transparency to an element.

Normal (100% opacity):

Forest

w3-opacity-min (75% opacity):

Forest

w3-opacity (60% opacity):

Forest

w3-opacity-max (25% opacity):

Forest

Image Text

Position content inside an image with the w3-display-classes - Note that we have added the w3-container class to get more padding:

Lights

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right

Middle

Top Middle

Bottom Middle

Responsive Image

An image can be set to automatically resize itself to fit the size of its container.

If you want the image to scale down if it has to, but never scale up to be larger than its original size, use the w3-image class.

Lights

Resize the browser window to see the effect.

Grayscale Effect

The w3-grayscale classes add a grayscale effect to an element.

Note: The w3-grayscale classes are not supported in IE 11 and earlier versions.

Normal:

Snow

w3-grayscale-min:

Snow

w3-grayscale:

Snow

w3-grayscale-max (black and white):

Snow

Sepia Effect

The w3-sepia classes add a sepia effect to an element.

Note: The w3-sepia classes are not supported in IE 11 and earlier versions.

Normal:

Snow

w3-sepia-min:

Snow

w3-sepia:

Snow

w3-sepia-max:

Snow

Hover Effect

You can also add special effects on hover/mouse-over.

Note: The w3-hover-sepia and w3-hover-grayscale classes are not supported in IE 11 and earlier versions.

w3-hover-opacity:

w3-hover-grayscale:

w3-hover-sepia:

Hoverable Image

The w3-hover-opacity class adds transparency to the image when you move the mouse over it:

Norway

The w3-hover-opacity-off class rempves transparency from an image when you move the mouse over it:

Norway



Image- Album

Summer 2015

5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore