CSS- cascading style sheets; this is used to style HTML, the reason why it is called cascading is because it applies properties going down line by line, so if there are overlaps of certain affected elements than the lowest property will be applied
Just going to talk about CSS in this post, the box model and flexbox that are coming up next will be separate posts!
SETUP AND SYNTAX
CSS is a separate file from and HTML one, and it is more commonly practiced to put all the styling into a CSS file. In HTML, you will have to link it to a CSS file like so: <link href="./style.css" rel="stylesheet"> this is normally put in the head. "style.css" is the name of the CSS file, you can name it whatever you want but style.css seems to be some sort of unspoken default, so I use that too. href refers to the path of the CSS file (./ means the files is in a relative path, because normally the HTML and CSS is in the same folder), while rel refers to the relationship of the HTML and CSS file, in this case it is the stylesheet.
There are 5 different features that a CSS ruleset, or a single block of CSS, shares with the inline CSS that you can do in HTML. There are selectors, the declaration block, the declaration, the property, and the value. This Codecademy page shows the CSS ruleset to CSS inline style conversion of CSS to HTML. Let's break down a CSS ruleset.
h1 {
color: yellow;
}
<!--The selector targets an element, so that's the h1 -->
<!--The declaration block is all the code between the {} brackets -->
<!--The property shows how the element will be changed,
in this case it is the color -->
<!--The value shows how the property will change,
in this it is yellow -->
<!--The declaration consists of the property & value pair
in this case it is color:yellow; -->
If you really want to inline style CSS inside HTML, you just need to add style='declaration' inside an opening tag. You can put multiple declarations if needed. I really don't see the practically when making a new CSS page is much cleaner, the only thing it seems to be meant for is if you're working with a very small HTML page or just want to play around with how something looks (please comment if there are other practical uses for inline styling!). That would look something like <h1 style='color:yellow;'>Why inline styling?</h1>. This is inconvenient because you need to manually input inline CSS into every individual element if you want to target multiple elements. You can however play around this by putting style in the head, and type it out like CSS.
<head>
<style>
h1 {
color: yellow;
font-size: 20px;
}
</style>
</head>
SELECTORS
You can declare a certain type of element to be styled by starting the line of CSS with the element type, followed by brackets, and included inside it would be the declaration for example p{ color: maroon }. If you use an * instead for the selector, this is considered universal and will be applied to everything else. Selectors can also be done going by classes and id's, for these you would have to write them by .class and #id, with a period or hashtag symbol respectively. Another thing to note is that you can add multiple selectors in a row to add more specificity, and the more specific you are it can override other overarching declarations that are less specific. You can also separate multiple elements so that they can share a few similar declarations, but still allow for additional separate declarations.
p {
color: blue;
<!--Normal targeting one element -->
}
.main p {
color: red;
<!--Specified targeting of a p under a main class -->
}
.main, p {
color: yellow;
<!--Targeting both main and p-->
}
ATTRIBUTE
Attributes are how you will make edits to the HTML elements. These include color, width, height, font-style, Flexbox, and so much more. Something you can add to the end of a declaration (but still enclosed by the ; is !important, which will override any style regardless of specificity. A couple of the more complicated attributes to understand was one that I had previously mentioned, Flexbox, as well as the box model, which I will cover in another TIL!
Top comments (0)