Oii gente!! Eu fiz a "Home" e criei um documento CSS para estilizar ela, depois quis fazer mais 2 páginas e navegar entre elas estilizando com o mesmo documento CSS usando as mesmas classes, mas parece que essas outras duas páginas ficaram com a letra maior.
Teria como eu fazer uma alteração do tamanho da font alterando apenas naquelas duas paginas e mantendo na Home? Ou realmente só fazendo documentos de CSS separados?
Nathalia, opa, como vai? Para estilizar de forma diferente no mesmo documento css basta inicializar uma classe diferente para essas duas frases!
Olá Nathalia, sim, é possível fazer uma alteração no tamanho da fonte apenas em determinadas páginas sem afetar a página inicial. Uma maneira de fazer isso é incluir um Identificador Único (ID) na tag HTML da página em questão e, em seguida, definir as alterações de estilo com base neste ID específico usando CSS. Aqui está um exemplo de como fazer isso: Na tag HTML da página em questão, adicione o ID "pagina-especifica":
<html id="pagina-especifica">
...
</html>Em seu arquivo CSS, defina o estilo especificamente para o ID "pagina-especifica", como uma alteração de fonte:
#pagina-especifica {
font-size: 18px;
}Com este método, apenas o texto na página com o ID "pagina-especifica" terá seu tamanho de fonte alterado para 18 pixels, e a página inicial manterá seu tamanho de fonte padrão.
Oi, Nathália
Não tem motivo para as outras duas páginas ficaram com a letra maior usando o mesmo "CSS"
Poderia mostrar o código "html" das três páginas
<!DOCTYPE html>
<html lang="pr-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portifolio</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
<a class="cabecalho__menu__link" href="myprojects.html">Meus Projetos</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo"> Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
<p class="apresentacao__conteudo__texto">Olá! Sou Nathalia Pires, desenvolvedora Front-end com especialidade em React,HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo"> Acesse minhas redes: </h2>
<a class="apresentacao__links__link" href="https://www.instagram.com/nati_pires_fig/">
<img class="apresentacao__links__link__img" src="./assets/instagram.png">
Instagram
</a>
<a class="apresentacao__links__link" href="https://github.com/Nathaliafigueredo">
<img class="apresentacao__links__link__img" src="./assets/github (1).png">
Github
</a>
<a class="apresentacao__links__link" href="https://www.linkedin.com/in/nath%C3%A1lia-pires-872a99224/">
<img class="apresentacao__links__link__img" src="./assets/linkedin.png">
Linkedin
</a>
</div>
</section>
<img class="apresentacao__imagem" src="./assets/1.PNG" alt="Foto na nathalia no park">
</main>
<footer class="rodape">
<p> Desenvolvido por Nathália P. Figueredo</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre mim</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
<a class="cabecalho__menu__link" href="myprojects.html">Meus Projetos</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Sobre Mim</h1>
<p class="apresentacao__conteudo__texto">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
</p>
<p class="apresentacao__conteudo__texto">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.</p>
</section>
<img class="apresentacao__imagem" src="./assets/1.PNG" alt="Foto na nathalia no park">
</main>
<footer class="rodape">
<p> Desenvolvido por Nathália P. Figueredo</p>
</footer>
</body>
</html>!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meus Projetos</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
<a class="cabecalho__menu__link" href="myprojects.html">Meus Projetos</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Experiências</h1>
<div class="apresentacao__links">
<ul class="apresentacao__conteudo__texto">
<li> PSE - Aimed at making science more accessible and clear to all - Instagram account and NewsLetter
<a class="apresentacao__links__link" href="https://www.instagram.com/pseducation_/"> Clique para saber mais</a>
</li>
<li> Scratch Day: Event to encourage children to program with activities developed at "scratch".
<a class="apresentacao__links__link" href="https://www.instagram.com/pseducation_/"> Clique para saber mais</a>
</li>
<li> Created a workbook with +350 basic math exercises and 10 slides as support material for +50 students and 2 teachers during the 3-month math course.
<a class="apresentacao__links__link" href="https://www.instagram.com/pseducation_/"> Clique para saber mais</a>
</li>
<li> Projeto Wonder Math - Online course about basic mathematics to strengthen the area post-pandemic.
<a class="apresentacao__links__link" href="https://www.instagram.com/pseducation_/"> Clique para saber mais</a>
</li>
</ul>
</div>
<h2 class="apresentacao__conteudo__titulo">Cursos</h2>
<p class="apresentacao__conteudo__texto">
<ul class="apresentacao__conteudo__texto">
<li> Cambridge University Summer Program to study Computer Science: Developed a presentation of a set of slides in a clear way about the history of computing. Wrote software for a game in Python language in 5 days.</li>
<li>Dio - Programming Logical </li>
</ul>
</p>
<h2 class="apresentacao__conteudo__titulo">Skills</h2>
<p>
<ul class="apresentacao__conteudo__texto">
<li>Liderança</li>
<li>Gestão de Pessoas</li>
<li>Criatividade</li>
</ul>
</p>
</section>
</main>
<footer class="rodape">
<p> Desenvolvido por Nathália P. Figueredo</p>
</footer>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
:root{
--cor-primaria: #000000;
--cor-secundaria: #F6F6F6;
--cor-terciaria: #6b0785;
--cor-quarternaria: rgb(212, 153, 237);
--font-primaria:'Krona One', sans-serif;
--font-secundaria: 'Montserrat', sans-serif;
}
*{
margin: 0;
padding: 0;
}
body {
/* height: 100vh; */
box-sizing: border-box;
background-color:var(--cor-primaria);
color: var(--cor-secundaria);
}
.cabecalho{
padding: 3% 0% 0% 15%
}
.cabecalho__menu{
display: flex;
gap: 80px;
}
.cabecalho__menu__link{
font-family: var(--font-secundaria);
font-size: 24px;
font-weight: 600px;
color: var(--cor-terciaria);
text-decoration: none;
}
.cabecalho__menu__link:hover{
font-size: 26px;
}
.apresentacao{
padding: 5% 15%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo{
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-size: 36px;
font-family: var(--font-primaria);
}
.titulo-destaque {
color: var(--cor-quarternaria);
}
.apresentacao__conteudo__texto{
font-size: 24px;
font-family: var(--font-secundaria);
}
.apresentacao__links{
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.apresentacao__links__subtitulo{
font-family:var(--font-primaria);
font-weight: 400px;
font-size: 24px;
}
.apresentacao__links__link{
/* background-color: #6b0785; */
display: flex;
justify-content: center;
gap: 16px;
border: 2px solid var(--cor-terciaria);
width: 378px;
text-align: center;
border-radius: 8px;
text-decoration: none;
font-size: 24px;
font-weight: 600;
padding: 21.5px;
color: var(--cor-secundaria);
font-family: var(--font-secundaria);
}
.apresentacao__links__link__img{
width: 30px;
}
.apresentacao__links__link:hover{
background-color: var(--cor-terciaria);
padding: 3%
}
.apresentacao__imagem{
width: 400px;
border-radius: 15%;
border: 1px solid var(--cor-secundaria);
}
.rodape{
padding: 24px;
color:var(--cor-secundaria);
background-color: var(--cor-terciaria);
text-align: center;
font-family: var(--font-secundaria);
font-size: 24px;
font-weight: 400px;
}Oi
Eu testei seu código e estão com a mesma fonte e tamanho
Era isso que você queria?
Você pode teste usando a "ferramenta do desenvolvedor" (F12)
