Web Development

Bootcamp Notes – Day 9 (Wed) – CSS Properties & Useful Concepts

 

CSS Properties & Useful Concepts

CSS Color Values

CSS supports multiple ways of setting color values. All modern browsers support a set of 140 standard color names such as: black, white to more specific names. Just check this list out! Another way to set color values is through hex (hexadecimal) color codes – RGB encoding using letters A-F and number 0-9. Hex color codes are always prefaced with #.
Example: #000000 is black, #ffffff is white
How do you find a color to use? Search online for “css color picker” or use VS Code’s or use Photoshop or Gimp!
The <span> ELEMENT
The <span> ELEMENT is a non-semantic HTML element with no default meaning or style. Use as a hook for a class or ID without any unwanted side effects. Look at this example. See how we changed the text red using <span>. Note using a <div>tag instead would break the line, causing colored red to move down a line.

 

CSS Box Model
The CSS Box Model is an important concept for design and layout. For every HTML element, you can think of a set of nested boxes. The innermost box is the content of the element. That could be text, or image or something else. The next box around is called padding. The next box around is called the border. And the last box is called the margin. Using CSS you can control various padding, border, margin values! Look at the diagram below.

 

MARGIN and Shorthand Property
Example 1:
Example 2:
Example 3:

 

Example 4: This will horizontally center the element.

 

Padding and Shorthand Property
It works very much the same way as margin!
Example 1:

 

eBay Electronics: Best tech for way less - Up to 50% off and free shipping
Example 2:

 

BORDER
  • border-style property is required; allowed values include: solid, dotted, dashed, double and more.
  • border-style value is required, the other two are optional: border: solid; will work, border: 5px; will not
  • The order of values does not matter: blue 5px solid is same as 5px solid blue.

 

Background
These are some common background properties:

 

Background Shorthand Property
The order of values generally does not matter. If using both position and size values in the shorthand, then they must be joined with a slash, with position first: center/100px

 

Using Fonts
When using FONT, font-family should contain multiple fonts, comma separated & in order of preference, in case preferred font is not available. Always provide a generic font e.g serif or sans-serif as final fallback font.
When using the font shorthand property, both font-size and font-family are required; the others are optional. The font-family value must be set last; aside from this, order of values does not matter.

 

Display
 

The display property specifies the display behavior (the type of rendering box) of an element.

display: block; – Elements with display: block; element begins on a new line and can be given width & height CSS properties.
display: inline-block; – Elements with display: inline-block; stay on the same line and can be given width & height CSS properties.
display: inline; – Elements with display: inline; stay on the same line and cannot be given width & height CSS properties.
display: none; – Elements with display: none; are not shown.
COLOR, OPACITY, WIDTH & HEIGHT, TEXT-ALIGN
color: black; – Use for text on elements that have text content
opacity: 0.5; – Set element opacity between 0 and 1. 0.5 is 50% opacity, 0.1 is 10% opacity, etc
width: 10px  // No space between 10 and px.
width: 50%; //percentage of its container’s size.
width: auto;  // let browser figure it out
 
height: 10px; // No space between 10 and px.
height: 50%; //percentage of its container’s size.
height: auto; // let browser figure it out
These set the alignment of text in an element.
text-align: left;
text-align: right
text-align: center;
text-align: justify
COMMENTS

In HTML, comments look like this: <!–This is an HTML comment–>

In CSS, comments look like this: /*This is a CSS comment*/

LOREM IPSUM TEXT
Lorem ipsum text is a concept that orginated in the print publishing industry. It’s placeholder text that resembles Latin; it’s used when you need a block of text for testing layout/design, the text’s meaning does not matter. Go here to get some LOREM IPSUM TEXT. OR Go here for more!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Additional Resources:

Related Posts

You May Have Missed