For expressing length, CSS provides a variety of units. Some, like point (pt) and pica (pc), have a typographic past, while others, like centimeter (cm) and inch (in), have a common usage background (in). There's also a "magic" unit called the px that was created especially for CSS. However, using em for font sizes is far better. Since 2013, CSS has had a new unit: the rem, which makes writing style rules that simply depend on the default font size considerably easier. The rem (short for "root em") is the font size of the document's root element. Unlike the em, which can vary depending on the element, the rem remains consistent throughout the document. Other new units allow for the specification of sizes in relation to the reader's window. The vw and vh are these.
Selectors
CSS selectors are used to choose the HTML elements to style.
p{}
The element selector uses the element name to pick HTML elements.
#id{}
The id selector uses an HTML element's id attribute to choose a specific element. Because each element's id is unique within a page, the id selector is used to pick just one.
.class{}
The class selector is used to find HTML components that have a specified class property. Write a period (.) character followed by the class name to select components with that class.
*{}
All HTML components on the page are selected using the universal selector (*).
h1, p, a{}
The grouping selection picks all HTML elements that have the same style definitions as one another. The style definitions for the h1, p and a elements are the same.
Properties and their values
{
color: red;
background-color: #00ff00;
}
You can use the color name, RGB, HEX, HSL, RGBA, HSLA color values in CSS to define colors. These color values are used with many HTML elements to set the foreground, such as the text color or the background-color of any particular element.
The letter-spacing property can be used to increase or decrease the amount of space between letters in a word while the word-spacing attribute adds or removes space between distinct words in your sentence.
Text can be underlined, overlined, or strikethrough with the text-decoration property.
You can use the text-shadow property to apply a text-shadow to your text. Text can be capitalized or converted to uppercase or lowercase letters using the text-transform property.
Indent the text of your paragraph with the text-indent property.
Text can be aligned in your document using the text-align property.
You can use the white-space property to control the flow of your text as well as to format it.
The box model is a simple fact that every html element is a box. That box has padding which is the space around the content of the element, a border with some what a style, width and color and margin which is space around the border.
{
width: 100%;
height: 250px;
}
The height and width attributes are used to specify an element’s height and width. Padding, borders and margins are not included in the height and width values.
{
display: flex;
}
The display attribute defines whether or not an element is displayed. Depending on the kind of element, each HTML element has a default display value. Most elements have a default display value of block or inline. Other display options include none, grid and many others.
Other CSS properties include animate, transition, translate and so on. The links below will provide you with additional information.
