CSS Color and Border Properties Quiz

The border-style property in CSS defines the appearance of an element's border. It determines the type of line used to draw the border, such as dotted, dashed, solid, double, groove, ridge, inset, outset, none, or hidden.

A dotted border displays as a series of dots along the edge of an element. The dots are spaced equally apart and create a visually light border effect.

A dashed border creates a series of dashes along the element's edge. The dashes are longer than dots and create a more pronounced border than a dotted border.

A solid border displays as a continuous, unbroken line along the element's edge.

A double border creates two parallel lines along the element's edge. It gives a heavier border effect and can be used to highlight important sections of a page.

A groove border creates a 3D effect that appears recessed or sunken inwards. The appearance is influenced by the border-color property.

A ridge border creates a 3D effect that appears raised or protruding outwards. The border's appearance is influenced by the border-color property.

An inset border creates a 3D effect that makes the border appear to be recessed or sunken into the element. The appearance is influenced by the border-color property.

In HTML, a color can be specified using a predefined color name like "Tomato", "Orange", "DodgerBlue", etc.

The style attribute is used to define the style of an HTML element. The attribute is used with the "style" CSS property which specifies the style of the HTML tag. It is used to change the style of an HTML element like color, font size, etc.

The background color of a particular element can be changed using background-color property in the style attribute. This change applies the color to the inside of the tag or element.

The color of the text can be changed using the color property in the style attribute. It defines the color of the text present inside the tag

The color of the border of a particular tag or element can be changed using the border property in the style attribute. This change applies the color to the outside of the tag or element.

RGB color values are made up of 3 numbers from 0-255, representing the intensity of red, green, and blue components. rgb(255, 0, 0) is red (max red, no green or blue).

HEX colors are represented as # followed by 6 hex digits (0-9, a-f) - each pair representing red, green, blue. #ff0000 is red (max red, no green or blue).

You can apply CSS styles directly to an HTML element using the style attribute. This attribute is used with the style property which specifies the style of the HTML tag. The style attribute is a way to apply styles directly to an HTML element without using external stylesheets.

The CSS border-radius property adds rounded corners to elements. Use it to soften hard edges and create visually appealing shapes.

The CSS margin property adds space outside an element’s border, creating visual separation between elements.

The CSS margin-top property sets the top margin of an element.

The CSS margin property can be used as a shorthand for setting all four margins in one line of code. The values are applied in the order: top, right, bottom, left.

The CSS padding property adds space inside an element’s border, creating visual padding around the content.

The CSS padding-right property sets the right padding of an element.

The CSS padding property can be used as a shorthand for setting all four paddings in one line of code. The values are applied in the order: top, right, bottom, left.

The CSS display property controls the layout of elements. It determines how an element is rendered on the page and the space it occupies.

A type of HTML element that always starts on a new line and takes up the full width of its container.

A type of HTML element that does not start on a new line and takes up only the necessary width for its content.

A CSS property used to hide HTML elements without deleting them. It effectively removes them from the rendered page.

The CSS property that sets the fixed width of an element.

The CSS property that sets the maximum width of an element. The element will not exceed this width, even if the content requires more space.

A CSS property used to center an element within its container using equal margins on both sides.

A situation where the browser adds a horizontal scrollbar to the page because the content exceeds the browser window width.

The process of using HTML elements, CSS styling, and JavaScript to create visually appealing and interactive web pages.

Specifies whether to clip the content or add scrollbars when the content of an element is too big to fit in the specified area.

The overflow is not clipped and the content renders outside the element's box.

The overflow is clipped and the rest of the content is invisible.

The overflow is clipped and scrollbars are added to view the rest of the content.

Similar to scroll, but it adds scrollbars only when necessary.

Controls the horizontal overflow of the content - the behavior of content at the left and right edges of the element.

Controls the vertical overflow of the content - the behavior of content at the top and bottom edges of the element.

Used for positioning and formatting content, like floating an image beside text in a container.

The float property specifies how an element should float. The element can be placed side by side with other elements.

The inherit keyword allows the element to inherit the float value of its parent.

The :hover selector is used to style an element when a user hovers the mouse over it.

A dropdown box is a menu that appears when a user hovers over a particular element. This allows for expansion of content or options.

The display: none style hides an element from view. The display: block style displays an element on the page.

CSS transitions allow you to smoothly change the values of CSS properties over a specified time duration. This creates dynamic visual effects.

CSS Animations lets you create movement and visual effects for HTML elements without relying on JavaScript or Flash.

Keyframes define the styles an element will have at certain times during an animation. They act like milestones along the animation path.