Scribd
Upload
3 views3 pages

Beginner's Guide to CSS Basics

The document provides an introduction to CSS (Cascading Style Sheets), explaining its purpose in styling HTML elements for web pages. It covers CSS syntax, methods of insertion, selectors, color properties, background properties, box model, text design, layout options, and positioning. Additionally, it highlights important CSS concepts relevant for WordPress development, such as Flex Box and Grid system.

Uploaded by

muktadirhossainrabbi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Beginner's Guide to CSS Basics

The document provides an introduction to CSS (Cascading Style Sheets), explaining its purpose in styling HTML elements for web pages. It covers CSS syntax, methods of insertion, selectors, color properties, background properties, box model, text design, layout options, and positioning. Additionally, it highlights important CSS concepts relevant for WordPress development, such as Flex Box and Grid system.

Uploaded by

muktadirhossainrabbi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Learn CSS as a Beginner

What is CSS?
●​ CSS stands for Cascading Style Sheets.
●​ CSS describes how HTML elements are to be displayed on the screen.
●​ CSS is used to define styles for your web pages, including the design,
layout, and variations in display for different devices and screen sizes.
●​ External stylesheets are stored in CSS files.

CSS Syntax:

Three Ways to Insert CSS:


1.​ External CSS
2.​ Internal CSS
3.​ Inline CSS

CSS Selectors:
1.​ CSS universal selector- *{}
2.​ element - p{}
3.​ Id- #id{}
4.​ Class - .class{}
5.​ [Link]/class- [Link]{}
CSS Color:
1.​ Text Color
2.​ Background color
3.​ Border color
4.​ Color Function: ​
RGB, RGBA, HEX, HSLA

CSS Background:
❖​ background-color
❖​ Background-image => URL(“path”)
❖​ Background-repeat => no-repeat, repeat-x
❖​ Background-attachment => Fixed, Scroll
❖​ Background-position =>
❖​ background (shorthand property)-{all in one line}
❖​ Opacity / Transparency

CSS Box-Model :

❖​ CSS Margin
❖​ CSS Padding
❖​ CSS outline
❖​ Height
❖​ Width
❖​ Box shadow

CSS Text design :


●​ Text-align
●​ Direction
●​ Vertical-align
●​ Font
●​ Text Transformation
●​ Text shadow effect
●​ CSS Text Spacing => text-indent
letter-spacing
line-height
word-spacing
White-space

CSS Layout :
●​ Display option: Block, Inline, None
●​ visibility: hidden;

CSS Position:​
Learn It Deeply from W3 school.

CSS Layout Important For WordPress :


1.​ Z-index
2.​ CSS Flex Box
3.​ CSS Grid system
4.​ CSS Pseudo-classes
5.​ CSS Pseudo-elements
6.​ CSS The ! important Rule
7.​ CSS Transitions

You might also like