Once this is done, you will see the developer tools and the element you clicked will be highlighted. On it you will see the class or ID. Pro tip – only use classes.
In the above example, the div (div is an HTML element) has the class "theme". So, to style all such elements, just write the following selector:
.theme {}Square brackets {} are where we write properties. When selecting specific HTML elements with dynamic data, it's a bit more complicated, so we'll skip this part.
But sometimes, you may need to be more specific because the same .theme class may be used elsewhere . For this, it is best to also target the parent class. In our case (not seen in the screenshot above) this would be .themes. We will get the following selectors:
.themes .theme {}The more selectors there are, the Latest Mailing Database more precise the selectors are and have higher priority than other styles. You can read more about selectors, or check out this short cheat sheet.
Now, we write the actual style inside curly braces {}. We've locked the element, now it's time to change its appearance. The basic syntax of CSS properties is as follows: <name>:<property> .
Here are some examples of commonly used properties:
font-family – defines the font of the text inside the HTML element
font size - easy to guess - change pixel size (or other value)
Display – Typically, you might use None to make the element disappear
Text Alignment – Left , Right or Center
color – change the color of the text
Background – Change the background of the text.
margins – the spacing around the box
padding – the spacing inside the box
border – border
Of course, there are many others. If you want to hide an element, you just need to find the selector for that element and apply display:none . Here's how it looks:
.element-to-hide {
display: none;
}Of course, you can add more selectors one after the other, just make sure to add a semicolon ":" at the end of each line . Many people just copy and paste. In this case you just need to grab the correct selector.
CSS is huge and we can't cover all styles here. Experienced front-end developers have been working full-time for many years. First, you can check out some getting started guides that might help you or outsource your project to a professional.
What we've looked at so far applies to all pages on all devices. But in some cases this is not desired. In some cases, you want to style your website for mobile, tablet or desktop. Or maybe some kind of mix between them. How could it be so easy! Media Queries are here to help.
Media queries define rules about when certain styles should be applied. Such a rule could be "under 600px only" or "between 400px and 800px", etc. Here is a real example of such media query: