DEV Community

Cover image for Day 83/100 Visual Rules
Rio Cantre
Rio Cantre

Posted on • Originally published at dev.to

Day 83/100 Visual Rules

Specific rules need to be considered to achieve the appropriate style of the HTML structure and emphasis the value of each practice as an essential detail.

banner

The Concept

  • The font-family property defines the typeface of an element.
  • font-size controls the size of text displayed.
  • font-weight defines how thin or thick text is displayed.
  • The text-align property places text in the left, right, or center of its parent container.
  • Text can have two different color attributes: color and background-color. color defines the color of the text, while background-color defines the color behind the text.
  • CSS can make an element transparent with the opacity property.
  • CSS can also set the background of an element to an image with the background-image property.
  • The !important flag will override any style, however it should almost never be used, as it is extremely difficult to override.

Code Snippets

.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}
Enter fullscreen mode Exit fullscreen mode

a11y myths

Making a website accessible is costly and time-consuming

It may not be the case if accessibility is considered from the beginning of the project and a development team has proper skills. When accessibility has become a habit, the development time doesn't change or changes a little.

Resource

Discussion (0)