Introduction
The in built options when you click on a layer element will be enough to make your show look good - features like rotate, resizing, font colors, font size. But if you want to dive deeper, you can insert CSS into the browser's Inspector style. In case you've never heard of CSS Spotlight.is can serve as a very friendly intro. Thought it may not seem that way at first. Here's what your browser's Inspector looks like open (warning, it'll look like rocket science):
Good news is 99% of what you see above is ignored. You just want to focus on one place here:
See where it says element above? In between its brackets on the top row of the Rules tab, that's where you'll paste in your CSS lines - and that's about it! The browser will list all the options for that CSS declaration, so you just navigate through its options. Once you start designing, it just feels right to do it this way. It's as if you're painting the web.
But first off, it's good to go over a basic overview in case you may have heard of HTML floating around but never really cared, or if you're wondering what is CSS?! HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are two fundamental languages used in web development. HTML provides the structure and content of a web page, while CSS is responsible for the presentation and styling of the page.
HTML is a markup language that uses tags to define the structure and content of a web page. Here are some key concepts and elements in HTML:
HTML consists of various elements, each represented by a pair of opening and closing tags. Tags are enclosed in angle brackets (`<` and `>`), and they define the purpose and behavior of the element. For example, the `<div>` tag is used to create a division or section on a webpage.
On Spotlight.is the tags you only need to care about are layers and its child tag - one of five spotlight.is elements. See the two white asterisk below:
When on Spotlight.is, when you right click on an image or text, and select Inspect from the menu, the browser will bring you to its Styles tab where you can paste in CSS lines.
CSS is a style sheet language used to describe the presentation of a document written in HTML. It allows you to control the layout, colors, fonts, and other visual aspects of a web page. Here are some key concepts in CSS.
CSS properties are used to define the visual styles of the selected elements. Each property has a specific value that determines how the style is applied. For example, the `color` property sets the color of an element, and the `font-size` property controls the size of the font. This is what CSS looks like:
You don't need to know all the CSS properties (fonts in red), there are many, and more to come. You also don't need to know all of the possible values for each property (fonts in blue) as there's so many. All you need to know is your question for what you want for your element style!
And so search for that and add 'CSS' to your search term! Once you copy in the CSS line into the Inspector, you can use the Inspector to navigate all of the options available!
As you can see from the above screenshot, the browser Inspector will show you all the options, and you just navigate through them, seeing the changes to your element as press up or down on your keyboard.
HTML and CSS are the building blocks of what paints the web. HTML provides the structure and content of a web page, while CSS adds style and visual appeal. The browser's Inspector does the CSS and calculating for you - you just need to tinker and decide what to paste in and when it looks good!