CSS Basics, Part 2 Flashcards

1
Q

CSS syntax

A
  • The selector points to the HTML element you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name and a value, separated by a colon.
  • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
  • In the following example all <p> elements will be center-aligned, with a red text color:</p>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

example

A

p {
color: red;
text-align: center;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

element selector

A
  • the element selector selects elements based on the element name.
  • You can select all <p> elements on a page like this (in this case, all </p><p> elements will be center-aligned, with a red text color):
  • example:
    p {
    text-align: center;
    color: red;
    }</p>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

id selector

A
  • The id selector uses the id attribute of an HTML element to select a specific element.
  • The id of an element should be unique within a page, so the id selector is used to select one unique element!
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.
  • The style rule below will be applied to the HTML element with id=”para1”:
  • example:
    #para1 {
    text-align: center;
    color: red;
    }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

class Selector

A
  • The class selector selects elements with a specific class attribute.
  • To select elements with a specific class, write a period (.) character, followed by the name of the class.
  • In the example below, all HTML elements with class=”center” will be red and center-aligned:
  • exampe:
    .center {
    text-align: center;
    color: red;
    }
  • You can also specify that only specific HTML elements should be affected by a class.
  • In the example below, only <p> elements with class=”center” will be center-aligned:
  • example:
    p.center {
    text-align: center;
    color: red;
    }
  • HTML elements can also refer to more than one class.
  • In the example below, the </p><p> element will be styled according to class=”center” and to class=”large”:
  • example:

</p><p class="center large">This paragraph refers to two classes.</p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

grouping selectors

A
- If you have elements with the same style definitions, like this:
h1 {
    text-align: center;
    color: red;
}

h2 {
text-align: center;
color: red;
}

p {
    text-align: center;
    color: red;
} 
- It will be better to group the selectors, to minimize the code.
- To group selectors, separate each selector with a comma.
- In the example below we have grouped the selectors from the code above:
- Example:
h1, h2, p {
    text-align: center;
    color: red;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

CSS comments

A
  • Comments are used to explain the code, and may help when you edit the source code at a later date.
  • Comments are ignored by browsers.
  • A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
  • Example:
    p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
    }

/* This is
a multi-line
comment */

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

In the following declaration block, which elements are considered properties?
{font-family: Avenir, Arial, sans-serif;
font-size: 20px;
padding: 8px;}

A
  • font-family, font-size, padding
How well did you know this?
1
Not at all
2
3
4
5
Perfectly