CSS

• Main engineering concepts: Separation of concerns + Reuse
• Improved control over formatting.
• Improved site maintainability. All formatting can be centralized into one CSS file
• Improved accessibility. By keeping presentation out of the HTML, screen readers and other accessibility tools work better.
• Improved page-download speed. Each individual HTML file will contain less style information and markup, and thus be smaller.
• Improved output flexibility. CSS can be used to adapt a page for different output media. This approach to CSS page design is often referred to as responsive design.

Units of measure in CSS are either

• relative units, in that they are based on the value of something else, or
• absolute units, in that they have a real-world size.

Some example measures:

• px Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute (1/96 of an inch -> 1px ~ 1.06mm)
• em Equal to the computed value of the font-size property of the element on which it is used (2em means 2 times the size of the current font)
• vw Relative to 1% of the width of the viewport (the browser window size). If the viewport is 30cm wide, 1vw = 0.3cm.
• in Inches (absolute)
• cm Centimeters (absolute)

CSS style rules can be located in three different locations.

• Inline Styles
• Embedded Style Sheet
• External Style Sheet

These three are not mutually exclusive, in that you could place your style rules in all three.

When defining CSS rules, you will need to use a selector.

• Selectors tell the browser which elements will be affected by the property values
• Selectors allow you to select individual or multiple HTML elements.
• Three basic selector types have been around since the earliest CSS2 specification.
  • Element Selectors
  • Class Selectors
  • Id Selectors

A class selector allows you to target

An ID selector allows you to target a

different HTML elements labeled with

specific element by its id attribute, which

the same class

takes the form:

We use a period (.) followed by the class

hash (#) followed by the id name.

name.

The difference between “class” and “id”:

―id‖ is

unique in a document and used to target only one element, whereas

―class‖ can be used to target many elements.

An attribute selector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute.

• Attribute selectors can be helpful in the styling of hyperlinks and form elements
• These selectors can be combined with the element id and class selectors.
• You use square brackets to create attribute selectors

A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree.

• You can select the first line or first letter of any HTML element using a pseudo-element selector.

A pseudo-class selector targets either a particular state or a variety of family relationships

• This type of selector is for targeting link states and for adding hover styling for other elements

• a:link Selects links that have not been visited.
• a:visited Selects links that have been visited.
• :hover Selects elements that the mouse pointer is currently above.
• :active Selects an element that is being activated by the user. A typical example is a link that is being clicked.
• :first-child Selects an element that is the first child of its parent.
• :first-letter Selects the first letter of an element.
• :first-line Selects the first line of an element.
• :is takes a selector list and selects any element that can be selected by any of the selectors in that list (example :is(input,label,button,select):hover instead of input:hover, label:hover ....

• Style (color: red) last child of the unordered list
• Style <a> where href has substring ―example‖

The ―Cascade‖ in CSS refers to how conflicting rules are handled.

CSS uses the following cascade principles to help it deal with conflicts:

• inheritance,
• specificity, and
• location.

Inline elements do not form their own blocks but instead are displayed within lines.

• Normal text in an HTML document is inline, as are elements such as <em>, <a>, <img>, and <span>.
• W hen there isn’t enough space left on the line, the content moves to a new line

CSS provides two types of properties that affect text.

• Font properties that affect the font and its appearance.
• Paragraph properties that affect the text in a similar way no matter which font is being used
• Font properties include
  • font, font-family, font-style, font-size, font-variant, font-weight

If we wish to create web layouts that work well on different devices, we should learn to use relative units such as em units or percentages for our font sizes

• it can quickly become difficult to calculate actual sizes when there are nested elements
  • For this reason, CSS3 now supports a new relative measure, the rem (for root em unit). This unit is always relative to the size of the root element (i.e., the <html> element).

CSS Variables (also called custom properties) are a new feature that let you

• define variables (which must begin with a double hyphen --x) at the top of your CSS file usually within a special :root pseudo-class selector, and
• reference those variables as property values using the var CSS function.

Duplication of colors, spacing, and borders, often happens numerous times within a single file.

Borders can be assigned to the <table>, <th> and the <td> element.

Interestingly, borders cannot be assigned to the <tr>, <thead>, <tfoot>, and <tbody> elements.

Notice as well the border-collapse property. This property selects the table’s border model.

• The default is the separated model or value (each cell has its own unique borders)
• The collapsed border model makes adjacent cells share a single border.

• Code Repository for all chapters https://github.com/skanderturki/se371
• For flex Layout understanding 15min quick video: https://www.youtube.com/watch?v=fYq5PXgSsbE
• Grid min content, max content, fit content https://www.youtube.com/watch?v=DM244V9KvNs&t=29s
• https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/