CSS Notes
(Article In progress)
Description: Preserving my css notes in the form of Linkedin article
- Browsers have internal stylesheets containing default styles. Check how to remove browser styles. We can also have other list style types.
li
{
list-style-type: none;
}
//Other list types
list-style-type: space-counter;
list-style-type: disc;
list-style-type: circle;
list-style-type: \1F44D;
Styling things based on their location in a document
Styling things based on state
a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
Combining selectors and combinators
/* selects any <span> that is inside a <p>, which is inside an <article> */
article p span {
}
/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */
h1 + ul + p {
}
/*This will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>. Phew!*/
body h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}
Specificity
Later styles replace conflicting styles that appear earlier in the stylesheet. This is the cascade rule.
specificity : between class and tag , tag will have more specificity
CSS consists of two components: Properties(font-size, width ect) & values
CSS declaration blocks are paired with selectors to produce CSS rulesets (or CSS rules).
body h1 + p .special
color: yellow;
background-color: black;
padding: 5px;
}{
CSS properties and values are case-insensitive.
If a property is unknown, or if a value is not valid for a given property, the declaration is processed as invalid. It is completely ignored by the browser's CSS engine.
In CSS (and other web standards), it has been agreed that US spelling is the standard where there is language variation or uncertainty. For example, colour should be spelled color, as colour will not work.
Functions
In the case of the calc() example below, the values define the width of this box to be 90% of the containing block width, minus 30 pixels.
<div class="outer">
<div class="box">The inner box is 90% - 30px.</div>
</div>
.outer {
border: 5px solid black;
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}
Transform function
<div class="box"></div>
.box
{
margin: 30px;
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn);
}
@rules
CSS @rules provide instruction for what CSS should perform or how it should behave.
@import "styles2.css";
@import imports a stylesheet into another CSS stylesheet:
@media, which is used to create media queries. Media queries use conditional logic for applying CSS styling.
the below stylesheet defines a default pink background for the <body> element. However, a media query follows that defines a blue background if the browser viewport is wider than 30em.
body
{
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
Shorthands
- Shorthand properties set several values in a single line. ex : font, background, padding, border, and margin
/* In 4-value shorthands like padding and margin, the values are applied
in the order top, right, bottom, left (clockwise from the top). There are also other
shorthand types, for example 2-value shorthands, which set padding/margin
for top/bottom, then left/right */
padding: 10px 15px 15px 5px;
is equivalent to these four lines of code:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
is equivalent to these five lines
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
Align to the left
Align in the middle
Resize to full width
Align to the right
Add a link to the embedded image
Add alt textDelete image
This is how CSS actually works
What happens if a browser encounters CSS it doesn't understand?
If browser encounters a selector that it doesn't understand, it will just ignore the whole rule and move on to the next one.
Use fall back mechanism for new features of CSS. For below case calc will be ignored for old browsers
.box {
width: 500px;
width: calc(100% - 50px);
}
Types of Selectors
Type, class, and ID selectors
Attribute selectors
1. For the links which have title attribute
2. Make a selection based on the presence of an attribute with a particular value
3. selects paragraphs that are direct children of <article> elements using the child combinator (>):
#1
a[title] {
}
#2
a[href="https://example.com"]
{
}
#3
a:hover {
}
#4
p::first-line {
}
#5
article > p {
}
Specificity
An element selector is less specific; it will select all elements of that type that appear on a page, so it has less weight. Pseudo-element selectors have the same specificity as regular element selectors.
A class selector is more specific; it will select only the elements on a page that have a specific class attribute value, so it has more weight. Attribute selectors and pseudo-classes have the same weight as a class.
Inheritance
Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren't.
For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.
CSS provides five special universal property values for controlling inheritance. Every CSS property accepts these values.
Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".
Sets the property value applied to a selected element to the initial value of that property.
Resets the property value applied to a selected element to the browser's default styling rather than the defaults applied to that property. This value acts like unset in many cases.
Resets the property value applied to a selected element to the value established in a previous cascade layer.
Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial.
<style>
body {
color: green;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}
<style>
<body>
<ul>
<li>Default <a href="#">link</a> color</li>
<li class="my-class-1">Inherit the <a href="#">link</a> color</li>
<li class="my-class-2">Reset the <a href="#">link</a> color</li>
<li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>
</body>
Resetting all property values
.fix-this {
all: unset;
}
- Inline styles, that is, the style declaration inside a style attribute, take precedence over all normal styles, no matter the specificity.
The box model
- Boxes have an inner display type and an outer display type.
outer display type
If a box has an outer display type of block, then:
The box will break onto a new line.
Padding, margin and border will cause other elements to be pushed away from the box.
If width is not specified, the box will extend in the inline direction to fill the space available in its container. In most cases, the box will become as wide as its container, filling up 100% of the space available.
Some HTML elements, such as <h1> and <p>, use block as their outer display type by default.
If a box has an outer display type of inline, then:
The box will not break onto a new line.
Top and bottom padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
Left and right padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
Some HTML elements, such as <a>, <span>, <em> and <strong> use inline as their outer display type by default.
Inner display type
Block and inline layout is the default way things behave on the web. By default and without any other instruction, the elements inside a box are also laid out in normal flow and behave as block or inline boxes.
You can change the inner display type for example by setting display: flex;. The element will still use the outer display type block but this changes the inner display type to flex. Any direct children of this box will become flex items and behave according to the Flexbox specification.