CSS All Topics

Learn CSS: Basics to Advanced Concepts

1. CSS Selectors
2. Pseudo-classes and Pseudo-elements
3. CSS Text Styling
4. CSS Table
5. CSS Position
6. CSS Background
7. CSS Box Model
8. CSS Styling Lists
9. CSS Flexbox
10. CSS Grid
11. CSS Content(Dynamic

INTRODUCTION TO CSS

To specify formatting within an HTML document (fonts, layout, background,

colours, etc. ), authors have to apply separate tags to different parts to format.
The term CSS pertains to Cascading Style Sheets, which are used to specify
your document's style. While HTML is utilized for structuring a web page (the
headlines and paragraphs, as well as the ability to include images, video, and
other elements), CSS specifies your page layout, colors, and fonts. CSS is used
to bring style to your web pages.
TYPES OF CSS:
There are 3 types of CSS
1. External CSS
2. Internal CSS
3. Inline CSS
1. External CSS: For using an external style sheet, your .html files need to
include a header section that links to an external style sheet. Since the CSS
code is in a separate document, your HTML files will have a cleaner structure
and are smaller in size.
You can use the same .css file for multiple
pages. For example:

2. Internal CSS: These CSS instructions are written directly into the
header of a specific .html page. This CSS style is an effective method of
styling a single page.
For example:

3. Inline CSS: Lastly, inline styles are CSS blocks that are written directly
into a single instance of HTML code.
For example:

The most efficient way of implementing CSS on a website is to use external

style sheets, whereas internal style sheets and inline styles are suitable for
case-by- case changes.
What is CSS Syntax?
CSS syntax is relatively simple. Various attributes, such as font size and
background colour, are assigned values within the brackets following the name
of the element to style, called the CSS selector.
What are CSS Selectors?
A CSS property value pattern is a pattern of elements, such as HTML elements,
that instruct the browser which elements to select when applying the CSS
property values.

Learn CSS: Basics to Advanced Concepts

1. CSS Selectors
COMMAND DESCRIPTION SYNTAX

UNIVERSAL The CSS

SELECTOR universal
selector (*)
matches
elements of any {}

type. When
utilising
@namespace,
universal
selectors can be
namespaced.
ID SELECTOR The CSS ID
selector
matches an
element based
on the value of id {}
the element’s id
attribute. This is
what you'd use
to refer to that
one- of-a-kind
element with an
id.
CLASS The CSS class
SELECTOR selector matches
elements based .class {}

on the contents
of their class.
2. seudo-classes and Pseudo-elements
A pseudo-class is used to define a special state of an element. A CSS
pseudo-element is used to style specified parts of an elemen
COMMANDS DESCRIPTION SYNTAX

Mouse Triggered when the

over user hovers over
selector an element with
the cursor. You can
use the hover a:hover {}

selection to target
an element that a
user hovers over
with their cursor.

Active Link The :active

Selector pseudo- class is
commonly used
on <a> and a:active {}
<button>
elements. When a
link is clicked, you
can provide a
style for it with
this selector.
Focus Triggered when
Selecto the user clicks or
r taps on an input:focus {}

element or selects
it with the
keyboard's Tab
key.
Visited Represents that
Links the link has
Selecto already been :visited {}
r visited. Its styles
for URLs that the
user has already
 visited are
defined.
Link This represents
Selector that the link has .class:link {}

not yet
3. CSS Text Styling

COMMAND DESCRIPTION SYNTAX

Font style It sets the font style.

We can set our text
as normal, bold,
italic, oblique as per font-style: normal |
italic | oblique
our requirement

It sets the font

variation. We can set
Font Variant the variant of the
font as uppercase or
lowercase,
small-caps etc as per
required by the user.
font-variant: normal
Sets the font weight. | small-caps
It helps us to set the
weight of the font as
normal, bold, bolder
lighter and we can
Font also set it in
Weight numerics.

font-weight: normal
| bold | bolder |
4. CSS Table

COMMAND DESCRIPTION SYNTAX

Adding The CSS border

Borders to property is the best
Tables way to define the
borders for the border: 1px solid
black;
tables.

You may easly use

the CSS padding
Adjusting property to provide
spacing inside additional space
Tables between the table
cell contents and the
cell borders.
th, td {padding:
The width and 15px;}
height CSS
properties can also
be used to specify
the table's width and
Setting Table height, as well as
Width and the width and height
Height of its cells.

table {width: 100%;}

| th {height:
5. CSS Position

COMMAND DESCRIPTION SYNTAX

Position Set the

position of
the position: static | relative |
absolute
elements in
a document.

Position Defines the

Propertie position of
top | right | bottom | left
s an element
in a
document.
Float Defines the
Elemen position of
t an element
in a float: left | right | none
document
text and
inline
elements to
wrap around.
Clear Whether an
Floating element must
Elements be moved
below
clear: none | left | right | both
(cleared)
floating
elements that
precede it.

Z Index Sets
overlapping
elements with
 a larger z- z-index: 3 | auto | inherit
index cover
those with a

6. CSS Backgroun
7.
8.
9.

COMMANDS DESCRIPTION SYNTAX

Background Sets the

Image background image
in a div. An
element's background-image: url()
background-image
attribute specifies
one or more
background
images.
Background Sets whether the
Repeat background is to
be repeated or not,
in other words, it
background-repeat: repeat-x
determines |
whether or not the
background picture
will be repeated.

Background Sets the

Attachment background image
scroll or fixed. CSS's
 background- background-attachment:
attachment scroll

attribute controls
how the
background moves
in relation to the
viewport.
Background Set the
Color background colour background-color: #2AA9E0
of the div or
container.
Background Sets the position
Position of the
background-position: top |
ri
background.
Different properties and how it works:

10. CSS Box Model

COMMAND DESCRIPTION SYNTAX

Box Sizing Sets the width and

height of the box.
Building CSS layouts
with the box-sizing
property may be a lot box-sizing:
border-box |
more straightforward. content-box

Sets the margin from

all the sides of the
box. This CSS tutorial
Margin explains how to use
the CSS property
called margin with
syntax and examples.

Sets the area inside

the box from the margin: 2px 4px 6px
8px | 0 auto | i
content. CSS's
box-sizing attribute
determines how the
box model is applied
Padding to the element to
which it applies.

Sets the colour

padding: 2px 4px 6px

8px | 100% | in

Border
For example, in the following code,

The output will look like the below:

For this code

Output for the above code looks like the below:

11. CSS Styling Lists

12. CSS Flexbox

COMMAND DESCRIPTION SYNTAX

Flex Sets how flex

Directio items are
flex-direction: row | row-reverse | co
n placed in the
flex container.
Flex Wrap Sets whether
flex items are
forced onto
flex-wrap: nowrap | wrap | wrap-revers
one line or
can wrap
onto multiple
lines.
Justify Defines how
Content the browser
distributes
space
justify-content: flex-start | flex-end
between
and around
content
items.

Align It sets the

Items align-self
value on all
gn-items: flex-start | flex-end | cent
direct
children as
a group.

Align Sets the

Content distribution of
space align-content: flex-start | flex-end |
between and
around
content.
Let's understand flexbox with an example:

utput:

13. CSS Grid

COMMAND DESCRIPTION SYNTAX

Grid Specifies the

Template size of the
Columns columns, and
d-template-columns: 40px 50px auto
how many 50p

columns are
in a grid
layout.

Grid Specifies the

Template size of the grid-template-rows: 25% 100px auto
Rows rows in a grid
layout.
Grid Specifies how
 Template to display
Areas columns and grid-template-areas: "a b c" | none
rows, using
named grid
items.

Grid Property for

Template defining grid
grid-template: "a a a" 20% "b b b"
columns, aut

rows, and
areas.

Grid Sets the size

Column of the gap grid-template: "a a a" 20% "b b b"
aut
Gap between
columns.

HOW A GIRD LOOKS LIKE:

14. CSS Content(Dynamic)

COMMAND DESCRIPTION SYNTAX

CSS Used in other

Variable declarations --variable-name: value

using the var()

function.

Variable Used in other

Usage declarations var(--variable-name)

using the var()

function.

Counter Create a new

Reset counter or
reversed
counter with counter-reset: name-of-counter

the given
name on the
specified
element.

Counter Increases or
Increment decreases the
value of a CSS counter-increment:
name-of-counter
counter by a
given.

Counter Adjust the

Dynamic appearance of
Value content based content: counter(name-of-counter)

on its location
in a
document.