body {
background-color: yellow;
}
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
@media screen and (max-width: 600px) {
body {
background-color: green;
}
}
<p> Nie to </p>
<span>Nie to</span>
<div>Nie to</div>
<span>TO TO</span>
<span>Nie to</span>
/* Wybierz jeden */
A: div > span
B: div + span
C: div ~ span
<p> Nie to </p>
<span>Nie to</span>
<div>Nie to</div>
<span>TO TO</span>
<span>Nie to</span>
/* Wybierz jeden */
A: div > span
B: div + span
C: div ~ span
B
<p> Nie to </p>
<span>Nie to</span>
<div>
<span>TO TO</span>
<span>TO TO</span>
</div>
/* Wybierz jeden */
A: div > span
B: div + span
C: div ~ span
<p> Nie to </p>
<span>Nie to</span>
<div>
<span>TO TO</span>
<span>TO TO</span>
</div>
/* Wybierz jeden */
A: div > span
B: div + span
C: div ~ span
A
<span>Nie to</span>
<div></div>
<p> Nie to </p>
<span>TO TO</span>
<span>TO TO</span>
/* Wybierz jeden */
A: div > span
B: div + span
C: div ~ span
<span>Nie to</span>
<div></div>
<p> Nie to </p>
<span>TO TO</span>
<span>TO TO</span>
/* Wybierz jeden */
A: div > span
B: div + span
C: div ~ span
C
<style>
body {
font-size : 20px;
}
h1 {
font-size : 1.5em;
}
</style>
<h1> Titile </h1>
/* Wybierz jeden */
A: 1.5 px
B: 25 px
C: 30 px
<style>
body {
font-size : 20px;
}
h1 {
font-size : 1.5em;
}
</style>
<h1> Titile </h1>
/* Wybierz jeden */
A: 1.5 px
B: 25 px
C: 30 px
C
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
<ul>
<li> Jest Tu... </li>
<li> I to też... </li>
<li> Również... </li>
</ul>
/* Wybierz jeden */
A. ul li:last-child
B. ul:last-child li
C. ul:last-child( li )
<ul>
<li> Jest Tu... </li>
<li> I to też... </li>
<li> Również... </li>
</ul>
/* Wybierz jeden */
A. ul li:last-child
B. ul:last-child li
C. ul:last-child( li )
A
.element {
z-index: 99999;
}
.element {
z-index: 99999;
}
Bez właściwości "position", ta właściwość nie działa.
Ignoruje static
<style>
.content {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 100;
}
.side-tab {
position: fixed;
z-index: 5;
}
</style>
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>
:root {
--color-js:green;
--color-css: #690;
--color-blue: rgb(0, 183, 255);
}
.headerCODE {
color: var(--color-css);
}
@supports (display: grid) {
div {
display: grid;
}
}
@media (max-width: 20em) {}
@media (min-width: 20em) and (max-width: 35em) {}
@media (20em <= width <=35em) {}
@media (pointer:coarse) {
/* CSS rules for touch screen */
}
@media (hover) {
/* CSS rules useful to people with devices
that have hover support */
}
p::first-letter {
font-size: 30px;
color: Black;
font-family: Arial;
font-weight: bold;
}
h1+p::first-letter {
font-weight: bold;
-webkit-initial-letter: 4 3;
initial-letter: 4 3;
}
@supports (font-variation-settings: 'wdth' 200) {
@font-face {
/* https://github.com/TypeNetwork/Amstelvar */
font-family: AmstelvarAlpha;
src: url('../fonts/AmstelvarAlpha-VF.ttf');
font-weight: normal;
font-style: normal;
}
#font-amstelvar {
font-family: AmstelvarAlpha;
font-variation-settings: 'wdth' 400, 'wght' 98;
}
}
ul {
list-style: none;
border: 5px solid rgb(126,63,222);
border-radius: .5em;
height: 300px;
padding: 0;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
li {
background-color: rgba(126,63,222,.3);
padding: 40px 20px ;
border-bottom: 1px solid rgb(126,63,222);
min-height: 150px;
scroll-snap-align: start;
}
.el {
font-size: calc(3vw + 2px);
width: calc(100% - 20px);
height: calc(100vh - 20px);
padding: calc(1vw + 5px);
}
.el {
background: #1E88E5 linear-gradient(
to bottom,
#1E88E5,
#1E88E5 calc(50% - 10px),
#3949AB calc(50% + 10px),
#3949AB
);
}
[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }
html {
font-size: min(max(1rem, 4vw), 22px);
}
body {
font-size: clamp(100%, 1rem + 2vw, 24px);
}
<body>
<div class="container">
<div class="main-content">
<div class="blog-row">
<div class="blog-col">
<section>
<article>
<a href="#">This link is not bold</a>
<p><a href="#" class="bold">This link is bold</a></p>
</article>
</section>
<section>
<a href="#">This link is not bold</a>
</section>
</div>
</div>
</div>
</div>
</body>
body .container .main-content .blog-row
.blog-col section article p a {
font-weight: bold;
}
.bold {
font-weight: bold;
}
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}
body {
font-size: 16px;
}
p {
font-size: 1rem;
line-height: 1.25;
margin-bottom: 0.5em;
}
<div class="container">
<div class="child_inside_container"></div>
</div>
.container {
font-size: 20px;
}
.child_inside_container {
width: 3em;
}
.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}
.selector {
font-family: Helvetica, Arial, sans-serif;
}
.selector2 {
font-family: Helvetica;
}
@import url("reset.css");
@import url("ie.css");
@import url("typography.css");
@import url("layout.css");
h2{
font-size:2em;
margin-bottom:0.5em;
padding-bottom:0.5em;
border-bottom:1px solid #ccc;
}
.no-border{
padding-bottom:0;
border-bottom:none;
}
h2 {
font-size:2em;
margin-bottom:0.5em;
}
.headline{
padding-bottom:0.5em;
border-bottom:1px solid #ccc;
}
.some-title { font-weight: bold; }
.some-other-title { font-weight: bold; color: red }
.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: red; }
#my-link { color: red; }
.my-link { color: green; }
a { color: blue; }
<body style="margin:0px;">
<table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
<tr>
<td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
<h1 style="font-size:24px;">Mój skromny blog</h1>
</td>
</tr>
<tr style="height:170px;">
<td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
<ul style="list-style:none; padding:0px; line-height:24px;">
<li><a href="#" style="color:#333;">Start</a></li>
<li><a href="#" style="color:#333;">O mnie</a></li>
<li><a href="#" style="color:#333;">Kontakt</a></li>
</ul>
</td>
<td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
<h2>Witaj na stronie</h2>
<p>Here you will learn how to create websites...
<br/>
<br/>
<br/>
</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
<p>copyright © cezarywaleciuk.pl</p>
</td>
</tr>
</table>
</body>