WEBDESIGN

https://webdesign.ranoya.com

departamento de design | UFPE

AVISOS

ESTE MATERIAL FOI DESENVOLVIDO COMO PARTE INTEGRANTE DA DISCIPLINA DE WEBDESIGN DO CURSO DE BACHARELADO EM DESIGN DA UNIVERSIDADE FEDERAL DE PERNAMBUCO. SEU USO E ACESSO É PÚBLICO E IRRESTRITO, MAS NÃO CONFIGURA VÍNCULO COM A UNIVERSIDADE, TAMPOUCO O CUMPRIMENTO DAS EXIGÊNCIAS DA UNIVERSIDADE PARA CONCLUIR A DISCIPLINA DO CURSO, OU REALIZAR EQUIVALÊNCIA À QUALQUER OUTRA DISCIPLINA DE CURSO SUPERIOR OU DE QUALQUER OUTRA MODALIDADE. ESTE É APENAS UM MATERIAL DE APOIO AS ATIVIDADES DOCENTES E DISCENTES.

AS TECNOLOGIAS ENVOLVIDAS PARA A CONSTRUÇÃO DESTE MATERIAL NÃO SÃO INTEGRALMENTE COMPATÍVEIS COM DISPOSITIVOS MOBILE, EM ESPECIAL, AO SISTEMA OPERACIONAL IOS. POR MAIORES QUE SEJAM OS ESFORÇOS EM PRODUZIR UM MATERIAL QUE FUNCIONE BEM EM QUALQUER PLATAFORMA OU DISPOSITIVO, ALGUNS RECURSOS NECESSÁRIOS PARA A INTERAÇÃO PODEM NÃO ESTAR DISPONÍVEIS, OU SEREM INSUFICIENTES, NESTES DISPOSITIVOS.

OS CONTEÚDOS QUE FORAM CRIADOS E PRODUZIDOS PARA ESTA DISCIPLINA, E A CURADORIA DE REFERÊNCIAS E EXEMPLOS, SÃO PROPRIEDADE INTELECTUAL DO PROF. DR. GUILHERME RANOYA. SEU USO COMERCIAL OU REPRODUÇÃO (MESMO PARCIAL) POR ORGANIZAÇÕES COM FINS LUCRATIVOS SÃO VEDADOS, EXCETO NA EXPRESSA AUTORIZAÇÃO DO AUTOR.

DEPARTAMENTO DE DESIGN
dDESIGN | UFPE

UNIVERSIDADE FEDERAL DE PERNAMBUCO

PESQUISA EM EXPERIÊNCIA E ESTÉTICA DA INTERAÇÃO

2017 © PROF. DR. GUILHERME RANOYA

DADOS DE IDENTIFICAÇÃO

POR FAVOR, PREENCHA OS DADOS ABAIXO PARA QUE ESTE MATERIAL POSSA EXIBIR A VOCÊ, INDIVIDUALMENTE, INFORMAÇÕES PARTICULARIZADAS COMO SUAS NOTAS E SEUS FEEDBACKS DAS ATIVIDADES DESENVOLVIDAS, E PARA QUE TAMBÉM SEJA POSSÍVEL GUARDAR AS ALTERAÇÕES FEITAS POR VOCÊ NESTE MATERIAL, TAIS COMO OS CÓDIGOS QUE VOCÊ VENHA A DIGITAR NO PLAYGROUND, E EXPERIMENTOS DESENVOLVIDOS AQUI.

OS DADOS FICAM REGISTRADOS NO NAVEGADOR NA FORMA DE COOKIES. SE QUISER APAGÁ-LOS, BASTA APAGAR AS INFORMAÇÕES NO CAMPO ABAIXO. OS DADOS ENCAMINHADOS AO SERVIDOR PARA ASSINATURA DA AUTORIA DE TRABALHOS SÃO SIGILOSOS, E NÃO SÃO COMPARTILHADOS COM NINGUÉM, EM NENHUMA HIPÓTESE. 

AO PREENCHER SEUS DADOS, VOCÊ:
NÃO ESTÁ CONCORDANDO COM ABSOLUTAMENTE NADA;
NÃO ESTÁ AUTORIZANDO ABSOLUTAMENTE NADA;
NÃO ESTÁ PERMITINDO QUE ESTES DADOS SEJAM COMPARTILHADOS, VENDIDOS, OU UTILIZADOS POR QUALQUER PROPÓSITO QUE NÃO O DA SIMPLES IDENTIFICAÇÃO DENTRO DO PRÓPRIO SISTEMA PARA PARTICULARIZAR AS INFORMAÇÕES QUE VOCÊ VÊ NELE.

SOCIEDADE

ESTÉTICA

TECNOLOGIA

CIÊNCIA

SOCIEDADE

ESTÉTICA

TECNOLOGIA

CIÊNCIA

TECNOLOGIA

USOS DOS ARTEFATOS

NECESSIDADES LATENTES

APLICAÇÕES

CONFIGURAÇÃO DOS ARTEFATOS

FORMA

SOLUÇÃO

PRODUÇÃO

MATERIAIS

TÉCNICAS

PROCESSOS

CONTEXTO

FUNDAMENTO

VERIFICAÇÃO

 

WEBDESIGN

MATERIAIS, INSTRUMENTOS E FERRAMENTAS UTILIZADAS NA CONSTRUÇÃO DO DESIGN DE INFORMAÇÃO EM SUPORTE DIGITAL

SOCIEDADE

ESTÉTICA

CIÊNCIA

EIXOS

CICLO / PROCESSO DE DESIGN

PETER MORVILLE

A INTERNET PRODUZIU UMA GRANDE BAGUNÇA DE INFORMAÇÃO.
WEBSITES CRIADOS SEM PLANEJAMENTO PARA CRESCER; PROBLEMAS NO GERENCIAMENTO DE CONTEÚDO; ALTOS CUSTOS DE REFORMULAÇÃO DE WEBSITES;


USUÁRIOS PREJUDICADOS.

ESTÉTICA

PROBLEMA DE CONTEÚDO E SUA CONFIGURAÇÃO

DESIGN DE INFORMAÇÃO PARA WEB

ARQUITETURA DE INFORMAÇÃO

USER EXPERIENCE

 

CONSTRUÇÃO DOS DOCUMENTOS WEB
LINGUAGEM UTILIZADA NA SUA ESTRUTURAÇÃO
TÉCNICAS PARA TORNÁ-LOS RESPONSIVOS
CUIDADOS COM CONTEXTOS MOBILE
TECNOLOGIAS COMPLEMENTARES

PROBLEMA DE APLICAÇÃO DOS MATERIAIS

ESTUDO DOS MATERIAIS UTILIZADOS NA CONFIGURAÇÃO DOS ARTEFATOS

 

TECNOLOGIA

"O CURSO DE DESIGN DA UFPE É COMO UM CURSO DE MÚSICA ONDE NÃO SE ENCOSTA EM UM ÚNICO INSTRUMENTO MUSICAL DURANTE 4 ANOS"

ALUNO ANÔNIMO

NÃO NO QUE DIZ RESPEITO A ESTA DISCIPLINA

BIBLIOGRAFIA  

CURSOS ON-LINE

ARQUITETURA DA MÍDIA
E FUNDAMENTOS

PARTE 1

como faço para criar websites incríveis?

senta lá, Cláudia... é bem mais complexo do que parece...

CÓDIGO INTERPRETADO

CÓDIGO COMPILADO

FRONT-END

BACK-END

PARTE DO CÓDIGO QUE É PROCESSADO NO COMPUTADOR DO USUÁRIO
HTML, CSS, JAVASCRIPT

PARTE DO CÓDIGO QUE É PROCESSADO EM UM SERVIDOR ONLINE
PHP, JAVA, C#, .NET

GERA UM CÓDIGO FRONT-END E ENVIA PARA O COMPUTADOR DO USUÁRIO

ROTEAMENTO DE DADOS

010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101
010010 1000101001010011101010010101011110101010101

CACHE

ROTEAMENTO DE DADOS

1

n

ROTEAMENTO DE DADOS

DIFERENÇAS ENTRE

DISPOSITIVOS DE I/O

E RECURSOS

DISPONÍVEIS

LARGURA DE BANDA

E RESTRIÇÕES DE TRANSFERÊNCIA DE DADOS

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

DISPONIBILIDADE

CAPACIDADE DE PROCESSAMENTO

CONSUMO DE MEMÓRIA

INCOMPATIBILIDADE DE SOFTWARE

LIMITAÇÕES
TÉCNICAS

INCOMPATIBILIDADE DE SOFTWARE

FRONT-END

BACK-END

MONTAGEM

PRODUÇÃO

PROPÓSITO / FUNÇÃO

CONTEÚDO

LAYOUT

CÓDIGO FRONT-END

CÓDIGO BACK-END

PROPÓSITO / FUNÇÃO

CONTEÚDO

LAYOUT

CÓDIGO FRONT-END

CÓDIGO BACK-END

PROJETO

EXECUÇÃO

NEGÓCIOS
ADMINISTRAÇÃO

JORNALISMO
LETRAS
PUBLICIDADE
PRODUTORES

DESIGN DE INFORMAÇÃO

WEB DESIGN
(CONSTRUÇÃO TÉCNICA)

COMPUTAÇÃO
ENGENHARIA

SERVIÇO

IMAGENS, TEXTOS, VÍDEOS, LINKS, ETC.

INTERPRETAÇÃO DO NAVEGADOR

HTML, CSS
JAVASCRIPT

RESPOSTA DO SERVIDOR

ETAPAS DE CRIAÇÃO

Layout

Esquema Construtivo

Código e Arquivos

Webserver

Web

LAYOUT

FRONT END + BACK END

PROBLEMA ESTÉTICO

PROBLEMA TECNOLÓGICO

PROBLEMA CONSTRUTIVO

<div>
    <a href="#">link</a>
    <p> parágrafo</p>
</div>
p {
      color: #ffffff;
}
if (apaga == true) {
var objeto = document.getElementById("P1");

objeto.display = "none";
}

MORFOLOGIA DOS CÓDIGOS

HTML

CSS

JAVASCRIPT

SCRIPTS

LINGUAGEM FORMAL DE PROGRAMAÇÃO

CÓDIGO HTML

PARTE 2

<
>

UNIVERSAL RESOURCE LOCATOR

URL
https://www.ranoya.com/public/aulas/index.php?nonew=true&theme=bluemsx#web

PROTOCOLO DE COMUNICAÇÃO

DOMÍNIO

DIRETÓRIO NO WEBSERVER


DOCUMENTO


VARIÁVEIS


ÂNCORA NO DOCUMENTO

ESTRUTURA DE DIRETÓRIOS

meusarquivos

imagens

css

html

pdf

doc.pdf

index.html

outro.html

estilo.css

logotipo.png

icone.svg

foto.jpg

imagens

css

../css
../imagens

pdf

./pdf

meusarquivos

../../meusarquivos

logotipo.png

../imagens/logotipo.png

icone.svg

../imagens/icone.svg

foto.jpg

../imagens/foto.jpg

estilo.css

../css/estilo.css

doc.pdf

./pdf/doc.pdf

outro.html

./outro.html

ARQUIVOS

jpeg

gif

png

svg

texto puro (.txt) sem formatação encodificado em utf-8

terminação (.html, .php, .js, .css, etc.) são convenções

códigos

imagens

sublime text
visual studio code
atom editor
adobe brackets
notepad ++
windows notepad

sublime text

visual studio code

atom editor

adobe brackets

notepad ++

SINTAXE

<tag propriedades>conteúdo</tag>

COMEÇO DA INSTRUÇÃO

FIM DA INSTRUÇÃO

<div>

<body>

<style>

<head>

<p>

<strong>

.

.

.

 

.

.

.

</strong>

</p>

</head>

</style>

</body>

</div>

.
.
.
href="https:/www.ranoya.com"
width=100%
frameborder=0
class="meulink"
style="color: black;"
method=GET
name="xpto"
id="logotipo"
o que aparece na tela

SINTAXE

<a href="https://www.ranoya.com" class="link">meu site</a>

ABERTURA DA TAG

FECHAMENTO DA TAG

NÓ PAI
DE UMA ESTRUTURA DE ÁRVORE

ABERTURA DA TAG

FECHAMENTO DA TAG

NÓ PAI
DE UMA ESTRUTURA DE ÁRVORE

PROPRIEDADE HREF DA TAG <A>

PROPRIEDADE CLASS DA TAG <A>

CONTEÚDO DA TAG <A>

O CONTEÚDO DA TAG VIRA UM NOVO NÓ (FILHO) DA ESTRUTURA

<a href="../layout.html">
                      <div>
                         Meu Site
                      </div>
</a>

ABERTURA DA TAG

FECHAMENTO DA TAG

TAG <A>

ABERTURA DA TAG

FECHAMENTO DA TAG

TAG <DIV>

CONTEÚDO

SINTAXE

<a href="../layout.html">
                      <div>
                         Meu Site
                      </div>
                      <p>
                         Novo nó
                      </p>
</a>

TAG <A>

TAG <DIV>

CONTEÚDO

TAG <P>

CONTEÚDO

SINTAXE

<a href="../layout.html">
                      <div>
                         Meu Site
                      </div>
                      <p>
                         <ul>
                           <li>
                             Nó 1
                           </li>
                           <li>
                             Nó 2
                           </li>
                         </ul>
                      </p>
</a>

SINTAXE

<!DOCTYPE html>

<html>

    <head>

    </head>

    <body>

    </body>

</html>

ESTRUTURA

ESPECIFICAÇÃO DA VERSÃO DO HTML PARA QUE O NAVEGADOR SAIBA O QUE ESTÁ INTERPRETANDO

CORPO TOTAL DO CÓDIGO PROPRIAMENTE DITO. TODO O CÓDIGO HTML PRECISA FICAR DENTRO DA TAG

<html>

POR CONVENÇÃO, A TAG
                SÓ DEVE CONTER ESTA DUAS TAGS (

E                )

<head>

METADADOS
DEFINIÇÕES E INFORMAÇÕES QUE NÃO DEVEM APARECER NA TELA DO NAVEGADOR DEVEM FICAR DENTRO DA TAG

<head>

CORPO EFETIVO DO "TEXTO"
AQUILO QUE DEVE APARECER NA TELA DO NAVEGADOR DEVE FICAR DENTRO DA TAG

<body>
<html>
<body>
<head>
 <meta charset="utf-8">
 <meta http-equiv="Content-Language" content="pt-br">
 <title>HTML - Guia de Referência</title>
 <meta name="viewport" 
     content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="keywords" content="html, tags, sintaxe, propriedades">
 <meta name="generator" content="nenhum">
 <meta name="description" content="documento exemplo sobre head">
 <meta name="author" content="Guilherme Ranoya">
 <link rel="icon" href="icon.png">		
 <link rel="image_src" type="image/jpg" href="cover.jpg">
 <meta property="og:image" content="cover.jpg">
 <meta property="og:image:width" content="1145">
 <meta property="og:image:height" content="601">
 <meta name="theme-color" content="#8487BE">
 <meta name="msapplication-navbutton-color" content="#8487BE">
 <meta name="apple-mobile-web-app-status-bar-style" content="#8487BE">
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="base.css">
</head>

HEAD

TAGS                , JUNTO COM ALGUMAS OUTRAS EXCESSÕES, NÃO POSSUEM FECHAMENTO 

<meta>
</meta>

TAGS                , JUNTO COM ALGUMAS OUTRAS EXCESSÕES, NÃO POSSUEM FECHAMENTO 

<link>
</link>

DEFINE O USO DE UMA TABELA DE CARACTERES UNICODE

INFORMA QUE A LINGUA UTILIZADA NO CONTEÚDO É O PORTUGUÊS BRASILEIRO

DEFINE UM TÍTULO QUE APARECE NA JANELA DO NAVEGADOR EM TODO SISTEMA OPERACIONAL

ESPECIFICA PARA OS NAVEGADORES MOBILE QUE ELES NÃO DEVEM REDIMENSIONAR POR CONTA PRÓPRIA O CONTEÚDO E DEVEM RENDERIZAR A PÁGINA COM VERSÕES ESPECÍFICAS DO INTERPRETADOR

DEFINE PALAVRAS-CHAVE DO DOCUMENTO PARA QUE OS MECANISMOS DE BUSCA SE ORIENTEM

INFORMA QUAL/QUAIS FERRAMENTAS OU PLATAFORMAS CRIARAM ESTE DOCUMENTO

DESCREVE PARA OS MECANISMOS DE BUSCA QUAL É O TEOR DO CONTEÚDO DO DOCUMENTO

ENDEREÇO DE UM ARQUIVO CONTENDO UM ÍCONE 16px X 16px QUE APARECERÁ NA ABA DO NAVEGADOR 

IDENTIFICA O AUTOR DESTE DOCUMENTO 

ENDEREÇO DE UM ARQUIVO CONTENDO UMA IMAGEM PARA SER EXIBIDA QUANDO O DOCUMENTO É COMPARTILHADO EM REDES SOCIAIS E OUTRAS PLATAFORMAS 

DIMENSÕES (EM PIXELS) DA IMAGEM INDICADA PARA SER USADA NO COMPARTILHAMENTO EM REDES SOCIAIS E OUTRAS PLATAFORMAS

COR DE FUNDO (EM RGB HEXADECIMAL) PARA SER USADA NA BARRA DE URL DOS NAVEGADORES MOBILE

ENDEREÇO DE UM CÓDIGO JAVASCRIPT EXTERNO PARA SER CARREGADO JUNTO COM ESTE DOCUMENTO

ENDEREÇO DE UM CÓDIGO CSS EXTERNO PARA SER CARREGADO JUNTO COM ESTE DOCUMENTO

<head>

 <style>

    body {
        color: blue;
    }

    .meuslinks {
        color: black;
    }
 
 </style>

 <script>

    alert("Olá!");
    document.write("Hello World!");

 </script>

</head>

HEAD

CÓDIGO CSS

CÓDIGO JAVASCRIPT

HEAD

HEAD

HEAD

HEAD

HEAD

PLAYGROUND

CONSTRUA O HEAD DE SEU PRIMEIRO CÓDIGO HTML

PLAYGROUND

<a>...</a>
<b>...</b>
<br>
<em>...</em>
<i>...</i>
<img>
<strong>...</strong>
<span>...</span>

INLINE TAGS

AS TAGS INLINE, OU TAGS DE CONTEÚDO, SÃO NÓS DA ESTRUTURA CRIADOS PARA APRESENTAR CONTEÚDOS (TEXTOS, IMAGENS, ETC.) OCUPANDO O MÍNIMO DE ESPAÇO POSSÍVEL NA TELA DO NAVEGADOR, DE FORMA CONTÍGUA AO QUE VEM ANTES E DEPOIS DELAS.

AS TAGS INLINE NÃO PRODUZEM, ORIGINALMENTE, UM BLOCO PARA SEPARAR CONTEÚDOS E HIERARQUIAS.

CRIA UMA ÂNCORA NO DOCUMENTO, OU UM LINK PARA OUTRO DOCUMENTO

DEIXA O TEXTO EM NEGRITO, SEM CRIAR NENHUM PESO SEMÂNTICO, OPERANDO APENAS NA FORMATAÇÃO DO TEXTO

INSTRUÇÃO GENÉRICA PARA ALTERAR CARACTERÍSTICAS DO TEXTO ATRAVÉS DE PROPRIEDADES

PULA LINHA
A TAG           NÃO POSSUI FECHAMENTO

<br>
</br>

DEIXA O TEXTO OBLÍQUO, INFORMANDO SEMANTICAMENTE QUE HÁ ÊNFASE SOBRE AQUELE CONTEÚDO

DEIXA O TEXTO OBLÍQUO, SEM CRIAR NENHUM PESO SEMÂNTICO, OPERANDO APENAS NA FORMATAÇÃO DO TEXTO

INSERE UMA IMAGEM NO NAVEGADOR
A TAG              NÃO POSSUI FECHAMENTO

<img>
</img>

DEIXA O TEXTO EM NEGRITO, INFORMANDO QUE HÁ ÊNFASE SEMÂNTICA SOBRE ESTE CONTEÚDO

INLINE TAGS

EXPERIMENTE

INLINE TAGS

INLINE TAGS

INLINE TAGS

INLINE TAGS

INLINE TAGS

INLINE TAGS

PLAYGROUND

INCLUA CONTEÚDO NO SEU CÓDIGO HTML

PLAYGROUND

<div>...</div>
<h1>...</h1>
<h2>...</h2>
<h6>...</h6>
<p>...</p>
<table>...</table>
<td>...</td>
<tr>...</tr>

BLOCK TAGS

AS BLOCK TAGS, OU TAGS DE BLOCO, SÃO NÓS DA ESTRUTURA CRIADOS PARA ORGANIZAR E SEPARAR OS CONTEÚDOS.

CRIA UMA DIVISÃO NA ORGANIZAÇÃO / ESTRUTURA DO DOCUMENTO

<tr>,

CRIA UM BLOCO PARA GUARDAR UM TÍTULO PARA O CONTEÚDO

CRIA UM BLOCO PARA GUARDAR UM SUBTÍTULO PARA O CONTEÚDO

CRIA UM BLOCO PARA GUARDAR UM SUB-SUB-SUBTÍTULO PARA O CONTEÚDO (H6 É O ÚLTIMO NÍVEL HIERÁRQUICO DE TÓPICOS QUE VAI DE H1 A H6)

CRIA UM BLOCO PARA GUARDAR UM PARÁGRAFO DE TEXTO/CONTEÚDO

CRIA UM BLOCO PARA GUARDAR UMA TABELA

CRIA UMA COLUNA DENTRO DE UMA LINHA, DENTRO DE UMA TABELA. A TAG           PRECISA ESTAR DENTRO DE UMA TAG
ESTA JÁ DENTRO DE UMA TAG

<td>
<table>

CRIA UMA LINHA DENTRO DE UMA TABELA. A TAG           PRECISA ESTAR DENTRO DE UMA TAG

<tr>
<table>

BLOCK TAGS

BLOCK TAGS

BLOCK TAGS

BLOCK TAGS

BLOCK TAGS

BLOCK TAGS

<form>...</form>
<input>
<option>...</option>
<select>...</select>
<textarea>...</textarea>

FORMS

AS TAGS INLINE, OU TAGS DE CONTEÚDO, SÃO NÓS DA ESTRUTURA CRIADOS PARA APRESENTAR CONTEÚDOS (TEXTOS, IMAGENS, ETC.) OCUPANDO O MÍNIMO DE ESPAÇO POSSÍVEL NA TELA DO NAVEGADOR, DE FORMA CONTÍGUA AO QUE VEM ANTES E DEPOIS DELAS.

AS TAGS INLINE NÃO PRODUZEM, ORIGINALMENTE, UM BLOCO PARA SEPARAR CONTEÚDOS E HIERARQUIAS.

CRIA UM BLOCO PARA GUARDAR UM FORMULÁRIO E SEUS DADOS

<select>

CRIA UM CAMPO DE ENTRADA DE DADOS, DENTRE OS VÁRIOS TIPOS DE ENTRADA QUE O HTML PERMITE

CRIA UMA OPÇÃO DE VALOR PARA SER EXIBIDA EM UM CONJUNTO DO TIPO 

CRIA UM CONJUNTO DE VALORES QUE PODEM SER ACESSADOS VIA UM BOTÃO COM UM DROPDOWN

CRIA UMA AREA PARA ENTRADA DE TEXTOS

FORMS

CÓDIGO CSS

PARTE 3

{
}
<div> conteúdo </div>
<div> novo conteúdo </div>
<p> não aplica </p>

div {
     color: white;

}

HTML

CSS

APLICAÇÃO DE CSS POR TAG

<div id="xpto"> conteúdo </div>
<div> não aplica </div>
#xpto {
     color: white;

}

APLICAÇÃO DE CSS POR ID

APLICAÇÃO DE CSS POR CLASS

<div class="tex"> conteúdo </div>
<p class="tex"> novo conteúdo </p>
<div id="xpto"> não aplica</div>
.tex {
     color: white;

}

APLICAÇÃO DE CSS POR STYLE

<div style="color: white;"> conteúdo </div>
<a> conteúdo </a>

a {
  color: white;
}

a:hover {
  background-color: cyan;
}

HTML

CSS

SELETORES

conteúdo

.
.
.
first-child
target
selected
focus
visited
hover
<a style="color: white"> conteúdo </a>

a {
  text-decoration: underline;
}
a {
  background-color: blue;
}
a {
  background-color: cyan;
}

HTML

CSS

OVERRIDE DE ATRIBUTO

conteúdo

<a class="cA cB"> conteúdo </a>

.cA {
  background-color: grey;
}
.cB {
  color: cyan;
  text-decoration: underline;
}

HTML

CSS

OVERRIDE DE CLASSE

conteúdo

SINTAXE

a {
     width: 320px;
     line-height: 24px;

}

IDENTIFICADOR
TAG

ELEMENTO