CSS — Part-1

Eishta Mittal

9 min readMay 14, 2022

CSS stands for Cascading Style Sheets

CSS Syntax

CSS Selectors

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

Simple Selectors

The CSS element Selector

p {
  text-align: center;
  color: red;
}

The CSS id Selector

// css
#para1 {
  text-align: center;
  color: red;
}// html<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

The CSS class Selector

.center {
  text-align: center;
  color: red;
}//html<p class="center">Red and center-aligned paragraph.

More specific, elements with a class will be affected

p.center {
  text-align: center;
  color: red;
}

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

* {
  text-align: center;
  color: blue;
}

The CSS Grouping Selector

h1, h2, p {
  text-align: center;
  color: red;
}

How To Add CSS

External CSS
Internal CSS
Inline CSS

External CSS

<head>
  <link rel="stylesheet" href="mystyle.css">
</head>

Internal CSS

<head>
<style>
  h1 {
    color: maroon;
    margin-left: 40px;
  }
</style>
</head>

Inline CSS

<h1 style="color:blue;text-align:center;">This is a heading</h1>

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default

CSS Backgrounds

background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)

div {
  background-color: green;
  opacity: 0.3;
}

Using RGBA

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

background-image

body {
  background-image: url("paper.gif");
}

background-repeat

the background-image property repeats an image both horizontally and vertically so to display it the way we want , we can use th ebackground-repeat to change it to the desired behaviour.
Values: — repeat, repeat-x, repeat-y, no-repeat

background-attachment

specifies whether the background image should scroll or be fixed
default-value : scroll
values: — scroll. fixed, local, initial, inherit

body {
  background-image: url("img_tree.gif");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

background-clip

defines how far the background (color or image) should extend within an element.
default : border-box
values: content-box, padding-box, border-box

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-position

sets the starting position of a background image.
deafult-value : 0% 0%
values:- left top , left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, xpos ypos, x% y%

background — Shorthand

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

can be written as: -

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.

Border Style

can be dotted, dashed, solid, double, none, hidden etc.
it can have 4 values:- for the top border, right border, bottom border, and the left border

p {border-style: dotted;}

Border Width

specifies the width of the four borders.
can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick ex:- 5px, medium etc.
can have 4 values: -for the top border, right border, bottom border, and the left border

border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */\border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

Border Color

can be set with name, HEX, RGB, HSL, transparent
can have from one to four values (for the top border, right border, bottom border, and the left border

border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */

Border Style

there are also properties for specifying each of the borders (top, right, bottom, and left)

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

can have 4 values for the 4 sides

Border — Shorthand Property

border property- border-width border-style border-color

p {
  border: 6px solid red;
}

Rounded Borders

p {
  border: 2px solid red;
  border-radius: 5px;
}

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

Individual sides- margin-top, margin-right, margin-bottom, margin-left
values : — auto , length, %, inherit
-ve values are allowed

margin: 25px 50px 75px 100px; /* top-25px,right-50px,bottom-75px,left- 100px*/margin: 25px 50px 75px; /* top-25px,right,left- 50px,bottom-75px*/margin: 25px 50px;  /* top,bottom-25px, right,left- 50px */

- auto horizontally centers the element within its container.

Margin Collapse

Sometimes two margins collapse into a single margin.
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins
This does not happen on left and right margins! Only top and bottom margins!

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Individual sides- padding-top, padding-right, padding-bottom, padding-left
values : — length, %, inherit
-ve values are not allowed

padding: 25px 50px 75px 100px; /* top-25px,right-50px,bottom-75px,left- 100px*/padding: 25px 50px 75px; /* top-25px,right,left- 50px,bottom-75px*/padding: 25px 50px;  /* top,bottom-25px, right,left- 50px */padding: 25px; /* top, bottom, right, left- 50px */

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
you can use the box-sizing property to fix this.
The width of the container will be 300px in total

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Content — The content of the box, where text and images appear
Padding — Clears an area around the content. The padding is transparent
Border — A border that goes around the padding and content
Margin — Clears an area outside the border. The margin is transparent

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px

Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”. It can be used same as Border.

CSS has the following outline properties:

outline-style
outline-color
outline-width
outline-offset
outline

Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

p {
  margin: 30px;
  border: 5px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Text Color

The color property is used to set the color of the text.

body {
  color: blue;
}

Text Alignment

text-align
text-align-last
direction
unicode-bidi
vertical-align

Text Alignment — text-align

set the horizontal alignment of a text
default: left
Values:- left, right, center, justify
“justify” — each line is stretched so that every line has equal width, and the left and right margins are straight

Text Align Last

specifies how to align the last line of a text.

// css
p.a {
  text-align-last: right;
}
// html<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

Text Direction

The direction and unicode-bidi properties can be used to change the text direction of an element

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Vertical Alignment

sets the vertical alignment of an element

img.a {
  vertical-align: baseline;
}<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>

Text Decoration

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

text-decoration-line

adds a decoration line to text
values: overline, line-through, underline

text-decoration-color

set the color of the decoration line.
values: colors name, RGB, HSL

text-decoration-style

Same as border style and same values

text-decoration-thickness

can be auto or a value

The text-decoration: none; is used to remove the underline from links

a {
  text-decoration: none;
}

Text Transformation

specify uppercase and lowercase letters in a text
values: uppercse, lowercase, capitalize

Text Spacing

Text Indentation

specify the indentation of the first line of a text

p {
  text-indent: 50px;
}

Letter Spacing

specify the space between the characters in a text

h1 {
  letter-spacing: 5px;
}

Line Height

used to specify the space between lines

p.extrabig {
  line-height: 0.8;
}

Word Spacing

used to specify the space between the words in a text

p.one {
  word-spacing: 10px;
}

normal vs p with class one

White Space

specifies how white-space inside an element is handled.

p {
  white-space: nowrap;

Text Shadow

adds shadow to text.
specify the horizontal shadow (2px) and the vertical shadow (2px)

h1 {
  text-shadow: 2px 2px;
}

add red color to it

h1 {
  text-shadow: 2px 2px red;
}

add a blur effect (5px) to the shadow

h1 {
  text-shadow: 2px 2px 5px red;
}

Sources:

https://www.w3schools.com/css/default.asp