Irving Independent School District Smart Solutions

Student material · Assignment · Unpublished in Canvas

Day 8: Styling with CSS

Points
5
Submission
upload, media recording
Canvas state
Unpublished

Intro to CS · Day 8 of 10

Style with CSS

Use selectors, properties, and values to change the page without changing its HTML structure.

  • Tool: CS Discoveries Unit 2, Lessons 6 and 9
  • Time: one class period
  • Turn in: before-and-after screenshot and reflection

English

Words for today: selector · property · value

What to do

  1. Open Styling Text with CSS and complete the assigned levels.
  2. Open your Day 7 page. Save or capture a before view.
  3. Add one CSS rule at a time. Start with a selector, add one property and value, then check the preview before adding another rule.
  4. Style at least a heading and paragraph. Keep enough contrast between the text and background to read every word.
  5. If time remains, use Styling Elements with CSS to try a border, padding, or margin.
  6. Capture an after view from the same part of the page.

If your code is not working

  1. Check the punctuation in the CSS rule, including the braces, colon, and semicolon.
  2. Make one change and refresh the preview before changing another property.
  3. If the text disappears, check the text and background colors.

Before you submit

  • Upload the before-and-after views in one file or two readable images.
  • In the submission comment, name one selector, property, and value you used, then complete the reflection.

Reflection

Write 2 or 3 sentences: "I used the selector ____. I changed the ____ property to ____ because ____."

Word bank: selector · property · value · contrast · font · background

Español

Palabras de hoy: selector · property (propiedad) · value (valor)

Qué hacer

  1. Abre Styling Text with CSS y completa los niveles asignados.
  2. Abre tu página del Día 7. Guarda o toma una captura del antes.
  3. Agrega una regla de CSS a la vez. Empieza con un selector, agrega una propiedad y un valor, y revisa la vista previa antes de agregar otra regla.
  4. Estiliza al menos un encabezado y un párrafo. Mantén suficiente contraste entre el texto y el fondo para leer cada palabra.
  5. Si queda tiempo, usa Styling Elements with CSS para probar un borde, padding o margin.
  6. Toma una captura del después desde la misma parte de la página.

Si tu código no funciona

  1. Revisa la puntuación de la regla de CSS, incluyendo las llaves, los dos puntos y el punto y coma.
  2. Haz un cambio y actualiza la vista previa antes de cambiar otra propiedad.
  3. Si desaparece el texto, revisa los colores del texto y del fondo.

Antes de entregar

  • Sube las vistas de antes y después en un archivo o en dos imágenes legibles.
  • En el comentario, nombra un selector, una propiedad y un valor que usaste. Después completa la reflexión.

Reflexión

Escribe 2 o 3 oraciones: "Usé el selector ____. Cambié la propiedad ____ a ____ porque ____."

Banco de palabras: selector · propiedad · valor · contraste · fuente · fondo