Grade 10 > Computer Studies
Create an HTML document with a heading and a paragraph, then add a CSS rule to change the heading's color to blue and the paragraph's font size to 18px.
Create an HTML list with three items. Apply a CSS rule to change the list item's text color to red.
Create a button with the class "btn-primary." Apply a CSS rule to style it with a blue background and white text.
No work here.
Try to change the font-family, font-size, and text color in the CSS. Use any prior file from this class where you can add css and change it up. Then apply all of the following:
font-family: Specifies the font of the text.
font-size: Sets the font size.
font-weight: Adjusts the thickness of the font (e.g., bold).
font-style: Sets the style of the font (e.g., italic).
color: Sets the text color.
text-align: Defines text alignment (left, center, right, justify).
text-decoration: Adds effects like underline, overline, or line-through.
line-height: Sets the spacing between lines.
Change the background of a <div> to a color.
Change the background of a <div> to an image.
Experiment with different values for each of the following
background-repeat
background-position
background-size
How do they affect the background image?
No work here.
Add a 10px margin to the top of a div with a class called .container
Give the .container a 1px solid border with a color of your choice.
Change the background color of the <h1> element within the .container.
Change the padding of the <h1> element you added in the prior task
Create a CSS rule to change the link color when hovered over.
Style visited links differently from unvisited links using CSS.
Apply CSS to remove the default underlines from all links on a webpage.
Customize the bullet points or numbering style for an unordered or ordered list.
Add spacing between list items (list margin and padding).
Create a horizontal navigation menu using an unordered list and style it with CSS.
Style alternating rows of an HTML table with different background colors using CSS.
Apply CSS to set fixed table cell widths and prevent them from changing dynamically.
Create a table with a header row that stays fixed while the other rows are scrollable (fixed table header).
Hide an HTML element using CSS (display: none) and then make it reappear on user interaction.
Change the display property to inline or block to control how elements are rendered on the page.
Experiment with different values of the position property (static, relative, absolute, fixed) and observe how they affect element positioning.
Create a multi-column layout using the CSS float property.
Apply the clear property to manage the floating behavior of elements.
Design a webpage with text wrapping around a floated image using CSS floats.
Center an element horizontally and vertically on a page using CSS.
Align text within a div element to the right, left, or center.
Create a CSS layout where three boxes are aligned side by side, with equal spacing between them.
Adjust the opacity of an image or background color using the CSS opacity property.
Create a CSS-based overlay with reduced opacity to emphasize content.
Build a CSS-only image gallery where images become more transparent on hover.
Style form elements (input fields, buttons, etc.) to match a specific design you choose.
Design a navigation bar with evenly spaced navigation links.
Use CSS to change the background color and text color of the active navigation link.
Add CSS hover effects to the navigation links for a smooth transition.
It can be horizontal or vertical
No work here. Go have fun with the assignment :)
Gradients
Border Images
Shadows
Media Queries
Object Fit
Image Styling
Text Effects
Transitions
2D Transforms
3D Transforms