CSS Design Elements

Images

Helps make pages interactive. It is an inline element. It is often used inside a block-level element.

<img src=”products/sneakers.jpg” alt=”White sneakers on the platform”>

Formats

• JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
• SVG (Scalable Vector Graphics)
• ICO (Windows icon)
• GIF (Graphics Interchange Format)

CSS Selectors

A selector points to an element or group of elements to which styles will be applied.

CSS id Selector

CSS id Selector is used if you need to work with a specific element when there are many similar elements. Here big is the value of the id the attribute of the HTML tag you need.

#big {
  font-size: 30px;
}

CSS class Selector

CSS class Selector is useful when you need to give a lot of different elements the same look. Here blue is the value of the class attribute of the desired HTML tag.

.blue {
   background-color: blue;
}

Border

Setting the borders can be useful as a decoration, or more practical functions such as highlighting interactive elements on a web page.

border-style

• double
• dotted,
• dashed,
• solid,
• groove,
• ridge
• inset
• outset

border-color

If not specified, border-color is the text color of the element.

p {
 border-style: solid; /* it sets a border */
 border-color: brown; /* it sets the color of the border */
}

border-width

Can be defined with any length unit in CSS, eg border-width: 4px;

Border Property

All the above attributes can be combined as one border property

border: 2px solid grey;

It is also possible to set a border for one side of the element only

• border-top ,
• border-right,
• border-bottom,
• border-left

Background

The Background property in CSS is used for setting a background image/color to the element. It has several other attributes to beautify the web page as needed.

background-color

• color name,
• HEX or rgb(),
• default value (initial ),
• inherited value (inherit )

background-image

• absolute path to the image url('https://...)' ,
• relative path in the folder url('assets/image.jpg');,
• gradient linear-gradient(red,yellow);

By default, the image is placed to the top-left corner of the viewport and displayed in natural size

background-repeat

• repeat repeated as many times as needed to fill the viewport
• no-repeat image not to be repeated
• repeat-x | repeat-y repeated on the axis as needed to fill the viewport

background-attachment

• scroll for the image to be scrolled with the contents
• fixed for the image to stay in place

background-position

It sets background positioning from the default position (top-left corner) to any other position you want.

• top | left | bottom | right | <value>% values set the gap between one side of the viewport and the image
• center value makes the image centered on both the x and y-axis.

The property works with two set values, horizontal margins, and vertical margins. If there’s only one value defined, the second one is set to center.

background-size

• <value>% scales the image proportionally and makes it bigger/smaller than its actual size by the indicated value percents of parental block size.
  background-size: 50%;
• contain scales the image proportionally so its height or width matches the height or width of the viewport and it is not cropped
  background-size: contain;
• cover scales the image proportionally so its height or width matches the height or width of the viewport to fill the viewport

background-clip

It determines the background display area. The values are:

• border-box for the background to include the border
• padding-box for the background to include the padding but not the border
• content-box for the background to be displayed only behind the content

background the property allows you to combine all the properties from above in just one line of CSS making your code look a bit more beautiful. If one is missing, the default value will be used instead.

div {
 background: url(“assets/images/logo.png”) no-repeat contain;
}

I hope this was enjoyable light reading… Until tomorrow 👋