All Categories
Computer Skills
Explore questions in the Computer Skills category that you can ask Spark.E!
Using the same selector syntax, target the th elements within your table rows where the class is total. Align the text to the left, and give them a padding of 0.5rem 0 0.25rem 0.5rem.Next you need to style your caption elements to look more like headers. Create a table caption selector. Set the text to have a color of #356eaf, a size of 1.3em, and a normal weight.c/ Adding position sticky moved the element into its own stack. To ensure your #years element does not get hidden by different stacks, add a z-index property set to 999 in the #years rule.c/ Create a table selector to target your tables. Set the border-collapse property to collapse, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the border property to 0 to hide the borders themselves.c/ Style the text within your #years element by creating a #years span[class] selector. The span[class] syntax will target any span element that has a class attribute set, regardless of the attribute's value.Give your new selector a bold font, a width of 4.5rem, and text aligned to the right.c/ Ensure your table fills its container with a width property set to 100%, then position it relatively and give it a top margin of 3rem.c/ Now that you have added the !important keyword, you can remove the :not(.sr-only) from your span selector.Create a selector to target your td elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of 4rem. This approach ensures that the width is fixed, whereas setting width specifically would allow the elements to shrink to the container.c/ The :first-of-type pseudo-selector is used to target the first element that matches the selector. Create an h1 .flex span:first-of-type selector to target the first span element in your .flex container. Remember that your span elements are reversed, visually, so this will appear to be the second element on the page.Give your new selector a font-size property of 0.7em to make it look like a sub-heading.c/ The last part of your table heading is your years. Create a #years selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with top: 0.c/ You wrapped your table in a section element - now you can style that to give your table a border. Create a section selector, and give it a max-width property set to 40rem for responsive design. Set the margin property to 0 auto to center it, and set the border property to 2px solid #d0d0d5.c/ The CSS clip property is used to define the visible portions of an element. Set the span[class~="sr-only"] selector to have a clip property of rect(1px, 1px, 1px, 1px).The clip-path property determines the shape the clip property should take. Set the clip-path property to the value of inset(50%), forming the clip-path into a rectangle within the element.c/ Time to style your table heading. Create an h1 selector. Give it a max-width property set to 37.25rem, a margin property set to 0 auto, and a padding property set to 1.5rem 1.25rem.Now give the captions an absolute position, and shift them -2.25rem from the top and 0.5rem from the left.c/ Before you start diving in to the table itself, your span elements are currently bolded. Create a span:not(.sr-only) selector and give it a font-weight property set to normal.The :not() pseudo-selector is used to target all elements that do not match the selector - in this case, any of your span elements that do not have the sr-only class. This ensures that your earlier rules for the span[class~="sr-only"] selector are not overwritten.c/ You wrapped your tables in a container with the table-wrap class. Create a selector for that class, and give it a padding set to 0 0.75rem 1.5rem 0.75rem.c/ Now you need to size these elements down. Give your span[class~="sr-only"] selector a width and height property set to 1px.c/ The :last-of-type pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an h1 .flex span:last-of-type selector to target the last span in your flex container, and give it a font-size property set to 1.2em to make it look like a header.c/ The calc() function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:.example { margin: 10px; width: calc(100% - 20px); }Give #years a margin of 0 -2px, and a padding set to 0.5rem calc(1.25rem + 2px) 0.5rem 0.c/ To prevent the text content from overflowing, give your span[class~="sr-only"] selector an overflow property set to hidden and a white-space property set to nowrap.
Explore Features
Discover the full suite of AI-powered study tools.
Study Plan
Build a personalized study schedule powered by AI.
Record Lecture
Capture and generate enhanced notes from your lectures.
Notes
Automatically generate comprehensive notes from any course material.
Calendar
Plan personalized study sessions with AI-assisted scheduling
Tutor Me
Get comprehensive step-by-step explanations on any topic.
Spark.E Call
Have a live voice conversation with your AI tutor.
Spark.E Visuals
Analyze diagrams, charts, and images with AI-powered explanations.
Audio Recap
Generate podcast-style audio summaries of your study materials.
Explainer Video
Turn any topic into an AI-generated educational video.
Flashcards
Create smart flashcard decks from your study materials with one click.
QuizFetch
Auto-generated quizzes from your uploaded content.
Arcade
Learn through interactive study games.
Exam-Specific Questions
Practice with real exam formats and questions.
Practice Tests
Simulate full-length exams from your material.
Essay Grader
Receive personalized feedback and grading on your essays.
Plugins
Shape the way Spark.E teaches you.
Mini Apps
Explore interactive study apps or build your own.