CSS - Short Notes(BigBinary)- Ongoing

Class Selectors

To style specific elements, use the class attribute in HTML and prefix the class name with . in CSS.

HTML-

<h1>First Heading</h1>
<h1 class="highlight">Second Heading</h1>
<h1 class="highlight">Third Heading</h1>

CSS-

.highlight {
color: red;
}

Multiple Classes - like <h1 class="title center">The Times of India</h1>, then .title{} and .center{}. Use classes when more common elements present.

style only one element on the page differently, using a class selector is not the best way. We can use the HTML id attribute to select that single element. The # symbol is used before the id name to select it.
Universal selector- *{}
for more freedom in colors - use RGB - e.g.- background-color: rgb(135,206,235);. Using HEX as #rrggbb. HSL color system, colors are represented by three values: Hue, Saturation, and Lightness . e.g.-color: hsl(150, 50%, 70%);
width:90%; - this type of % notation is set relative to its parent value (90% of the parent size)
another way of relative assign- width:2em; - this means 2*width of the parent's. When length is specified using rem, it is calculated based on the font size of the root element of the page, which is the html element(2rem means 2*root-size ). When length is specified using vh, it is calculated based on the window height, also known as viewport height. Viewport is the visible part of a screen. In the example given below, the viewport is the rectangular window given below the code editor and, the div covers it completely with a height of 100vh.(50vh means 50% of the windows).vw works same way as vh but its in width.
outline for setting border or seeing the size of element - e.g.- outline: 1px solid tomato;
max-height property in CSS is used to set the maximum height of an element.( We can see this by setting borders).Similarly max-width ,min-height, min-width are there.
The margin property defines the spacing around an element, E.g.- margin: 12em;. We can separately set margin properties for each side of an element using margin-top, margin-bottom, margin-left and margin-right. Instead of using individual properties for top, bottom, right and left margins, the single margin property can be used to specify different values for each direction.(margin: 10px 20px 30px 40px;)( top, right, bottom, left). margin: auto;-This horizontally centers an element.

If you want to center an element horizontally, use margin: auto; or margin-left: auto; margin-right: auto; (when width is defined).
If you want to push the element to the right, use margin-left: auto;.
If you want to push the element to the left, use margin-right: auto;If you need spacing at the top, use margin: 10px auto 0px;

"padding" property defines the spacing within an element, controlling the space between the content in the element and its boundaries. padding: 30px;- applied to all sides. padding-top, -bottom, -left, -right are also there. Another way - padding: 10px 20px 30px 40px;(top, right, bottom, left-(clockwise)).The margin and padding of an element in percentage value are calculated relative to the width of its parent element.

text formatting-

text color using -color: purple; or hex values or rgb
text-align using left/right/center/justify
text-decoration- underline overline dotted or line through, or none
space between lines of text using the line-height. can be given as a unitless number like 1.5(1.5 times the font size of the element.), 2 etc or in px, em, % or even the keyword normal.
spacing between letters of the text using the letter-spacing - values 0.3em or -3px
size of any text using the font-size property.
font-family property can help us choose which font we want
The font-weight property is used to make text bolder or lighter. values- normal,bold, lighter, bolder or 100,300,900 etc. e.g.-

Normal: 400Medium: 500Semi-Bold: 600Bold: 700Extra-Bold: 800Black (Heavy): 900

Borders-

border properties in CSS are used to create borders around an HTML element.
border: solid 1px blue;, border color: blue; , border-top-style: dotted(only shows top part of border , similarly border-bottom).
The border-style property is used to identify the type of border.( solid, dashed , double, dotted, groove, ridge, inset, outset and none).When it has two values, the first value is applied to the top and bottom borders, and the second value is applied to the right and left borders.

border-width- thickness of border, we can use values like thin, medium or thick or numeric values like 1px. .without the border-style property, the border-width will not work.

combined(width and style) - border-bottom: 2px solid;
border-color: orange; -for color. We can specify one, two, three or four values for border-color for applying different colors on different sides. There are individual properties such as border-top-style, border-right-width, border-bottom-color among others, for styling borders for the specific sides.Can't be used without border style property.
border: 5px dashed red; (width, style, color combined) . style prop is required others are optional. (other e.g. - border-left: 5px solid red; - individual side border shorthand properties)
border-radius property for rounded corner. 50% means circle. Also can have value 2 to 4 (in clockwise direction-top_left, top_right, bottom_right , bottom_left).we can also specify -

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

Background Color -

add a background colour to an HTML element using the background-color property.

image can be added to the background of any element using the background-image.The image link needs to be specified within url('').If the image is small it repeats. To stop repeating use- background-repeat: no-repeat;.To repeat in x-axis ,use- background-repeat: repeat-x;.(similarly for y).

To adjust the image size, we need to use the background-size property.To fully stretch-background-size: cover;. If instead, we want the image to be fully visible, the background size property can be set to contain. Using width and height-background-size: 300px 100px;
By default, the background image starts at the top left corner of its HTML element. This can be changed using the background-position property. e.g.-background-position: left center. For better control, we can use percentages, or pixels.
color gradients (link)-CSS supports three types of gradients:

Linear Gradients-To add linear gradient, we need to specify the direction followed by a list of colors (default is- bottom) .Example-

background: linear-gradient(to top right, red, orange, yellow, white);
padding: 20px;

or

background: linear-gradient(to right,
red 0%,
yellow 80%,
green 90%,
blue 100% );

Radial Gradients-example -

p {
background: radial-gradient(circle at center, red, yellow, blue);
padding: 20px;
}

Conic Gradients-example-background: conic-gradient(violet, indigo, blue, green, yellow, orange, red);

Cursor-

pointer value changes the cursor from an arrow to a hand . e.g.- cursor: pointer;
The cursor property value, not-allowed, helps us disable the cursor , shows like 🚫.But the functionality still works.

Display Property -

Elements like the div and p always start on a new line, and stretch to completely fit in the available width(default value display: block;). But elements like span and a do not create a new line and only take up as much space as needed(they have display: inline as default).We can exchange the value to not behave like default . E.g.- we can make a h and p element appear on one line by adding display: inline; in each's css block.
display: inline-block; for customizable height -width
display: none; - to disappear that block
clearfix - read it here

Position Property-

relative(position: relative;)-default value for the position property is static. When you set an element's position to relative, you can move the element to a new location(top, right, bottom and left). Example-

position: relative;
left: 100px;// pushed from left by 100px
or top: 100px;// pushed from top to down by 100px

The top and left properties appear to work similar to the margin-top and the margin-left properties. But there is a big difference between them.
Let's look at an example. When you set the top property of a relative element to 50px, only that element is shifted by 50px from the top. But if you set the margin-top property to 50px, all the elements below this particular element are also shifted down by 50px. The element with a lower z-index value goes behind the one with a higher z-index.

Absolute- (values- top, right, bottom ,left)- read here- An absolute element's location changes with respect to its parent element. This works only if the parent element has its own position set to a value other than static. If this is not so, the absolute element looks for the nearest parent whose position is set to a value other than static. If no such parent element is found, its location changes with respect to the body itself. more on its height-width.

Fixed- When you set an element's position to fixed, the element stays at the same position even when you scroll away. The top, right, bottom, and left properties are used relative to the browser window/window viewport. E.g.-position: fixed; right:1.5rem; top:1.5rem;(the element is placed at top-right corner of window).

Sticky- When we scroll down, it keeps moving up like any other normal element.But after a while, it stops moving up and behaves like an element fixed in its position until we scroll back up. if "top" off set is 0 then it sticks to absolute top , or it can be varied, example- if top:100px; then the sticky element sticks to top at 100px distance. (behaves normal till reaches to top while scrolling then it sticks to the top even after scrolling).Similarly for bottom, right, left.The sticky element stops being sticky once the page is scrolled such that the element reaches the bottom of its parent element. for all 4's- inset: 10px 20px 30px 40px;(top, right, bottom, left)

Flexbox-

By setting the display property of any element to flex ( that element becomes a flex container and all its immediate child elements become flex items.), the child elements automatically get placed next to each other. Heights of all the blocks are the same. The widths of blocks are proportional to the content within.
Direction- The stacking happens left to right. We can change this with the flex-direction property on the container element. You can use these values - row, row-reverse, column and column-reverse for the flex-direction property.
wrap - By default(nowrap), flexbox arranges items in a single row/column based on flex-direction, causing overflow if items exceed the parent’s width. To prevent this, use flex-wrap to wrap items onto the next row/column.(flex-wrap: wrap;-inside parent)
Justify Content- By default, flex items start at the container's beginning with minimal spacing. In row-reverse, they start from the right; in column, from the top; and in column-reverse, from the bottom. The justify-content property adjusts alignment using values like flex-start, flex-end, center, space-between, space-around, and space-evenly.
Align items(here)- By default the value of this is align-items: stretch; looks like-

but when we set the value to flex-start, flex-end, center, baseline then it reduces(see code) .Use it inside the parent block.

Align-self- only one item to be aligned differently , use it inside that child element only , unlike the previous properties that were applied to the container, this property has to be applied directly to that particular child element. here
flex-grow- the elements will stretch to cover the window , 0 by default but give works when given value any number. Used inside child , only that child grows to fit. If , each of the flex items p1, p2, and p3 has a flex-grow value of 1, which means they will equally share any extra space.
flex-shrink -we can control how much each item shrinks. The value can be any number. If the value is 0, the item does not shrink. High value-> shrink more. Used inside that child .
flex-basis- we can set the initial size of the item. It's possible to set this with the width property too, but flex-basis is a better way to do the same. default value is auto. Values can be specified in relative or absolute units(number, px, %..)

You can set flex-grow, flex-shrink and flex-basis with one single shorthand flex property. This can take one, two or three values separated by spaces:

flex: <flex-grow> (without unit) <flex-shrink>(without unit) <flex-basis>(with unit px or %)

e.g.- flex: 1 1 100px;

Starts at 100px (flex-basis).

Grows evenly if extra space (flex-grow: 1).

Shrinks evenly if space is tight (flex-shrink: 1)

order- which element appearrs after which , default is what is in the HTML order , but we can reorder using- order:3;. The lower the value, the earlier the element appears.

combinator-

We can select an element directly using its class, or id, or the tag name. But sometimes, we need to select elements based on their relationship with other elements. We use ">"(applied only to direct child use more > if nested elements r there). E.g.-
div > p {
color: blue; //here all p elements inside div are selected
}

When we need to select a particular set of child elements, we use the space character like this:

div a ul{
color: orange; //here all a (link) and ul elements inside div are selected
}

another example:

#note p{ font-size:0.9em; color: darkgray; } //rule applies styles to all <p> elements inside an element with the id="note"

immediate next - h1 + p will select a p element that immediately follows an h1 element. The two elements should be on the same nesting level. This means that they should both be the direct child of the same parent.
sibling element that follow a particular element- e.g.- h1~ p means all p siblings of h1 after h1( excluding h1). Similarly, .class ~ h1 means all h1 siblings of .class coming after .class(excluding .class ).

pseudo-classes-

apply styles to an element in a specific state- example - here :hover/:focus is pseudo class

button: hover {
background: green ; }

can also change styles of another element when one element is hovered- div:hover + p {} (here div and p are different elements- siblings, effect shows on p while hovering over div)
:focus class- click or tap on an element, or when you use the tab key .Defaultly outline is blue .it can be changed by using .:focus class, like - button:focus {...}
When you click or tap on an element, it goes into the active state during the click. e.g.- button: active { color: purple; }

Box Shadow-

The box-shadow property in CSS is used to create a shadow effect around an element. Atleast 2 values needed (x-axis ,y-axis). E.g.-box-shadow: 20px 20px;.
example - box-shadow: 10px 15px 8px rgba(0, 0, 0, 0.4); // here, 10px - x, 15px - y, 8px- blur radius, color is optional(default black) . Multiple box shadows can be applied by adding comma. exercise on multi-shadow
inside shadow by inset- box-shadow: inset 10px 10px darkred; .

Opacity-

value between 0.0 and 1.0.0 is fully transparent,1 is fully opaque. When we set the opacity for a parent element, all the child elements also inherit the same value. E.g.- opacity: 0.3;

Transform- It allows you to scale, translate, skew or rotate the elements.

transform: scale(3) ;//(also two value can be used to denote x and y axis, % value can also be used, scaleX and scaleY values are there)
transform: rotate(1rad); - can take value in radian , degree and turn.
skew function can be used to distort an element by a certain angle. ex- transform: skew(30deg, 30deg); //turn unit can also be used, one value means in x- axis, skewX, skewY can also be there.
transform: translate(50px) move to right in x-axis , can also take 2 values for both axes. It used for transformationin 2D .
for 3D - perspective is required. e.g.- transform: perspective(200px) rotateY(60deg); increasing the 200px value will make the object go farther from the screen along Z-axis, rotates around Y axis .

Transition- animate a change-

transition is a short-hand for transition-property(properties to be transformed), transition-duration, transition-timing-function(speed curve of a transition effect are - linear,ease-in, ease-out, ease) and transition-delay.
exmaple -

transition-property: background-color, transform, color;
transition-duration: 0.25s;
transition-timing-function: ease-in;
transition-delay: 0.6s

it's short form -
transition: background-color 0.25s ease-in 0.6s ,
transform 0.25s ease-in 0.6s ,
color 0.25s ease-in 0.6s;

another example-
transition: transform, width, 0.25s ease-in 0.6s; //when using for multiple property , use comma even after the last property (here width ), here time values etc are applied to both transform and width . See it properly.

CSS Reset-

A CSS reset is CSS code that we can put at the top of our own code. The CSS reset code will neutralize any code that the browser wants to add to our webpages. There are some popular CSS Reset stylesheets that you can choose from:

Link Styling-

can be styled in many different ways using properties like color, background-color, border, padding, text-decoration. Example-

#linkID{
padding: 12px 15px;
text-decoration: none;// removes the underline which is there by default .
color: darkgreen;
background-color: lightgreen; }

Spacing around link- can be implemented by - margin- top , margin-bottom. But links have default inline -display property so it is not added directly so before them we have to write - display: inline-block;
styling using state n pseudo-classes- a:active must be specified after a:hover and a:hover must be specified after a:visited for the styles to take effect. example-

a:visited {
color: darkgrey;
}
a:hover {
color: orange;
text-decoration: none;
}
a:active {
color: darkred;
}

List Styling-

(value none can be used to remove the markers from both ul n ol)

for ul-

ul {
list-style-type: circle/ disc/ square;}

for ol - list-style-type: lower-alpha ;(valules can be decimal, upper-alpha, lower-roman and upper-roman)
list-style-image: url('blue-marker.png'); //used to display an image in place of the list item.
list-style-position: inside/outside(default); //more noticiable when using style-type: roman.

Styling Form(INPUT)-

If we use the input selector for styling, the changes will apply to all types of inputs including text input fields, radio buttons, checkboxes, button input types, etc. To style them differently - input[type="value"]
textarea resize- Default value for this property is both which allows resizing in both vertical and horizontal direction. Other accepted values are horizontal, vertical, and none. e.g.- resize: horizontal;

outline:none; to remove the outline of border

Pseudo Class- 2 -

let html-

<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>

css- li:nth-child(odd) {
background-color: #f0f1f6; } // here the odd child of ul which is li element will get selected. we can also use numerical value 1,2 etc in-place of odd, if we want to apply to every 3rd element then write 3n in-place of odd.

if we use li:first-of-type - 1st li element gets selected
When you want to select the 7th element of its type within its parent, or select the first 15 elements or every 3rd element and so on, you can use the :nth-of-type pseudo-class:

a:nth-of-type(even) {
float: right; } // every 2nd element floats to right

:not() pseudo-class is a negation selector which selects those elements that do NOT meet a specific condition. combine :not() with other selectors too. e.g.-

.item:not(.available) {
text-decoration: line-through; //items excluding having class .available
}

another ex

Pseudo Element-

apply styles to a part of an element like the first letter or first line- use pseudo-elements like ::first-line, ::first-letter, ::before and ::after. Ex- #intro::first-line{}
initial-letter -

for this effect- inside first-letter use intial-letter property-

ex- selector::first-letter {
initial-letter: value-1 value-2;

}

value-1 determines the size of the first letter, specified in terms of how many lines it occupies. value-2 helps us control the vertical alignment of the first letter.

add something at the beginning of an element without actually adding it in HTML, you can use the ::before pseudo-element to do so, with the help of the content property. e.g.- content:"A"; inside :: before

CASCADE and SPECIFICITY-

Cascade - applies when rules conflict with each other, if having equal importance then last one wins.
when having different importance , the selector having high specificity wins. rule-

start with 0. Add 1 for each element selector, 10 for each class selector and 100 for each ID selector.

force the importance- !importance rule applies when trying to override one selector. Ex-

.para {
background-color: gray !important; //it'll overwrite id or any other selector
}

VARIABLE-

for using frequently -

--primary-color: blue;
color: var(--primary-color);

when used in root /parent element , it can be accessed by all/child elements (global access) .E.g.- :root{//property-name: property-value;}

NESTING-

.parent {
color: black;
background-color: red;
& span {
color: blue;
}
}

is equivalent to

.parent {
color: black;
background-color: red;
}
.parent span {
color: blue;
}

can be used for class:hover as &:hover, class1 inside class2 then & class1

LAYOUT

use adaptive or responsive

MEDIA QUERY-

CSS flexbox is not sufficient(scrollbar appears when screen is too small)- use this,-

@media screen and (max-width: 630px) {
section {
flex-direction: column;} // For screen widths larger than 630px, the blocks appear next to each other. For screen widths smaller than 630px, the flex-direction gets changed to column. This is why, the blocks get stacked .

media type value can be screen /all/print /speech and a media feature max-width: 630px and its in parenthesis.
breakpoints
@media screen and (orientation:portrait){//changes} // for orientation portrait or landscape
Mobile first approach - use (min-width) and in Desktop first approach use (max-width)
responsive image- set max-width:100% inside img{}
responsive block

Search This Blog

The JK Journal