Scribd
Upload
10 views

CSS

Uploaded by

Smiley Crush
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

CSS

Uploaded by

Smiley Crush
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Selectors:

CSS selectors are used to "find" (or select) the HTML elements you want to
style.

We can divide CSS selectors into five categories:


-Simple selectors:
select elements based on name, id, class, grouping

-Combinator selectors:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

-Pseudo-class selectors:
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

-Pseudo-elements selectors:
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element

-Attribute selectors:
The CSS Attribute Selector selects an element with some specific attribute
or attribute value.
The [attribute] selector is used to select elements with a specified
attribute.

CSS Box Model:


The CSS box model is essentially a box that wraps around every HTML element. It
consists of: content,
padding, borders and margins.
Content - The actual material inside an element, such as text or images.
Padding - The space between the content and the border of an element. It
creates space inside the element.
Border - The line that surrounds the padding and content of an element.
Margin - The space outside the border of an element. It creates space between
the element and other elements around it.

display Property:
The display property is used to specify how an element is shown on a web page.
Every HTML element has a default display value, depending on what type of
element it is.
The default display value for most elements is block or inline.

position Property:
The position property specifies the type of positioning method used for an
element.
There are five different position values:
static:
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and
right properties.
relative:
An element with position: relative; is positioned relative to its normal
position.
Setting the top, right, bottom, and left properties
property will cause it to adjust from its normal position. The other
objects or elements will not fill the gap

fixed:
An element with position: fixed; is positioned relative to the viewport,
which means
it always stays in the same place even if the page is scrolled. The top,
right, bottom,
and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally
have been located.

absolute:
An element with position: absolute; will cause it to adjust its position
with respect to its parent.
If no parent is present, then it uses the document body as parent.

sticky:
An element with position: sticky; is positioned based on the user's scroll
position.
A sticky element toggles between relative and fixed, depending on the
scroll position.
It is positioned relative until a given offset position is met in the
viewport - then it
"sticks" in place (like position:fixed).

z-index Property:
when the element positioned, then overlap the other elements.
The z-index property specifies the stack order of an element.
An element can have a positive or negative stack order.

Overflow:
The overflow property specifies whether to clip the content or to add
scrollbars when
the content of an element is too big to fit in the specified area.

float and clear:


The float property is used for positioning and formatting content
e.g. let an image float left to the text in a container.
clear:
When we use the float property, and we want the next element below (not on
right or left),
we will have to use the clear property.

Pseudo-classes vs Pseudo-elements

Opacity / Transparency:
The opacity property specifies the opacity/transparency of an element.
The opacity property can take a value from 0.0 - 1.0. The lower the value, the
more transparent:

CSS Media Queries:


Media query is a CSS technique introduced in CSS3 extended by CSS2
It uses the @media rule to include a block of CSS properties only if a certain
condition is true.
Display flex and grid
-In CSS, we use Flexbox, a layout model that offers us a variety of ways to
arrange the element and
helps us align the element in CSS. With Flexbox's help, we can design
responsive and dynamic webpage
or user interface layouts.
-One – Dimensional layout
grid:
The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to
design web pages without having to use floats and positioning.
-Two– Dimensional layout

Viewport:
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than
on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer
screens, and it was common
for web pages to have a static design and a fixed size.

Css3 features:
-Transitions and Animations
-Transformations
-Media Queries
-Gradients
-Custom Fonts and Web Fonts
-Opacity and RGBA Colors
-Border-Radius and Box-Shadow
-Multiple Backgrounds
-Text Effects
-Filters

SCSS

SCSS Advantages:
-Variables
-Nesting
-Partials
-Inheritance

You might also like