Lecture 5 - CSS Flashcards
1
Q
Benefits of CSS
A
- 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 adopt a page for different output media. This approach to CSS page design is often referred to asresponsive design.
2
Q
What is CSS
A
- CSS is a W3C standard for describing the appearance of HTML elements.
- With CSS, we can assign font properties, colors, sizes, borders, background images, positioning and even animate elements on the page.
- CSS can be added directly to any HTML element (via the style attribute), within the
<head>element, or, most commonly, in a separate text file that contains only CSS.
3
Q
CSS Versions
A
- Style sheets as a way to visually format markup predate the web.
- W3C decided to adopt CSS, and by the end of 1996, the CSS Level 1 Recommendation was published
- A year later, the CSS2 was published
- CSS2.1, did not become an official W3C Recommendation until June 2011
- At the same time the CSS2.1 standard was being worked on, a different group at the W3C was working on a CSS3 draft
Browser Adoption
- Perhaps the most important thing to keep in mind with CSS is that the different browsers have not always kept up with the W3C.
- For this reason, CSS has a reputation for being a somewhat frustrating language
4
Q
CSS Syntax
A
- a CSS document consists of one or more style rules
1. Style Rule: Each rule consists of a selector and a declaration block.selector { property: value; property2: value2; }
-
Selector: Identifies the HTML element(s) to be styled.
em
-
Declaration Block: Enclosed within curly braces
{}, it contains one or more declarations.{ color: red; } -
Declaration: A single property-value pair.
color: red;
-
Property: The aspect of the element to be styled.
color
-
Value: The style to be applied to the property.
red
5
Q
Common Units of Measure Values
A
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 (See Table 4.3 for more):
- pxPixel. In CSS2 this is a relative measure, while in CSS3 it is absolute (1/96 of an inch)
- emEqual to the computed value of the font-size property of the element on which it is used.
- % A measure that is always relative to another value.
- inInches
- cmCentimeters
6
Q
Inline Styles
A
Inline Styles
- CSS rules that are applied directly within an HTML element using the
styleattribute. - They only affect the specific element they are defined within and override any other style definitions for the properties used.
- A selector is not necessary.
```
<h1>Share Your Travels</h1><h2 style=”font-size: 24pt”>Description</h2>
…
<h2 style=”font-size: 24pt; font-weight: bold;”>Reviews</h2>
```
7
Q
Embedded Style Sheet
A
Embedded Style Sheet
- Embedded style sheets (also known as internal styles) are CSS rules placed within the
<style>element inside the<head>section of an HTML document. - While they are better than inline styles for maintainability and separation of concerns, they are still generally discouraged in favor of external stylesheets for larger projects.
```
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Chapter 4</title>
<style>h1 {font-size: 24pt;} h2 { font-size: 18pt; font-weight: bold; }</style>
</head>
<body>
```
</body></html> - Placement: Defined within the
<style>element inside the<head>section. - Scope: Affect the entire document but do not apply to other documents.
- Separation: Better separation of content and presentation compared to inline styles.
8
Q
External Style Sheet
A
- External style sheets are CSS rules placed within an external text file with the
.cssextension. - This method is widely preferred for most projects because it promotes better organization, maintainability, and performance.
- When you change an external style sheet, all HTML documents that reference that style sheet will automatically use the updated version.
- The browser can cache the external style sheet, reducing load times for users who visit multiple pages that use the same stylesheet.
/* styles.css */
h1 {
font-size: 24pt;
}
h2 {
font-size: 18pt;
font-weight: bold;
}
p {
font-size: 14pt;
}
9
Q
How to use the external style sheet
A
-
Create the External CSS File: Create a text file with the
.cssextension, e.g.,styles.css. - Add CSS Rules to the File: Write your CSS rules in this file.
-
Link the CSS File in HTML: Use the
<link>element to reference the CSS file in the<head>section of your HTML document.
10
Q
Benefits of using external style sheets
A
- Reusability: One CSS file can be linked to multiple HTML documents, ensuring consistent styling across a website.
- Maintainability: Easier to maintain and update styles since changes in the CSS file will automatically reflect across all linked HTML documents.
- Separation of Concerns: Keeps HTML content separate from CSS presentation, promoting cleaner and more organized code.
11
Q
The Document Object Model
A
- Internal Representation: The DOM is how a browser internally represents an HTML page.
- Tree Structure: The DOM is like a tree, representing the overall hierarchical structure of the document.
- Hierarchy Terminology: In the DOM, elements are often referred to with familial terms, such as descendants, ancestors, and siblings, based on their position within the hierarchy.
12
Q
Hierachical Structure of DOM
A
In the DOM:
- Root: The document itself is the root of the tree.
- Nodes: Elements, attributes, and text are considered nodes in the tree.
- Parent and Child: Each element and attribute has a parent node, and can have multiple child nodes.
- Siblings: Nodes that share the same parent are considered siblings.
13
Q
Element Selectors
A
- Element selectorsselect all instances of a given HTML element.
- You can also select all elements by using theuniversal element selector(*)
- You can select a group of elements by separating the different element names with commas.
```css
/* commas allow you to group selectors */
p, div, aside {
margin: 0;
padding: 0;
}
/* the above single grouped selector is equivalent to the following: */
p {
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
}
aside {
margin: 0;
padding: 0;
}
~~~
14
Q
Class Selectors
A
- Aclass selectorallows you to simultaneously target different HTML elements regardless of their position in the document tree.
- HTML elements labeled with the same class attribute value, can be targeted for styling by using a class selector, which takes the form: period (.) followed by the class name.
15
Q
ID Selectors
A
- AnID selectorallows you to target a specific element by its id attribute regardless of its type or position in the document tree.
- HTML elements labeled with an id attribute, can be targeted for styling by using an id selector, which takes the form: pound/hash (#) followed by the id name.
- Consider Figure 4.4. The original HTML can be modified to add class and id values, which are then styled in CSS.
- Id selector #firstmatches the div with id “first”
- Class selectors .orangeand .circle, match all divs with those class values.
- Notice that an element can be tagged with multiple classes.
