Introduction to CSS

Inline Styles

• Styles are directly applied within the HTML tag using the style attribute.
• Syntax: <element style="property: value;">

Font-Family Syntax

• Use single quotes, double quotes, or no quotes to enclose font names with multiple words.
• Example: font-family: 'Times New Roman';
• Example: font-family: "Arial Black";
• Example: font-family: Helvetica;

Italic Text Property

• The font-style property primarily defines italic text, with italic or oblique values.

Invalid font-style Value

• The invalid value is bold.

Visual Hierarchy

• Instead of font sizes, use headings (h1, h2, h3, etc) to create visual hierarchy and improve accessibility.

Fixed Background Image

• fixed is the background attachment property value that keeps the background image fixed on the viewport.

Link States

• The visited link state styles a link after it has been clicked.

Text Alignment Property

• text-align controls horizontal text alignment, options include left, right, center, and justify.

Content Property with Pseudo-elements

• The content property adds content generated by the ::before and ::after pseudo-elements.

Invalid content Property Value

• none is not a valid value for the content property.

CSS Box Model: Margin

• In the CSS Box Model, the margin property creates space around elements outside of defined borders.

Border-Radius Property

• The border-radius property rounds the corners of an element, creating curved borders.

Default content Property Value

• The default value for the content property is none.

Margin and Padding Similarities

• Both margin and padding create space around the element's content, but padding is inside the border, while margin is outside the border.

Quotes and content Property

• The open-quote and close-quote values will NOT remove quotes from the content property.

Individual Border Properties

• Individual border properties allow control over the border-width, border-style, and border-color of each side of an element separately.

Position Property in CSS

• The position property defines the position of an element relative to its normal position (static), parent element (relative), document (absolute), or viewport (fixed).

Purpose of float Property

• The float property allows elements to move to the left or right of their container, wrapping text around them.

CSS Transition Property

• The transition property defines how smoothly an element changes its appearance when its properties are modified.

CSS Animation Format

• animation: name duration timing-function delay iteration-count direction fill-mode;.

Invalid CSS position Value

• inherit is not a valid position value for the position property.

CSS Acronym

• CSS stands for Cascading Style Sheets.

CSS Designer

• Hakon Wium Lie is credited with designing CSS.

CSS Benefits

• Accessibility: CSS can be used to improve the accessibility of web pages for users with disabilities.
• SEO: CSS can be used to improve the Search Engine Optimization (SEO) of web pages.

CSS Selector Limitations

• CSS selectors cannot be used to identify the source code of a web page.

Declaration Block Contents

• The declaration block of CSS contains the property and its value.

Specific Class Selector

• The selector .class-name would be used to style all elements with a specific class.

False CSS Statement

• False: CSS can only be used to style the appearance of web pages. (CSS can also be used to create layout and functionality.)

CSS and Page Loading Speeds

• Using CSS effectively can improve page loading speeds by reducing the number of HTTP requests needed to load resources.