Introduction to CSS

What type of language is CSS?

Declarative

CSS works by associating rules with _______ elements.

HTML

Selectors that match one or more parts of the content that are in a certain position in relation to an element. eg.) The first word of each paragraph, or generated content appearing just before an element.

Pseudo-elements

Which selector matches element names?

Type Selector h1, h2, h3 {}

Each declaration contained inside a declaration block has to be separated by a...?

semi-colon;

What rule can you add after any property value to indicate that it should be considered more important than other rules that apply to the same element?

!important

What are the two stages the browser combines the document's content with its style information?

1. The browser converts HTML and CSS into DOM. (The DOM combines the content with its style) 2. The browser displays the contents of the DOM.

What are the eight types of selectors?

1. Universal Selector 2. Type Selector 3. Class Selector 4. ID Selector 5. Child Selector 6. Descendant Selector 7. Adjacent Sibling Selector 8. General Sibiling Selector

What are the three attributes of a CSS link element?

1. href 2. type 3. rel

Indicates how the elements referred to in the selector should be styled.

CSS Declaration

Identifiers that indicate which stylistic features you want to change. eg.) font, width, background-color, size, etc.

CSS Properties

Indicates which element the rule applies to. eg.) p {}, .class {}, etc.

CSS Selectors

Which selector matches an element that is a direct child of another?

Child Selector li>a {}

Which selector matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol?

Class Selector .note {}

The selector plus the declaration block is called a...?

Ruleset

Which selector applies to all elements in the document?

Universal Selector * {}

CSS allows you to _______ ______ that control the way that each individual box (and the contents of that box) is presented.

create rules

The _______ attribute specifies the relationship between the HTML page and the file it is linked to. The value should be stylesheet when linking to a CSS file.

rel

The _______ attribute specifies the type of document being linked to. The value should be text/css.

type

What is the code to link an EXTERNAL CSS?

<link href="css/styles.css" type="text/css" rel="stylesheet"/>

This element is used in an HTML document to tell the browser where to find the CSS file used to style the page.

<link>

What does an At-rule start with? and followed by?

@, followed by an identifier to say what kind of rule it is.

The two parts of a CSS Declarations are: a _______ and a _______.

a Property and a Value

a._______-_______ elements look like they start on a new line. b._______ elements flow within the text and do not start on a new line.

a.) Block-level elements b.) Inline elements

What are Simple Selectors?

Selectors that match one or more elements based on element type. eg.) Class or Id

What are Attribute Selectors?

Selectors that match one or more elements based on their attributes/attribute values.

What are shorthand properties?

Several property values in a single line. eg.) padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; can be written as : padding: 10px 15px 15px 5px;

If there are two identical selectors, which one takes precedence?

The latter of the two.

What is a declarative language?

A program that specifies what is to be done rather than how to do it.

What are Nested statements?

A specific subset of At-rule, the syntax of which is a nested block of CSS rules that will only be applied to the document if a specific condition is matched.

Which selector matches an element that is the next sibling of another?

Adjacent Sibling h1+p {} Targets the first <p> element after any <h1> element (but not other <p> elements)

Indicates how you want to change the style of the property. eg.) If you want to specify a color property then the value is the color you want the text in these elements to be (14px, Serif, Blue, etc.).

CSS Values

What does CSS stand for?

Cascading Style Sheet

What is the @media rule?

Content within an @media rule is only applied if the device which runs the browser matches the expressed condition;

What is the @supports rule?

Content within an @supports rule is applied only if the browser actually supports the tested feature;

What is the @document rule?

Content within the @document rule is applied only if the current page matches some conditions.

The ______ is where the CSS and document's content meet up?

DOM

Nonprocedural and Very High Level Language are other names for...

Declarative Language

Which selector matches an element that is a descendant of another specified element (not just a direct child of that element)?

Descendant Selector p a {} Targets any <a> elements that sit inside a <p> element, even if there are other elements nested between them.

Which selector matches an element that is a sibling of another, although it does not have to be the directly preceding element?

General Sibling Selector h1~p {} If you had two <p> elements that are siblings of an <h1> element, this rule would apply to both.

Which selector matches an element whose id attribute has a value that matches the one specified after the pound or hash symbol?

ID Selector #note {}

The code below is an example of: <style type="text/css"> body { font-family: arial; } </style>

Internal CSS

Selectors that match one or more elements that exist in a certain state, eg.) Such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.

Pseudo-classes

A CSS rule contains two parts: a ________ and a ________.

Selector and a Declaration

CSS Declarations are paired with ________ to produce CSS rulesets?

Selectors

What is CSS?

Style sheet language that provides the formatting and "look" of a Web page or document written in a markup language. It's the presentation of a webpage.

If one selector is more specific than the others, which one takes precedence?

The more specific. eg.) h1 selectors would take precedence over a *universal selector.

What are At-rules?

Used in CSS to convey metadata, conditional information, or other descriptive information.

The _______ attribute specifies the path to the CSS file (which is often placed in a folder called css or styles).

href

The key to understanding how CSS works is to imagine that there is an ________ _____ around every HTML element.

invisible box