DEV Community: Abhis

How i learned html layers in less than 24 hours!

Abhis — Thu, 03 Dec 2020 11:41:23 +0000

An HTML document is a living document.If you haven't read my previous articles go and read them or if you can't then just visit them once.

Even without any CSS applied, an HTML document already has its own rules:

fluidity: how the content adapts to browser dimensions
ordering: in which order elements appear
stacking: how elements appear on top of each other

This natural behavior is logical.

Fluidity

In HTML, the content is King.

All block elements are fluid. They will naturally adapt their layout to accommodate their inner content:

width: 100% a block will take up the whole width available
word wrap if a block's inline content doesn't fit on a single line, it will continue on a new line
height: auto a block's height varies automatically to match its content's size

<div class="result" id="result-fluidity">
  <div>
    A block element will fill up the whole <strong>width</strong> available, while its <strong>height</strong> will vary automatically according to the size of its content.
  </div>
  <div>
    This element will be pushed downwards depending on the height of its predecessors.
  </div>
</div>

<style type="text/css">
#result-fluidity{ height: 450px; max-width: 800px;}
#result-fluidity div{ background: coral; padding: 20px;}
#result-fluidity div:first-child{ background: mediumaquamarine; animation: expand 3s alternate infinite both;}

@keyframes expand{
  0%  { width: 100%;}
  100%{ min-width: 100px; width: 50%;}
}
</style>

A block is by default in full width
Its height is the height of its content

Ordering

HTML elements are displayed in the order in which they are written in the code.
First in the code -> first in the browser.

Each block appears in the order in which they appear in the HTML code, from top to bottom.

<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
<p>Fifth</p>

<div class="result">
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
  <p>Fourth</p>
  <p>Fifth</p>
</div>

Stacking

A browser has 3 dimensions.

Each HTML element belongs to an imaginary layer.

The stack order depends on how elements are nested: child elements appear on top of their respective parents.

Each nested element appears on top of its parent.
The deeper in the hierarchy, the higher in the stack.

<div>
  This parent is behind
  <p>
    This nested child appears <strong>on top</strong> of its parent
  </p>
</div>

<div class="result">
  <div style="background: midnightblue; color: white; padding: 20px;">
    This parent is behind
    <p style="background: mediumseagreen; padding: 20px;">
      This nested child appears <span style="background: crimson; color: white; padding: 2px 5px;">on top</span> of its parent
    </p>
  </div>
</div>

Breaking the flow

While the browser's default behavior is efficient, it may not be sufficient for your design needs.

Several CSS properties allow to disrupt the Flow:

height and width can alter an element's fluidity
float disrupts an element's behavior as well as its surroundings
position absolute and fixed remove an element from the Flow
z-index can alter the order in which elements are stacked

Ultimate CSS Classes MASTER course EVER!

Abhis — Thu, 03 Dec 2020 11:19:03 +0000

We've seen how there are mainly 3 types of CSS selectors.

Right?

In this post we all will explore CSS Pusedo class in a very easy way.

These post takes lot of time to type , kindly consider subscribing or to share it with others!

generic where p in CSS targets  HTML elements
classes where .intro in CSS targets HTML elements with a class="intro" attribute
ids where #logo in CSS targets HTML elements with a id="logo" attribute

All of these selectors can have pseudo-classes attached to them. A pseudo-class:

defines a particular state of the element
is a keyword that starts with a colon :

Syntax

A pseudo-class can't exist on its own. It must be attached to a selector. The pseudo-class will only define a particular state of that selector.

The syntax looks like this:

.selector:pseudo-class{ }

There is no space between the selector and the pseudo-class, to signify that they are linked together.

:hover

For example, a common pseudo-class used is :hover, which will apply a CSS style when the targeted element is hovered. Let's test it on links.

a{ color: blue;}
a:hover{ color: red;}

<div class="result" id="result-821">
  <p>Hover <a>this link</a> and see how it turns red.</p>
</div>

The first line defines how all <a> HTML elements should look like (blue).
The second line defines how <a> should look like when hovered (red).

The second line targets the same HTML elements but only when something specific happens (in this case, being hovered).

:visited

This pseudo-class targets links that have been visited. By default, links are blue and turn purple when you've visited them. Google results work like that.

a{ color: dodgerblue;}
a:visited{ color: rebeccapurple;}

<a href="https://www.google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.mozilla.org">Mozilla</a>
<a href="https://marksheet.io/visited.html">MarkSheet</a>



<div class="result" id="result-8211">
  <a href="https://www.google.com">Google</a>
  <a href="https://twitter.com">Twitter</a>
  <a href="https://www.facebook.com">Facebook</a>
  <a href="https://www.mozilla.org">Mozilla</a>
  <a href="/html/visited.html">MarkSheet</a>
</div>

Applying a different for visited links is often overlooked but comes in handy for users browsing a list of results. It easily helps them visualize where they have already been.

:focus

This pseudo-class happens when an HTML element is in focus. This is particularly useful for HTML inputs.

.form-input{ border: 2px solid grey; padding: 5px;}
.form-input:focus{ background: lightyellow; border-color: blue; outline: none;}

<div class="result" id="result-822">
  <input class="form-input" placeholder="First name">
</div>

The outline: none; rule removes the glow from the input.

:first-child and :last-child

These pseudo-classes are related to the HTML hierarchy. They target HTML elements depending on the order in which they appear in the code.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

li:first-child{ background: greenyellow;}
li:last-child{ background: lightsalmon;}

<div class="result" id="result-823">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

As you can see, no CSS class is applied to the first and last <li>. Their position in the hierachy defines whether the CSS rule is applied.

If we were to add a 5th list item, and using the same CSS, the styling would automatically change:

<div class="result" id="result-824">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>

:nth-child

This pseudo-class is a more global version of :first-child and :last-child. With :nth-child, you can calculate which child element you want to target.

For example, if you want to target the second child, you would use :nth-child(2):

li:nth-child(2){ background: violet;}

<div class="result" id="result-825">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

odd and even

While using a number is straightforward, the :nth-child comes with 2 keywords:

:nth-child(odd) will target every odd element
:nth-child(even) will target every even element

li:nth-child(odd){ background: gold;}

<div class="result" id="result-826">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

The n iterator

The most powerful aspect of :nth-child is how it can target elements based upon calculations by using the n keyword.

The n value increments from zero 0 to the number of child elements present.

What if you want to target every third element?

li:nth-child(3n){ background: hotpink;}

<div class="result" id="result-827">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
</div>

In our case, n starts at zero and ends at six.

Computers start counting at zero. And because there are seven elements in our list, we will go up until six, because 0-1-2-3-4-5-6 represents seven items.

You can read :nth-child(3n) as "Target each element whose position is dividable by 3". In our case, it targeted both the 3rd and 6th list items:

3 times 0 is zero
3 times 1 is the 3rd element
3 times 2 is the 6th element

n + 1

What if you want to target the 1st item and every third item after that?

li:nth-child(3n+1){ background: limegreen;}

Here is the html code:

<div class="result" id="result-828">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
</div>

The 3n+1 has two parts:

3n selects every 3rd item
+1 offsets the start by 1

This is how the calculations were processed:

3 times 0 plus 1 is 1
3 times 1 plus 1 is 4
3 times 2 plus 1 is 7

The n iterator is very versatile. It's hard to find the right calculation, so just test it out to find the right selection.

Other pseudo-classes

There are dozens of pseudo-classes available, some of them for very specific states. The most used ones are the ones we've covered.

<style type="text/css">
#result-821 a{ color: blue;}
#result-821 a:hover{ color: red;}
#result-8211 a{ color: dodgerblue;}
#result-8211 a:visited{ color: rebeccapurple;}
#result-822{ padding: 1rem;}
#result-822 input{ border: 2px solid lightgrey; padding: 5px;}
#result-822 input:focus{ background: lightyellow; border-color: blue; outline: none;}
#result-823 li:first-child{ background: greenyellow;}
#result-823 li:last-child{ background: lightsalmon;}
#result-824 li:first-child{ background: greenyellow;}
#result-824 li:last-child{ background: lightsalmon;}
#result-825 li:nth-child(2){ background: violet;}
#result-826 li:nth-child(odd){ background: gold;}
#result-827 li:nth-child(3n){ background: hotpink;}
#result-828 li:nth-child(3n+1){ background: limegreen;}
</style>

Master CSS GRADIENTS - MUST READ!

Abhis — Thu, 03 Dec 2020 11:04:33 +0000

When we talk about gradients in CSS, we talk about gradients of colors.

This is ultimate post to master css gradients easily!

I hope you all will help to share this post with everyone you found anywhere!

There are 2 types of gradients in CSS:

linear: colors go from point to another, in a straight line
radials: colors go from the center of a circle to its edges, in all directions

A gradient is considered a background image and must be used with the according property.

linear-gradient

The syntax for linear gradients is quite complex, but the basic idea is to define:

which colors you want
where these colors must appear along the axis (at the start, middle, end, etc.)
in which direction the gradient must go

Let's start with a simple 2 color gradient:

div{ background-image: linear-gradient(red, blue);}



<div>A simple vertical background gradient</div>

A simple vertical background gradient

By default:

the direction is vertical, from top to bottom
the first color is at the start (top)
the second color is at the end (bottom)

Changing the direction

If the top to bottom direction doesn't suit you, you can alter it by either:

defining the destination of the gradient, with keywords like to left top
defining a specific angle in degrees like 45 deg

This direction must be set before the colors:

div{ background-image: linear-gradient(to bottom right, yellow, purple); width: 200px;}

<div>A diagonal gradient from the top left corner to the bottom right one</div>

A diagonal gradient from the top left corner to the bottom left one

If you want a more specific angle, you can use a value in degrees:

0deg is the default value, from top to bottom
20deg is slightly diagonal, going clockwise
90deg is like 3pm, from right to left
180deg is from bottom to top

div{ background-image: linear-gradient(20deg, green, blue); width: 150px;}

<div>A diagonal gradient with an angle of 20 degrees</div>

A diagonal gradient with an angle of 20 degrees

Adding more colors

You can insert as many colors as you want. They will be equally distributed along the axis:

2 colors: 0% and 100%
3 colors: 0%, 50% and 100%
4 colors: 0%, 33%, 67% and 100%

div{ background-image: linear-gradient(orange, grey, yellow); width: 150px;}

<div>A rather ugly gradient, but you get the idea</div>

A rather ugly gradient, but you get the idea

Setting specific color stops

If you don't want colors to equally distributed, you can set specific color stop positions, using either percentages % or pixels px:

div{ background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px;}

<div>An even uglier gradient, but you get the idea</div>

An even uglier gradient, but you get the idea

In this setup:

orange has no stop position, so it defaults to zero 0%
grey is closer to the top, at 10% instead of 50%
yellow takes half of the gradient, from 50% to the end 100%

radial-gradient

While linear gradients follow a single-line axis, radial gradients spread out in all directions. Their syntax is fairly similar to linear ones, as they both have color stops. But instead of specifying a direction you need to specify:

a shape: either a circle or an ellipse
a starting point: which will be the center of the circle/ellipse
an end point: where the edge of the circle/ellipse will be

div{ background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px;}

<div>This looks like the sun, doesn't it?</div>

This looks like the sun, doesn't it?

By default:

the gradient is an ellipse
the first color starts at the center
the last color ends at the farthest corner

start position

The start position works like background positions. You set it with the at keyword.

div{ background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px;}

<div>A gloomy day.</div>

A gloomy day.

end position

By default, the shape will end at the farthest corner. You can either choose:

closest-side
closest-corner
farthest-side
farthest-corner

The difference is both hard to grasp and to visualize, so I won't go into details. Mozilla has a good description of the different values.

div{ background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
div:hover{ background-image: radial-gradient(farthest-side at 20px 20px, green, blue)}

<div>Hover this green star in the sky to see it expand.</div>

Hover this green star in the sky to see it expand.

fixed size

Instead of setting both start and end positions, you can just set specific dimensions:

div{ background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px;}

<div>A small violet disc in a sea of pink.</div>

A small violet disc in a sea of pink.

CSS gradients are powerful, considering how endless the options are.

The examples of this page are voluntarily "ugly", with pronounced color differences, to better explain what how each property works.

But it's quite easy to write more subtle gradients, especially for buttons:

.button-grey  { background-image: linear-gradient(#f2f2f2, #f2f2f2);}
.button-yellow{ background-image: linear-gradient(#fce374, #fcdf5b);}
.button-orange{ background-image: linear-gradient(#f58a38, #f57c20);}
.button-red   { background-image: linear-gradient(#ed6d64, #ed574c);}
.button-purple{ background-image: linear-gradient(#847bba, #7568ba);}
.button-blue  { background-image: linear-gradient(#42b0e3, #2ba9e3);}
.button-green { background-image: linear-gradient(#97cc76, #8bcc62);}

<div class="result" id="result-832">
  <a class="button-grey">Button</a>
  <a class="button-yellow">Button</a>
  <a class="button-orange">Button</a>
  <a class="button-red">Button</a>
  <a class="button-purple">Button</a>
  <a class="button-blue">Button</a>
  <a class="button-green">Button</a>
</div>


<style type="text/css">
#result-831{ padding: 1rem;}
#result-831 div{ background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
#result-831 div:hover{ background-image: radial-gradient(farthest-side at 20px 20px, green, blue)}
#result-832{ padding: 1rem;}
#result-832 a{ background-image: linear-gradient(lightblue, skyblue); border: 1px solid #eee; border-radius: 3px; color: grey; display: inline-block; line-height: 32px; padding: 0 15px; text-decoration: none; transition: none; vertical-align: top;}
#result-832 .button-grey {
  background-color: #f2f2f2;
  background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
  border: 1px solid #bfbfbf;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #8c8c8c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#result-832 .button-grey:hover, #result-832 .button-grey:focus {
  background: #f2f2f2;
  border-color: #8c8c8c;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
#result-832 .button-grey:active {
  background: #f2f2f2;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-blue {
  background-color: #42b0e3;
  background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);
  border: 1px solid #107db0;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-blue:hover, #result-832 .button-blue:focus {
  background: #2ba9e3;
  border-color: #004c6f;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3;
}
#result-832 .button-blue:active {
  background: #2ba9e3;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-green {
  background-color: #97cc76;
  background-image: linear-gradient(to bottom, #97cc76, #8bcc62);
  border: 1px solid #5f993a;
  box-shadow: inset 0 1px 0 #c6e5b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-green:hover, #result-832 .button-green:focus {
  background: #8bcc62;
  border-color: #326612;
  box-shadow: inset 0 1px 0 #c6e5b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b;
}
#result-832 .button-green:active {
  background: #8bcc62;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-purple {
  background-color: #847bba;
  background-image: linear-gradient(to bottom, #847bba, #7568ba);
  border: 1px solid #493e87;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-purple:hover, #result-832 .button-purple:focus {
  background: #7568ba;
  border-color: #1f1654;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba;
}
#result-832 .button-purple:active {
  background: #7568ba;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-orange {
  background-color: #f58a38;
  background-image: linear-gradient(to bottom, #f58a38, #f57c20);
  border: 1px solid #c25706;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-orange:hover, #result-832 .button-orange:focus {
  background: #f57c20;
  border-color: #773300;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851;
}
#result-832 .button-orange:active {
  background: #f57c20;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-red {
  background-color: #ed6d64;
  background-image: linear-gradient(to bottom, #ed6d64, #ed574c);
  border: 1px solid #ba3329;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#result-832 .button-red:hover, #result-832 .button-red:focus {
  background: #ed574c;
  border-color: #870c03;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b;
}
#result-832 .button-red:active {
  background: #ed574c;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

#result-832 .button-yellow {
  background-color: #fce374;
  background-image: linear-gradient(to bottom, #fce374, #fcdf5b);
  border: 1px solid #c9ae34;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #967d09;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#result-832 .button-yellow:hover, #result-832 .button-yellow:focus {
  background: #fcdf5b;
  border-color: #967d09;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d;
}
#result-832 .button-yellow:active {
  background: #fcdf5b;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
</style>

Master web designing in just 10 minutes! - part 1

Abhis — Tue, 01 Dec 2020 03:24:08 +0000

Let's learn web desinging in just 5 minutes in this part 1 of our series.

Step by step we will explore the web designing core concepts.

Content

Content is the king, bet me it is.

The purpose of design is to enhance the presentation of the content it's applied to. It might sound obvious, but content being the primary element of a website, it should not be established as an afterthought.

Written content, like the paragraph you're currently reading, makes up for more than 90% of the Web. Styling this textual content will go a long way.

Let's assume you've already finalised the content you want to publish and just created an empty style.css file, what is the first rule you can write?

This series has been devided into 2 parts , this is part 1 of the series.

Centering

Long lines of text can be hard to parse, and thus hard to read. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.

body {
  margin: 0 auto;
  max-width: 50em;
}
After styling the text blocks, what about styling the text itself?

The best of JavaScript, HTML and CSS

JavaScript Cheat Seet contains useful code examples on a single page.

Font family
The browser's font defaults to "Times", which can look unappealing (mostly because it is the "unstyled" font). Switching to a sans-serif font like "Helvetica" or "Arial" can vastly improve the look of your page.

body {
  font-family: "Helvetica", "Arial", sans-serif;
}

If you want to stick with a serif font, try "Georgia".

While this makes the text more appealing, let's also make it more readable.

Spacing
When a page looks "broken" to a user, it's usually a spacing issue. Providing space both around and within your content can increase the appeal of your page.

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

While the layout has greatly improved so far, let's apply more subtle changes.

Color & contrast

Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read.

body {
  color: #555;
}
And in order to keep a decent level of contrast, let's pick a darker shade for important words

h1,
h2,
strong {
  color: #333;
}

While most of the page has been improved visually, some elements (like the code snippets) still seem out of place.

The next part will be released soon!

CSS Selector in just 10 minutes!

Abhis — Tue, 01 Dec 2020 03:08:29 +0000

Welcome again!

We are goid to explore CSS SELECTORS in just 10 minutes.

Because we don't want to style all our HTML elements at once, we need to be able to target a subset of these HTML elements.

CSS selectors define which elements we want our styling to be applied to.

Generic tag selectors

Targeting generic HTML tags is easy: just use the tag name.

a{ /* Links */ }
p{ /* Paragraphs */ }
ul{ /* Unordered lists */ }
li{ /* List items */ }

There's a direct connection between the name of the HTML tag and the CSS selector used.

Classes

Considering we probably don't want to style all paragraphs or all titles identically, we need to differentiate them.

Of all HTML attributes, the class attribute is the most important for CSS. It allows us to define a group of HTML elements that we can target specifically. Just put a dot . in front of the class name you want to use:

.date {
  color: red;
}

On one side, there is the HTML class attribute with the value date. It must match the name of the CSS class.

You can use any name for your CSS class, as long as it doesn't start with a number.

The .date class selector will target all HTML elements that have the class="date" attribute. So, the following HTML elements will all be styled:

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

Saturday Feb 21

The event will be on Saturday.

Bear in mind that the tag name is irrelevant. Only the class HTML attribute is.

IDs

You can also use the id attribute in your HTML, and target it with a hash # in your CSS:

#tagline{ color: orange;}

<h1 id="tagline">This heading will be orange.</h1>

ID are similar to Classes, as they rely upon an HTML attribute.

Example

HTML	Possible CSS selectors	What it means
`<p></p>`	`p`	`Every <p>`
`<div class="global"></div>`	`div` `.global` `div.global`	Every `<div>` Every elements with `class=”global”` Every `<div>` with `class=”global”`
`<ul id="menu">`	`#menu` `ul#menu`	The only element with `id=”menu”` The only `<ul>` with `id=”menu”`
`<ol class="dico"> <li>Un cobaye</li> <li>Des cobaux</li> </ol>`	`li` `ol li` `.dico li`	Every `<li>` Every `<li>` with an `<ol>` as ancestor Every `<li>` with a `class="dico"` element as ancestor

Combining selectors

Let's reuse our previous example where we want our dates to be red:

.date {
  color: red;
}

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

Saturday Feb 21

The event will be on Saturday.

What if we want our dates that are in em elements to blue instead? We can add the following CSS rule:

em.date {
  color: blue;
}

The em.date combines:

a tag selector em
a class selector .date

It will only apply to  HTML elements. It won't affect other .date or em.

Hierarchy selectors

A space in a selector defines a ancestor/descendant relationship. Let's say we want the links in our header to be in red:

header a {
  color: red;
}

This can be read from right to left as: "Select all a elements that are within a header element". This will prevent all other links (that aren't in the header) from being affected.

Pseudo-class selectors

HTML elements can have different states. The most common case is when you hover over a link. It's possible in CSS to apply a different style when such an event occurs.

Pseudo-class selectors are attached to usual selectors and start with a colon ::

a {
  color: blue;
}

a:hover {
  color: red;
}

HTML syntax MASTER post!

Abhis — Tue, 01 Dec 2020 03:06:42 +0000

This post is for absolute beginners , you will master html syntax in just 10 minutes.

Stand for:

HyperText means that it uses the HTTP part of the Internet.
Markup means the code you write is annotated with keywords.
Language means it can be read by both a human and a computer.

Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.

Here is a sample paragraph in HTML:

<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>

What you see in angle brackets <html> are HTML tags. They define where something.

Each of them carry a specific meaning.

In this case, p stands for paragraph.

They usually go in pairs:

the opening tag  defines the start of the paragraph
the closing tag  defines its end

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags  and .

If you , you'll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you've written.

Learn to write html.

You've probably come across simple text files, those that have a .txt extension.

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

Open your text editor, and copy paste the following:

<p>This is my firstwebpage!</p>

Save this file as my-first-webpage.html and just open it with your browser, and you'll see:

This is my firstwebpage!

Remember:

use a text editor like Notepad++ to create HTML documents
use a browser like Firefox to open HTML documents

Attributes

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

<a href="https://www.mozilla.com/firefox">Download Firefox</a>

Download Firefox

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

You'll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

<img src="#" alt="Description of the image">

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

How to write comments ?

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

A comment starts with .

<!-- This sentence will be ignored by the browser -->
<p>Hello World!</p>

Hello World!

Self-enclosing elements

Some HTML elements only have an opening tag:

<br> <!-- line-break -->
<img src="https://placehold.it/50x50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->

Because they don't have a closing tag and consequently can't contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

Read more in my next post , till then share it with others.

CSS Transform in just 15 minutes!

Abhis — Tue, 01 Dec 2020 03:01:21 +0000

In this tutorial we are going to learn hoW to css transform an element In deep , so sit back and go througH the content.

If you haven't read my previous articles , i must say go & read them by yourself!

CSS transforms are a collection of functions that allow to shape elements in particular ways:

translate: moves the element along up to 3 axis (x,y and z)
rotate: moves the element around a central point
scale: resizes the element
skew: distorts the element

transform properties

There are 3 CSS transform properties available:

transform defines which transform function to use (translate, rotate, scale...)
transform-origin allows to modify the origin point of a transformation
transform-style is for 3d settings

Note that unlike background and border, transform is not a shorthand property.

We'll only use transform here.

Doesn't break the Flow

To prevent unexpected behavior, transformed elements do not affect the Flow. Whether rotated, scaled or translated, they won't affect other elements.

translate

The translate() function allows to move an element across the plane (on the x and y axis). It accepts either:

1 parameter: moves the element along the x axis
2 parameters: first value is for the x axis, second for the y one

It's like using relative positioning with left and top values.

Let's redo our circuit animation using translation instead of left/top positioning:

@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(240px, 0);}
  50% { transform: translate(240px, 140px);}
  75% { transform: translate(0, 140px);}
  100%{ transform: translate(0, 0);}
}
p{ animation: translating 4s linear infinite;}

<div class="result" id="translate-animation">
  <p>Hello</p>
</div>


<style type="text/css">
#translate-animation{ height: 200px; padding: 0; width: 300px;}
#translate-animation p{ animation: translating 4s linear 0s infinite; background: turquoise; color: white; height: 60px; line-height: 60px; margin: 0; position: absolute; text-align: center; width: 60px;}

@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(240px, 0);}
  50% { transform: translate(240px, 140px);}
  75% { transform: translate(0, 140px);}
  100%{ transform: translate(0, 0);}
}
</style>

Remember: transform is the CSS property, translate() is the CSS value attached to that property (and also happens to be a function).

You can use translateX() and translateY() to only move your element along the x and y axis respectively.

rotate

The rotate() function allows to make an element revolve around a fixed point. By default, it revolves around the element's center. Think of it as vinyl being played on a turntable.

rotate() accepts only 1 parameter, which is an angle value defined in degrees deg, gradians grad, radians rad or turns turn (with 1 turn being equivalent to a full circle).

@keyframes rotating {
  0%  { transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
p{ animation: rotating 4s linear infinite;}

lET'S LEARN IN BRIEF!

<div class="result" id="rotate-animation">
  <p>Vinyl</p>
</div>

<style type="text/css">
#rotate-animation{ padding: 2rem;}
#rotate-animation p{ animation: rotating 4s linear 0s infinite; background: slateblue; border-radius: 60px; color: white; height: 120px; line-height: 120px; margin: 0; text-align: center; width: 120px;}

@keyframes rotating {
  0%  { transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
</style>

scale

The scale() function allows to resize an element. It can either expand or shrink it. The function accepts either:

1 parameter: the element is resized uniformily in height and width
2 parameters: the first value resizes the element horizontally, the second one vertically

The range of possible value is:

1: the element retains its original size
2: the element doubles in size
0.5: the element is half of its size
0: the element basically disappears (as its height and width are equal to zero)
-1: the element is mirrored

@keyframes scaling {
  0%  { transform: scale(1);}
  20%{ transform: scale(2);}
  40%{ transform: scale(0.5);}
  60%{ transform: scale(0);}
  80%{ transform: scale(-1);}
  100%{ transform: scale(1);}
}
p{ animation: scaling 10s steps(1) 0s infinite;}

<div class="result" id="scale-animation">
  <p><strong>scale(1)</strong>: normal size</p>
  <p><strong>scale(2)</strong>: double size</p>
  <p><strong>scale(0.5)</strong>: half size</p>
  <p><strong>scale(0)</strong>: zero size (invisible)</p>
  <p><strong>scale(-1)</strong>: mirrored</p>
  <div>Scaling</div>
</div>

<style type="text/css">
#scale-animation{ padding: 2rem;}
#scale-animation p{ animation: scaling-toggle 10s steps(1) 0s infinite forwards; background: white; color: grey; left: 2rem; margin: 0; opacity: 0; padding: 0 0.5em; position: absolute; top: 2rem; z-index: 1;}
#scale-animation p:first-child{ left: 0; position: relative; top: 0;}
#scale-animation p:nth-child(2){ animation-delay: 2s;}
#scale-animation p:nth-child(3){ animation-delay: 4s;}
#scale-animation p:nth-child(4){ animation-delay: 6s;}
#scale-animation p:nth-child(5){ animation-delay: 8s;}
#scale-animation p strong{ content: ""; display: inline-block;}
#scale-animation div{ animation: scaling 10s linear 0s infinite; background: goldenrod; border-radius: 60px; color: white; height: 120px; line-height: 120px; margin-top: 2rem;; text-align: center; transition: all 100ms linear; width: 120px;}

@keyframes scaling {
  0%  { transform: scale(1);}
  19% { transform: scale(1);}
  20% { transform: scale(2);}
  39% { transform: scale(2);}
  40% { transform: scale(0.5);}
  59% { transform: scale(0.5);}
  60% { transform: scale(0);}
  79% { transform: scale(0);}
  80% { transform: scale(-1);}
  99% { transform: scale(-1);}
  100%{ transform: scale(1);}
}

@keyframes scaling-toggle {
  0%  { opacity: 1;}
  20% { opacity: 0;}
  100%{ opacity: 0;}
}

Like translate(), the scale() function has x and y versions: scaleX() and scaleY() to resize horizontally and vertically respectively.

skew

The skew() function allows to distort an element, by dragging its sides along a line basically.

This transform function is rarely used, as its effects are quite unpredictable, and its results not necessarily appealing. Nevertheless, let's see how it works.

Like scale(), the skew() functions accepts either:

1 parameter: the element is distorted horizontally
2 parameters: the first value distorts the element horizontally, the second one vertically

And like rotate(), skew() only accepts angle values like degrees deg.

@keyframes skewing {
  0%  { transform: skew(0deg);}
  20% { transform: skew(10deg);}
  40% { transform: skew(45deg);}
  60% { transform: skew(90deg);}
  80% { transform: skew(120deg);}
  100%{ transform: skew(0deg);}
}
p{ animation: skewing 10s steps(1) 0s infinite;}

<div class="result" id="skew-animation">
  <p><strong>skew(0deg)</strong>: no distortion</p>
  <p><strong>skew(10deg)</strong>: subtle horizontal distortion</p>
  <p><strong>skew(45deg)</strong>: quarter distortion</p>
  <p><strong>skew(90deg)</strong>: half distortion (invisible)</p>
  <p><strong>skew(120deg)</strong>: same as -60deg</p>
  <div>Skewing</div>
</div>

<style type="text/css">
#skew-animation{ padding: 2rem;}
#skew-animation p{ animation: scaling-toggle 10s steps(1) 0s infinite forwards; background: white; color: grey; left: 2rem; margin: 0; opacity: 0; padding: 0 0.5em; position: absolute; top: 2rem; z-index: 1;}
#skew-animation p:first-child{ left: 0; position: relative; top: 0;}
#skew-animation p:nth-child(2){ animation-delay: 2s;}
#skew-animation p:nth-child(3){ animation-delay: 4s;}
#skew-animation p:nth-child(4){ animation-delay: 6s;}
#skew-animation p:nth-child(5){ animation-delay: 8s;}
#skew-animation div{ animation: skewing 10s linear infinite; background: tomato; color: white; height: 60px; line-height: 60px; margin-top: 2rem;; text-align: center; transition: all 100ms linear; width: 120px;}

@keyframes skewing {
  0%  { transform: skew(0deg);}
  19% { transform: skew(0deg);}
  20% { transform: skew(10deg);}
  39% { transform: skew(10deg);}
  40% { transform: skew(45deg);}
  59% { transform: skew(45deg);}
  60% { transform: skew(90deg);}
  79% { transform: skew(90deg);}
  80% { transform: skew(120deg);}
  99% { transform: skew(120deg);}
  100%{ transform: skew(180deg);}
}

@keyframes skewing-toggle {
  0%  { opacity: 1;}
  20% { opacity: 0;}
  100%{ opacity: 0;}
}
</style>

3d functions

We've seen how transform functions operate on a plane, along the x and y axis.

For example:

translate() with up to 2 parameters:
- translate(x)
- translate(x,y)
translateX() as x only
translateY() as y only

But all these functions also have a 3d version.

For example, translate() has a translate3d() version that performs transformation along 3 dimensions, which means it includes the z axis as well (and as such, a standalone translateZ() function exists as well).

The z parameter basically make the element move closer and further, whether we increase or decrease its value. It's like zooming in and out.

@keyframes zooming {
  0%  { transform: translate3d(0, 0, 0);}
  100%{ transform: translate3d(0, 0, 200px);}
}
p{ animation: zooming 5s alternate;}

<div class="result" id="zoom-animation">
  <div>Original</div>
  <p>Transformed</p>
</div>

<style type="text/css">
#zoom-animation{ padding: 2rem; perspective: 500;}
#zoom-animation div,
#zoom-animation p{ background: midnightblue; color: white; height: 200px; line-height: 200px; margin: 0; position: relative; text-align: center; width: 200px;}
#zoom-animation p{ animation: zooming 5s alternate infinite both; background: limegreen; left: 2rem; opacity: 0.7; position: absolute; top: 2rem;}

@keyframes zooming {
  0%  { transform: translate3d(0, 0, 0);}
  100%{ transform: translate3d(0, 0, 200px);}
}
</style>

The green block rise 200px "upwards", as if coming closer to us, along the z axis.

perspective: 500; needs to be applied to the parent element in order for the 3d space to become active. Alternatively, transform: perspective(500px); can be used as well.

Hope , this article helps you.

DEV Community: Abhis

How i learned html layers in less than 24 hours!

Fluidity

Ordering

Stacking

Breaking the flow

Ultimate CSS Classes MASTER course EVER!

Syntax

:hover

:visited

:focus

:first-child and :last-child

:nth-child

odd and even

The n iterator

n + 1

Other pseudo-classes

READ NEXT:

Master CSS GRADIENTS - MUST READ!

There are 2 types of gradients in CSS:

linear-gradient

Changing the direction

Adding more colors

Setting specific color stops

radial-gradient

By default:

start position

end position

fixed size

Master web designing in just 10 minutes! - part 1

Content

Centering

Color & contrast

CSS Selector in just 10 minutes!

Generic tag selectors

Classes

IDs

Example

Combining selectors

Hierarchy selectors

Pseudo-class selectors

HTML syntax MASTER post!

Stand for:

Learn to write html.

Attributes

How to write comments ?

Self-enclosing elements

CSS Transform in just 15 minutes!

transform properties

Doesn't break the Flow

translate

rotate

lET'S LEARN IN BRIEF!

scale

skew

3d functions

READ NEXT: