CSS : display / opacity / font / character / background

display

In CSS, the display property is used to control how an element is rendered and displayed in the web page layout. It determines the type of box used for an element and how it interacts with other elements.

The display property accepts various values, each affecting the layout and behavior of the element. Here are some commonly used values:

In CSS, the display property is used to control how an element is rendered and displayed in the web page layout. It determines the type of box used for an element and how it interacts with other elements.

The display property accepts various values, each affecting the layout and behavior of the element. Here are some commonly used values:

1. block: This value makes the element behave like a block-level element. It takes up the entire width of its parent container and starts on a new line. Block-level elements, such as <div>, <p>, and <h1> to <h6>, stack vertically by default.
2. inline: This value makes the element behave like an inline-level element. It doesn't start on a new line and only takes up the necessary width and height to fit its content. Inline-level elements, such as <span>, <a>, and <strong>, flow within a line of text.
3. inline-block: This value combines aspects of both block and inline. The element behaves like an inline-level element, allowing other elements to flow alongside it, while also respecting the width and height properties like a block-level element.
4. none: This value hides the element completely from the layout. The element is not rendered, and its space is not occupied. This is often used to hide elements dynamically using JavaScript or CSS animations.
5. flex: This value enables the flexible box layout model, known as Flexbox. It allows you to create flexible and responsive layouts by distributing space among child elements. Flexbox is commonly used for building navigation menus, grids, and flexible containers.
6. grid: This value enables the CSS Grid Layout, known as Grid. It provides a powerful grid-based layout system, allowing you to define rows and columns and position elements within the grid. Grid is ideal for complex, multi-dimensional layouts.

It's important to note that not all elements support all display values. Some elements have a default display value based on their semantics, and changing their display value may lead to unexpected behavior or rendering issues. For example, changing the display value of a <ul> element to inline may cause the list items (<li>) to lose their bullet points.

The display property is a fundamental CSS property that allows you to control the layout and behavior of elements. By choosing the appropriate display value, you can create the desired structure and appearance for your web page.

 

opacity

element transparency

- 1 : opaque (default)
- 0 : transparent

 

font-style

font-style

- normal
- italic: tilted

font-weight

- normal, 400
- bold, 700
- 100 to 900

line-height : the height of one line

font-height : “font1”, “font2”, “font3” …

 

message

color : color of text
text-align: Alignment of text
text-decoration: text decoration
- none
-underline
- line-through: center line
- text-indent

 

background

The background property is shorthand that combines several individual background-related properties into a single declaration. Here is the syntax for the background property:

background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position>;

1. background-color: Specifies the background color of an element. You can use named colors (red, blue, etc.), hexadecimal values (#FF0000, #00F), RGB values (rgb(255, 0, 0)), or HSL values (hsl(0, 100%, 50%)).
2. background-image: Sets an image as the background of an element. You can provide the path to the image file using the url() function, like url("path/to/image.jpg"). Multiple images can be used, separated by commas, with the browser selecting the first one it can display.
3. background-repeat: Specifies how the background image should repeat. Values include repeat (default, repeats both horizontally and vertically), repeat-x (repeats horizontally), repeat-y (repeats vertically), and no-repeat (does not repeat).
4. background-attachment: Determines whether the background image scrolls with the content or remains fixed as the user scrolls the page. Values include scroll (default, scrolls with content) and fixed (remains fixed).
5. background-position: Specifies the initial position of the background image. You can use keywords like top, bottom, left, right, and center, or specify the position using length values (px, em, %) or a combination of keywords and length values.
6. background-size: The background-size property accepts various values, which specify how the background image should be sized. Here are some commonly used values:

div {
  background: #f1f1f1 url("path/to/image.jpg") no-repeat top left;
}

In this example, the div element has a background color of #f1f1f1, an image as the background (url("path/to/image.jpg")), set to not repeat (no-repeat), and positioned at the top left corner of the element.

You can also use individual background-related properties like background-color, background-image, background-repeat, background-attachment, and background-position separately if you need more control over each aspect of the background.

 

 

backgound-size 

1. auto (default): This value preserves the original dimensions of the background image and does not resize it. The image is displayed at its intrinsic size.
2. cover: This value scales the background image proportionally to cover the entire background area while maintaining its aspect ratio. It may result in cropping or parts of the image being hidden to ensure coverage.
3. contain: This value scales the background image proportionally to fit within the background area entirely, while maintaining its aspect ratio. It ensures that the entire image is visible, but may result in empty space within the background area.
4. <length>: You can specify a specific length value (e.g., px, em, %) to set the width or height of the background image explicitly. For example, background-size: 200px 150px; sets the width to 200 pixels and the height to 150 pixels.
5. <percentage>: You can use a percentage value to scale the background image based on the percentage of the background area. For example, background-size: 50% 75%; scales the image to half the width and three-quarters of the height of the background area.

div {
  background-image: url("path/to/image.jpg");
  background-size: cover;
}