diff --git a/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/goal.png b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/goal.png new file mode 100644 index 0000000..f901482 Binary files /dev/null and b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/goal.png differ diff --git a/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/index.html b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/index.html new file mode 100644 index 0000000..b1f2c60 --- /dev/null +++ b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/index.html @@ -0,0 +1,32 @@ + + + + + + CSS Selectors + + + + +

CSS Selectors

+

Applying CSS to Different Parts of HTML

+ +

1. The element selector targets elements based on their HTML tag name.

+ +
    + +
  1. Class selectors target elements based on the value of the class attribute.
  2. + + +
  3. ID selectors target elements based on the value of the id + attribute.
  4. + + +
  5. Attribute selectors target elements based on their attributes and values.
  6. + + +
  7. The universal selector targets all elements.
  8. +
+ + + \ No newline at end of file diff --git a/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution-style.css b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution-style.css new file mode 100644 index 0000000..9003b49 --- /dev/null +++ b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution-style.css @@ -0,0 +1,34 @@ +ol { + margin-left: -40px; + margin-top: -20px; + list-style-position: inside; +} + + +/* Write your CSS below, don't change the rules above. */ + +/* TODO 1: Set the CSS for all paragraph tags to "color: red;" */ +p { + color: red; +} + +/* TODO 2: Set the CSS for all elements with a class of "note" to "font-size: 20px;" */ +.note { + font-size: 20px; +} + +/* TODO 3: Set the CSS for the element with an id of "id-selector-demo" to "color: green;" */ +#id-selector-demo { + color: green; +} + +/* TODO 4: Set the CSS for the li elements that have the "value" attribute set to "4" to have "color: blue;" */ +li[value="4"] { + color: blue; +} + +/* TODO 5: Set all elements to have "font-family: sans-serif;" */ +* { + text-align: center; +} + diff --git a/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution.html b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution.html new file mode 100644 index 0000000..4b3e317 --- /dev/null +++ b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/solution/solution.html @@ -0,0 +1,32 @@ + + + + + + CSS Selectors + + + + +

CSS Selectors

+

Applying CSS to Different Parts of HTML

+ +

1. The element selector targets elements based on their HTML tag name.

+ +
    + +
  1. Class selectors target elements based on the value of the class attribute.
  2. + + +
  3. ID selectors target elements based on the value of the id + attribute.
  4. + + +
  5. Attribute selectors target elements based on their attributes and values.
  6. + + +
  7. The universal selector targets all elements.
  8. +
+ + + \ No newline at end of file diff --git a/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/style.css b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/style.css new file mode 100644 index 0000000..6b81508 --- /dev/null +++ b/Web Development Python Projects/5.3+CSS+Selectors/5.3 CSS Selectors/style.css @@ -0,0 +1,27 @@ +ol { + margin-left: -40px; + margin-top: -20px; + list-style-position: inside; +} + +/* Write your CSS below, don't change the rules above. */ + +p { + color: red; +} + +.note { + font-size: 20px; +} + +#id-selector-demo { + color: green; +} + +li[value="4"] { + color: blue; +} + +* { + text-align: center; +} \ No newline at end of file