{"id":440,"date":"2026-01-07T17:50:28","date_gmt":"2026-01-07T17:50:28","guid":{"rendered":"https:\/\/www.curso.familiapimentel.com.br\/curso\/?page_id=440"},"modified":"2026-01-10T12:24:27","modified_gmt":"2026-01-10T12:24:27","slug":"modulo-3","status":"publish","type":"page","link":"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-3\/","title":{"rendered":"M\u00f3dulo 3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"440\" class=\"elementor elementor-440\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1080ae77 e-con-full e-flex e-con e-parent\" data-id=\"1080ae77\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-3aef158a e-con-full e-flex e-con e-child\" data-id=\"3aef158a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-466346bc elementor-widget elementor-widget-image\" data-id=\"466346bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-150x150.jpeg\" class=\"attachment-thumbnail size-thumbnail wp-image-121\" alt=\"\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-150x150.jpeg 150w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-300x300.jpeg 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1024x1024.jpeg 1024w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-768x768.jpeg 768w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1536x1536.jpeg 1536w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_.jpeg 2048w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-316b943c e-con-full e-flex e-con e-child\" data-id=\"316b943c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6324c036 elementor-widget elementor-widget-ekit-nav-menu\" data-id=\"6324c036\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ekit-nav-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<nav class=\"ekit-wid-con ekit_menu_responsive_tablet\"\n\t\t\tdata-hamburger-icon=\"\"\n\t\t\tdata-hamburger-icon-type=\"icon\"\n\t\t\tdata-responsive-breakpoint=\"1024\">\n\t\t\t            <button class=\"elementskit-menu-hamburger elementskit-menu-toggler\"  type=\"button\" aria-label=\"hamburger-icon\">\n                                    <span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span>\n                            <\/button>\n            <div id=\"ekit-megamenu-principal\" class=\"elementskit-menu-container elementskit-menu-offcanvas-elements elementskit-navbar-nav-default ekit-nav-menu-one-page-no ekit-nav-dropdown-hover\"><ul id=\"menu-principal\" class=\"elementskit-navbar-nav elementskit-menu-po-left submenu-click-on-icon\"><li id=\"menu-item-236\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-236 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/\" class=\"ekit-menu-nav-link\">Home<\/a><\/li>\n<li id=\"menu-item-241\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-241 nav-item elementskit-dropdown-has relative_position elementskit-dropdown-menu-default_width elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/quem-somos\/\" class=\"ekit-menu-nav-link ekit-menu-dropdown-toggle\">Como Estudar<svg class=\"elementskit-submenu-indicator ekit-svg-icon icon-down-arrow1\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path><\/svg><\/a>\n<ul class=\"elementskit-dropdown elementskit-submenu-panel\">\n\t<li id=\"menu-item-238\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-238 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/curiosidades\/\" class=\" dropdown-item\">Ajuda Importante<\/a><\/ul>\n<\/li>\n<li id=\"menu-item-388\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-388 nav-item elementskit-dropdown-has relative_position elementskit-dropdown-menu-default_width elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"#\" class=\"ekit-menu-nav-link ekit-menu-dropdown-toggle\">Curso Completo<svg class=\"elementskit-submenu-indicator ekit-svg-icon icon-down-arrow1\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path><\/svg><\/a>\n<ul class=\"elementskit-dropdown elementskit-submenu-panel\">\n\t<li id=\"menu-item-239\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-239 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/curso-modulos-0-e-1\/\" class=\" dropdown-item\">M\u00f3dulos 0 e 1<\/a>\t<li id=\"menu-item-436\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-436 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-2\/\" class=\" dropdown-item\">M\u00f3dulo 2<\/a>\t<li id=\"menu-item-469\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-469 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-3\/\" class=\" dropdown-item\">M\u00f3dulo 3<\/a>\t<li id=\"menu-item-499\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-499 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-4\/\" class=\" dropdown-item\">M\u00f3dulo 4<\/a>\t<li id=\"menu-item-537\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-537 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-5\/\" class=\" dropdown-item\">M\u00f3dulo 5<\/a>\t<li id=\"menu-item-562\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-562 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-6\/\" class=\" dropdown-item\">M\u00f3dulo 6<\/a><\/ul>\n<\/li>\n<li id=\"menu-item-237\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-237 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/contato\/\" class=\"ekit-menu-nav-link\">Contato<\/a><\/li>\n<\/ul><div class=\"elementskit-nav-identity-panel\"><button class=\"elementskit-menu-close elementskit-menu-toggler\" type=\"button\">X<\/button><\/div><\/div>\n\t\t\t<div class=\"elementskit-menu-overlay elementskit-menu-offcanvas-elements elementskit-menu-toggler ekit-nav-menu--overlay\"><\/div>        <\/nav>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-32009e5 e-flex e-con-boxed e-con e-parent\" data-id=\"32009e5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5e6e12 elementor-widget elementor-widget-heading\" data-id=\"c5e6e12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">M\u00f3dulo 3<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e976e77 e-con-full e-flex elementor-invisible e-con e-parent\" data-id=\"e976e77\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;,&quot;animation_delay&quot;:1000}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d90d28d elementor-widget elementor-widget-text-editor\" data-id=\"3d90d28d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong>\u00a0<\/strong><\/p><p><strong><img decoding=\"async\" class=\"alignnone wp-image-121 aligncenter\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-300x300.jpeg\" alt=\"\" width=\"97\" height=\"97\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-300x300.jpeg 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1024x1024.jpeg 1024w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-150x150.jpeg 150w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-768x768.jpeg 768w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1536x1536.jpeg 1536w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_.jpeg 2048w\" sizes=\"(max-width: 97px) 100vw, 97px\" \/><\/strong><\/p><h5 style=\"text-align: center;\"><strong>Curso B\u00e1sico de Cria\u00e7\u00e3o de Sites<\/strong><\/h5><h5 style=\"text-align: center;\"><strong>Do Zero ao Site no Ar<\/strong><\/h5><p><strong>M\u00d3DULO 3<\/strong><\/p><p><strong>Conte\u00fado: <\/strong><strong>CSS do zero ao bonito<\/strong><strong>.<\/strong><\/p><p>&#8211; Como aplicar CSS (inline, interno, externo)(*1) \u2013 D\u00e1 trabalho? Sim, um pouco. Tem que ser paciente? Sim, certamente. Fica bonito? Com certeza!.<\/p><p>O que voc\u00ea ver\u00e1 neste m\u00f3dulo e vai aprender f\u00e1cil pra nunca mais esquecer&#8230;<\/p><p>&#8211; Seletores b\u00e1sicos e de classe\/id<\/p><p>&#8211; Box model (margin, border, padding)<\/p><p>&#8211; Cores, fontes (Google Fonts), tamanhos<\/p><p>&#8211; Flexbox e Grid (explica\u00e7\u00e3o pr\u00e1tica e simples)<\/p><p>&#8211; Responsividade com Media Queries<\/p><p>&#8211; Projeto pr\u00e1tico: estilizar o site que fez no m\u00f3dulo anterior<\/p><p>\u00a0<strong>Observa\u00e7\u00e3o Importante<\/strong>: N\u00e3o d\u00ea aten\u00e7\u00e3o e n\u00e3o fique preocupado \u2013 j\u00e1 pensando em desistir \u2013 por causa dos nomes complicados. S\u00e3o somente apar\u00eancias, depois que voc\u00ea tiver maior contato e come\u00e7ar a usar, n\u00e3o v\u00e3o mais assustar!.<\/p><p>\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500<\/p><p>(*1) \u2013 Existem 3 modos de usar os c\u00f3digos CSS em um SCRIPT HTML: Inline \u2014&gt; na mesma linha do c\u00f3digo HTML; Interno \u2014&gt; dentro do SCRIPT HTML, na se\u00e7\u00e3o HEADER; Externo \u2014&gt; em um arquivo externo ao SCRIPT HTML, mas que se liga atrav\u00e9s de uma linha de comando no Script, na se\u00e7\u00e3o header.<\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=6FVO2F4H4N8&amp;t=718s\" target=\"_blank\" rel=\"noopener\"><u><strong>Veja o V\u00eddeo<\/strong><\/u><\/a><\/p><p><strong>ABERTURA DO M\u00d3DULO 3 <\/strong><\/p><p><em>\u201cBOA NOITE, MEUS DESIGNERS DO FUTURO!!!.<\/em><\/p><p><em><br \/>\u00a0Hoje \u00e9 o dia que o seu site feioso do m\u00f3dulo 2 vira capa de revista.<br \/>\u00a0Vamos pegar aquele curr\u00edculo, card\u00e1pio ou portf\u00f3lio que voc\u00ea fez\u2026<br \/>\u00a0e deixar ele t\u00e3o lindo que sua sogra vai querer imprimir e colar na parede.<\/em><\/p><p>E tudo isso usando apenas <strong>CSS<\/strong> \u2013 o tempero da internet!.<\/p><p><strong>1 \u2013 O que \u00e9 CSS mesmo? <\/strong><\/p><p>Lembra da met\u00e1fora da comida?<br \/>\u00a0HTML = arroz, feij\u00e3o, bife \u2013 Tudo Junto e Misturado &#8211; (a comida crua)<br \/>\u00a0CSS = o cheiro verde, o molho, a arruma\u00e7\u00e3o bonita no prato.<br \/>\u00a0Sem CSS o site funciona\u2026 mas parece que foi feito em 1998.<\/p><p><strong>PARTE 1 \u2013 Como ligar o CSS no HTML <\/strong><strong>(de forma que um entenda o outro)<\/strong><\/p><p>Temos 3 jeitos de colocar CSS. Vamos usar o melhor (arquivo separado).<\/p><ol><li>Na pasta do seu site, cria um arquivo novo chamado\u00a0<strong>style.css <\/strong>\u00a0<\/li><li>No seu <strong>index.html<\/strong>, logo acima do <strong>&lt;\/head&gt;<\/strong>, coloca esta linha m\u00e1gica:<\/li><\/ol><p><strong>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt;<\/strong><\/p><p>\u201cPronto. Agora tudo que voc\u00ea escrever no <strong>style.css<\/strong> vai afetar o <strong>HTML<\/strong> inteiro.<\/p><p>\u201d<strong>PARTE 2 \u2013 As 3 formas de escrever CSS<\/strong><\/p><p><strong>\u201cExemplo pr\u00e1tico com a tag &lt;h1&gt;:\u201d<\/strong><\/p><p><strong><span style=\"color: #99cc00;\"> &#8211; Observa\u00e7\u00e3o: as linhas entre \/* e *\/ s\u00e3o apenas coment\u00e1rios.<\/span><\/strong><\/p><p><em><strong>\/* 1) Pela tag direta (afeta TODOS os h1 do site) *\/<\/strong><\/em><\/p><p><strong>h1 {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 color: blue;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 font-size: 50px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 text-align: center;<\/strong><\/p><p><strong>}<\/strong><\/p><p><em><strong>\/* 2) Pela classe (o mais usado do mundo) *\/<\/strong><\/em><\/p><p><strong>.titulo-vermelho {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 color: red;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 font-family: Arial;<\/strong><\/p><p><strong>}<\/strong><\/p><p><em><strong>\/* 3) Pelo ID (s\u00f3 um elemento na p\u00e1gina) *\/<\/strong><\/em><\/p><p><strong>#titulo-principal {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 background-color: yellow;<\/strong><\/p><p><strong>}<\/strong><\/p><p><em><strong>E no HTML voc\u00ea chama assim:<\/strong><\/em><\/p><p><strong>&lt;h1 class=&#8221;titulo-vermelho&#8221;&gt;T\u00edtulo com classe&lt;\/h1&gt;<\/strong><\/p><p><strong>&lt;h1 id=&#8221;titulo-principal&#8221;&gt;T\u00edtulo com ID&lt;\/h1&gt;<\/strong><\/p><p><a href=\"about:blank#\" target=\"_blank\" rel=\"noopener\"><u><strong>Veja o v\u00eddeo<\/strong><\/u><\/a><\/p><p><strong>PARTE 3 \u2013 As propriedades que voc\u00ea vai usar 90% da vida<\/strong><\/p><p>\u201cEssas aqui s\u00e3o as suas melhores amigas:\u201d \u2013 copie este c\u00f3digo css abaixo, no VS Code,\u00a0 cole no arquivo style.css e aplique o RUN. Tente entender o porqu\u00ea das transforma\u00e7\u00f5es analisando cada linha do c\u00f3digo CSS.<\/p><p>body {<\/p><p>color: white; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/* cor da letra *\/<\/p><p>background-color: #007bff; \u00a0 \u00a0 \u00a0 \/* cor de fundo *\/<\/p><p>\/* Fontes (vamos usar Google Fonts) mas voc\u00ea n\u00e3o precisa, pode usar uma fonte nativa do sistema *\/<\/p><p>@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&amp;display=swap&#8217;);<\/p><p>\u00a0font-family: &#8216;Montserrat&#8217;, sans-serif;<\/p><p>\/* Tamanhos e espa\u00e7amentos *\/<\/p><p>font-size: 20px;<\/p><p>margin: 20px; \u00a0 \u00a0 \u00a0 \u00a0\/* espa\u00e7o de fora *\/<\/p><p>padding: 30px; \u00a0 \u00a0 \u00a0 \/* espa\u00e7o de dentro *\/<\/p><p>width: 300px; \/* largura *\/<\/p><p>height: 200px; \/* altura *\/<\/p><p>\/* Bordas bonitas *\/<\/p><p>border: 2px\u00a0solid\u00a0black;<\/p><p>border-radius: 10px; \u00a0 \/* cantos arredondados *\/<\/p><p>\/* Centralizar coisas *\/<\/p><p>text-align: center;<\/p><p>margin: 0\u00a0auto; \u00a0 \u00a0 \u00a0 \u00a0\/* centraliza bloco *\/<\/p><p>\u00a0}<\/p><p><strong>Observa\u00e7\u00e3o Importante : \u2013<\/strong> Os valores (20px, 30px e outros) s\u00e3o simples exemplos \u2013 use o que achar conveniente. A indica\u00e7\u00e3o \u201cpx\u201d representa a unidade em Pixels (px) usada normalmente para medida de Fontes e outros elementos gr\u00e1ficos.\u00a0<strong>(Exemplo:<\/strong> a fonte que estou usando aqui \u00e9: Segoe Fluent Icons; e o tamanho das letras \u00e9: 14px.)<\/p><p><strong>EXERC\u00cdCIO AO VIVO 1 \u2013 Deixar o curr\u00edculo lindo em 15 minutos<\/strong><\/p><p>Copie esse CSS inteiro no seu VS Code -&gt; <strong>style.css<\/strong>:<\/p><p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014-<\/p><p><strong>@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&amp;display=swap&#8217;);<\/strong><\/p><p><strong>body {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 font-family: &#8216;Montserrat&#8217;, sans-serif;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 background: linear-gradient(to right, #667eea, #764ba2);<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 color: white;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 margin: 0;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 padding: 20px;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>header {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 background: rgba(0,0,0,0.5);<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 padding: 30px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 text-align: center;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 border-radius: 15px;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>h1 {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 font-size: 50px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 margin: 0;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>h2 {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 color: #ffd700;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>img {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 border-radius: 50%;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 border: 5px solid white;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 width: 200px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 margin: 20px 0;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>section {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 background: rgba(255,255,255,0.2);<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 margin: 20px 0;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 padding: 20px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 border-radius: 10px;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>button {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 background: #ffd700;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 color: black;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 padding: 15px 30px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 font-size: 20px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 border: none;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 border-radius: 50px;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 cursor: pointer;<\/strong><\/p><p><strong>}<\/strong><\/p><p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014-<\/p><p><em><strong>Copia \u2192 cola pro VS Code \u2192 Run<\/strong><\/em><\/p><p>\u201d<strong>PARTE 4 \u2013 Flexbox e Grid (a m\u00e1gica de alinhar tudo) <\/strong><\/p><p><strong>O que \u00e9 MENU? \u2013 \u00e9 uma parte da p\u00e1gina onde voc\u00ea tem a possibilidade de escolher uma entre diversas op\u00e7\u00f5es.<br \/>\u00a0Exemplo: <\/strong><\/p><p><img decoding=\"async\" class=\"alignnone size-medium wp-image-474\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/menu-1-300x62.png\" alt=\"\" width=\"300\" height=\"62\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/menu-1-300x62.png 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/menu-1.png 752w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p><p>\u00a0O que s\u00e3o CARDS? \u2013 <strong>Em Design\/Web (UI\/UX):<\/strong>\u00a0Um cont\u00eainer (bloco) visualmente flex\u00edvel para agrupar informa\u00e7\u00f5es (texto, imagens, bot\u00f5es) sobre um tema, facilitando a leitura e intera\u00e7\u00e3o em sites e apps (ex: cart\u00f5es de not\u00edcias, perfis de usu\u00e1rio).<\/p><p><strong>Exemplo:<\/strong><\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-465\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/card-300x89.png\" alt=\"\" width=\"300\" height=\"89\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/card-300x89.png 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/card.png 567w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p><p><strong>Flexbox<\/strong> = alinhar coisas numa linha ou coluna (perfeito pra menu e cards).<\/p><p>.container {<\/p><p>\u00a0\u00a0\u00a0 display: flex;<\/p><p>\u00a0\u00a0\u00a0 justify-content: center;\u00a0\u00a0 <strong>\u00a0<\/strong><em><strong>\/* horizontal *\/<\/strong><\/em><\/p><p>\u00a0\u00a0\u00a0 align-items: center;\u00a0\u00a0\u00a0 <strong>\u00a0<\/strong><strong>\u00a0\u00a0 <\/strong><em><strong>\/* vertical *\/<\/strong><\/em><\/p><p>\u00a0\u00a0\u00a0 gap: 20px;<\/p><p>\u00a0\u00a0\u00a0 flex-wrap: wrap;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>\u00a0<\/strong><em><strong>\/* quebra linha no celular *\/<\/strong><\/em><\/p><p>}<\/p><p><strong>Grid <\/strong>= alinhar em grade (perfeito pra galeria de fotos)<\/p><p><strong>.galeria {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 display: grid;<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 grid-template-columns: repeat(3, 1fr);<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 gap: 20px;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>@media (max-width: 768px) {<\/strong><\/p><p><strong>\u00a0\u00a0\u00a0 .galeria { grid-template-columns: 1fr; }<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>EXERC\u00cdCIO AO VIVO 2 \u2013 Galeria de produtos com Grid<\/strong><\/p><p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014-<\/p><p>&lt;div class=&#8221;galeria&#8221;&gt;<\/p><p>\u00a0\u00a0\u00a0 &lt;img src=&#8221;https:\/\/via.placeholder.com\/300&#8243; alt=&#8221;Produto 1&#8243;&gt;<\/p><p>\u00a0\u00a0\u00a0 &lt;img src=&#8221;https:\/\/via.placeholder.com\/300&#8243; alt=&#8221;Produto 2&#8243;&gt;<\/p><p>\u00a0\u00a0\u00a0 &lt;img src=&#8221;https:\/\/via.placeholder.com\/300&#8243; alt=&#8221;Produto 3&#8243;&gt;<\/p><p>&lt;\/div&gt;<\/p><p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014<\/p><p><strong>PARTE 5 \u2013 Responsividade (para o site ficar bonito no celular)<\/strong><\/p><ul><li>S\u00f3 adicionar isso no final do CSS:<\/li><\/ul><p><em>\/* Celular *\/<\/em><\/p><p>@media (max-width: 768px) {<\/p><p>\u00a0\u00a0\u00a0 h1 { font-size: 30px; }<\/p><p>\u00a0\u00a0\u00a0 .container { flex-direction: column; }<\/p><p>\u00a0\u00a0\u00a0 nav a { display: block; margin: 10px 0; }<\/p><p>}<\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=NvKQeHBePBs\" target=\"_blank\" rel=\"noopener\"><u><strong>V\u00eddeo 1 \u2013 sobre flexbox <\/strong><\/u><\/a><\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=x-4z_u8LcGc\" target=\"_blank\" rel=\"noopener\"><u><strong>V\u00eddeo 2 \u2013 sobre Flexbox e Grid<\/strong><\/u><\/a><\/p><p><a href=\"https:\/\/flexboxfroggy.com\/\" target=\"_blank\" rel=\"noopener\"><u><strong>Video 3 \u2013 Joguinho sobre Flexbox<\/strong><\/u><\/a><\/p><p><strong>Sobre o entendimento do Flexbox e Grid<\/strong><\/p><p><strong>N\u00e3o <\/strong>fique preocupado se n\u00e3o entender claramente sobre este assunto. Voc\u00ea n\u00e3o vai programar neste n\u00edvel, por enquanto. Ademais, atualmente, disp\u00f5e-se de aplicativos que facilitam muito tudo isto. O foco, agora, \u00e9 o entendimento conceitual.<\/p><p><strong>FECHAMENTO DO M\u00d3DULO<\/strong><\/p><p><strong>Nota Importante:<\/strong> \u2013 Voc\u00ea n\u00e3o precisa decorar as TAGS ou outros comandos. Basta saber que existe e quando precisar de algum especificamente, busque nas anota\u00e7\u00f5es ou pesquise na internet. T\u00e1 tudo l\u00e1!.<\/p><p><strong>Olha o que voc\u00ea fez hoje:<\/strong><\/p><ul><li>Ligou o CSS no HTML\u00a0<\/li><li>Aprendeu as propriedades mais usadas do planeta\u00a0<\/li><li>Fez um site lindo com gradiente, fontes Google, bordas arredondadas\u00a0<\/li><li>Aprendeu Flexbox e Grid (coisa que programador antigo leva 5 anos pra aprender)\u00a0<\/li><li>Deixou tudo responsivo pro celular<\/li><\/ul><p>Tarefa de casa (obrigat\u00f3ria e divertida): &#8211; Pegue o projeto anterior, que voc\u00ea mandou no grupo (curr\u00edculo, card\u00e1pio ou portf\u00f3lio), e deixe ele LINDO com CSS.<br \/>\u00a0Manda foto antes e depois no grupo com a <strong>hashtag #Transforma\u00e7\u00e3o<\/strong><\/p><p><strong>Pr\u00f3xima aula (M\u00f3dulo 4)<\/strong>: vamos colocar esse site lindo no ar de gra\u00e7a (GitHub Pages, Vercel), e depois na hospedagem profissional com a Napoleon Host + dom\u00ednio .com.br pr\u00f3prio.Prepare o cora\u00e7\u00e3o, porque na pr\u00f3xima aula seu site vai pro mundo inteiro ver!. Beijo no cora\u00e7\u00e3o de cada um e at\u00e9 l\u00e1, meus\u00a0 artistas.<\/p><p>\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500<\/p><p><strong>Question\u00e1rio do M\u00f3dulo 3<\/strong><\/p><p>CSS do zero ao bonito\u00a0<\/p><p><strong>Tente responder as quest\u00f5es. Anote o seu gabarito. Ao final, se desejar, envie pelo nosso Grupo de Whatsapp ou pelo Formul\u00e1rio de Contato. Envie tamb\u00e9m as d\u00favidas que surgiram e procurarei esclarecer. <\/strong><\/p><ol><li><strong> Qual \u00e9 a linha m\u00e1gica que a gente coloca dentro do `&lt;head&gt;` para ligar o arquivo style.css no HTML?\u00a0 <\/strong><\/li><li>a) `&lt;css href=&#8221;style.css&#8221;&gt;`\u00a0<\/li><li>b) `&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt;`\u00a0\u00a0<\/li><li>c) `&lt;style src=&#8221;style.css&#8221;&gt;`\u00a0<\/li><li>d) `&lt;connect css&gt;`<\/li><\/ol><ol start=\"2\"><li><strong> Das 3 formas de escrever CSS, qual \u00e9 a que a gente mais usa no curso (e na vida)?\u00a0 <\/strong><\/li><li>a) Direto na tag (inline)\u00a0<\/li><li>b) Dentro do `&lt;style&gt;` no HTML\u00a0<\/li><li>c) Arquivo separado style.css\u00a0<\/li><li>d) Pelo JavaScript<\/li><\/ol><ol start=\"3\"><li><strong> Quando queremos mudar TODOS os t\u00edtulos `&lt;h1&gt;` do site de uma vez, usamos o seletor:\u00a0 <\/strong><\/li><li>a) `.h1`\u00a0<\/li><li>b) `#h1`\u00a0<\/li><li>c) `h1`<\/li><li>d) `titulo`<\/li><\/ol><ol start=\"4\"><li><strong> Se eu quiser mudar s\u00f3 UM elemento espec\u00edfico da p\u00e1gina, uso:\u00a0 <\/strong><\/li><li>a) classe (.)\u00a0<\/li><li>b) tag direta\u00a0<\/li><li>c) ID (#)\u00a0<\/li><li>d) Flexbox<\/li><\/ol><ol start=\"5\"><li><strong> No Box Model, o que significa \u201cpadding\u201d?\u00a0 <\/strong><\/li><li>a) Espa\u00e7o de fora da caixa\u00a0<\/li><li>b) Espa\u00e7o de dentro da caixa (entre o conte\u00fado e a borda)\u00a0<\/li><li>c) A borda em si\u00a0<\/li><li>d) A cor de fundo<\/li><\/ol><ol start=\"6\"><li><strong> Como a gente traz uma fonte bonita do Google Fonts pro site?\u00a0 <\/strong><\/li><li>a) Baixa o arquivo e coloca na pasta\u00a0<\/li><li>b) Usa a linha `@import url(&#8216;https:\/\/fonts&#8230;&#8217;)` no topo do CSS<\/li><li>c) Escreve direto no HTML\u00a0<\/li><li>d) Instala um programa<\/li><\/ol><ol start=\"7\"><li><strong> Qual dessas propriedades deixa os cantos arredondados?\u00a0 <\/strong><\/li><li>a) `border-radius`<\/li><li>b) `border-circle`\u00a0<\/li><li>c) `corner-round`\u00a0<\/li><li>d) `radius`<\/li><\/ol><ol start=\"8\"><li><strong> Flexbox e Grid servem principalmente para:<\/strong><\/li><li>a) Mudar as cores\u00a0<\/li><li>b) Alinhar e organizar os elementos na p\u00e1gina<\/li><li>c) Fazer o site carregar mais r\u00e1pido\u00a0<\/li><li>d) Esconder coisas no celular<\/li><\/ol><ol start=\"9\"><li><strong> Para deixar o site bonito no celular a gente usa: <\/strong><\/li><li>a) `@media (max-width: 768px)`<\/li><li>b) `@celular`\u00a0<\/li><li>c) `@responsive`\u00a0<\/li><li>d) `@mobile`<\/li><\/ol><ol start=\"10\"><li><strong> (Pergunta aberta \u2013 essa \u00e9 a minha favorita!)\u00a0 <\/strong><\/li><\/ol><p>\u00a0\u00a0\u00a0 \u201cMe manda o print do ANTES e DEPOIS do seu projeto (curr\u00edculo, card\u00e1pio ou portf\u00f3lio) depois de aplicar o CSS que aprendeu hoje.\u00a0<\/p><p>\u00a0\u00a0\u00a0 Quero ver essa transforma\u00e7\u00e3o linda com meus pr\u00f3prios olhos!\u201d<\/p><p>_______________________________<\/p><p><strong>FIM DO M\u00d3DULO 3<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home Como Estudar Curiosidades Curso Completo M\u00f3dulos 0 e 1 M\u00f3dulo 2 M\u00f3dulo 3 M\u00f3dulo 4 M\u00f3dulo 5 M\u00f3dulo 6 Contato X M\u00f3dulo 3 \u00a0 Curso B\u00e1sico de Cria\u00e7\u00e3o de Sites Do Zero ao Site no Ar M\u00d3DULO 3 Conte\u00fado: CSS do zero ao bonito. &#8211; Como aplicar CSS (inline, interno, externo)(*1) \u2013 D\u00e1 trabalho? [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-440","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":37,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages\/440\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages\/440\/revisions\/663"}],"wp:attachment":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/media?parent=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}