Scribd
Upload
117 views10 pages

CSS Notes by Iron Coding

The document provides an overview of CSS including what CSS is, how to insert CSS styles, CSS selectors, properties like background, color, text, box model and positioning, units, and advanced topics like flexbox, media queries, transitions, transforms, and animations.

Uploaded by

chetandhapola44
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
117 views10 pages

CSS Notes by Iron Coding

The document provides an overview of CSS including what CSS is, how to insert CSS styles, CSS selectors, properties like background, color, text, box model and positioning, units, and advanced topics like flexbox, media queries, transitions, transforms, and animations.

Uploaded by

chetandhapola44
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
You are on page 1/ 10

CSS NOTES BY IRON CODING

CSS is the language we use to style a Web page.

What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

CSS Syntax

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

External CSS
Internal CSS
Inline CSS

External CSS
An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you canchange the look of an entire Web site by changing one file. Each page must link
to the style sheet using the <link>tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" href="mystyle.css">
</head>

Internal Style Sheet


An internal style sheet should be used when a single document has a unique style. You define
internal styles in thehead section of an HTML page, by using the <style> tag, like this:

<head>
<style>
body {
background-color: linen;
}

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

Inline Styles
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.

<p style="color:red;">This is a paragraph.</p>

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
PROPERTIES IN CSS
CSS Background Property
The CSS background properties are used to add background effects for elements.

div {
background-color: lightblue;
}

Color Systems
RGB color: rgb(255, 0, 0);
Hex color: #ff0000;
RGBA rgba(255, 99, 71, 0) last zero use for transparency

Color Systems
1. text-decoration: text-decoration: underline/overline/line-through
2. font-weight: font-weight : normal / bold / bolder / lighter OR font-weight : 100-900
3. font-family: font-family : arial
4. line-height: line-height : 2px OR line-height OR line-height : 3 line-height : normal
5. text-transform: text-transform : uppercase / lowercase / capitalize / none

CSS Box Model


The CSS box model is essentially a box that wraps around every HTML element. It consists of:
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

Demonstration of the box model:

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

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.
The display property is used to change the default display behavior of HTML elements.

inline Displays an element as an inline element

block Displays an element as a block element

inline-block Displays an element as an inline-level


block container. The element itself is
formatted as an inline element, but you
can apply height and width values

none The element is completely removed

CSS Units
CSS has several different units for expressing a length.

There are two types of length units: absolute and relative.

Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that
size.

Unit Description

cm centimetersTry it

mm millimetersTry it

in inches (1in = 96px = 2.54cm)Try it

px * pixels (1px = 1/96th of 1in)Try it

pt points (1pt = 1/72 of 1in)Try it

pc picas (1pc = 12 pt)


Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale
better between different rendering mediums.

Unit Description

em Relative to the font-size of the element (2em


means 2 times the size of the current font)

ex Relative to the x-height of the current font


(rarely used)

ch Relative to width of the "0" (zero)

rem Relative to font-size of the root element

vw Relative to 1% of the width of the viewport*

vh Relative to 1% of the height of the viewport*

vmin Relative to 1% of viewport's* smaller


dimension

vmax Relative to 1% of viewport's* larger dimension

% Relative to the parent element

Main units are px, %, rem, em

Position Property
The position property specifies the type of positioning method used for an element.

There are five different position values:

static - default position (The top, right, bottom, left, and z-index properties have no
effect)
relative - element is relative to itself. (The top, right, bottom, left, and z-index will work)
absolute - positioned relative to its closest positioned ancestor. (removed from the flow)
fixed - positioned relative to browser. (removed from flow)
sticky - positioned based on user's scroll position
z-index
It decides the stack level of elements

z-index : auto (0)


z-index : 1 / 2 / ...
z-index : -1 / -2 / ...

Background Image
Used to set an image as background

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

Background Size
background-size : cover / contain / auto

CSS Flexbox
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure
without using float or positioning.
Flexbox Direction
It sets how flex items are placed in the flex container, along which axis and direction.

flex-direction : row; (default)


flex-direction : row-reverse;
flex-direction : column;
flex-direction : column-reverse;

Flex Properties for Flex Container


justify-content : alignment along the main axis.
flex-start / flex-end / centre / space-evenly /
flex-wrap : nowrap / wrap / wrap-reverse
align-items : alignment along the cross axis.
align-content : alignment of space between & around the content along cross-axis

Flex Properties for Flex Item


align-self : alignment of individual along the cross axis.
flex-grow : how much a flex item will grow relative to the rest of the flex items if space is
available
flex-shrink : how much a flex item will shrink relative to the rest of the flex items if space is
available

CSS Media Queries


Help create a responsive website

The following exapmle shows that when screen width will be 480px then body means webpage
background color changes to lightgreen.

@media screen and (width: 480px) {


body {
background-color: lightgreen;
}
}

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide
or wider (if the viewport is less than 480 pixels, the background-color will be pink):

@media screen and (min-width: 480px) {


body {
background-color: lightgreen;
}
}

The following example shows a menu that will float to the left of the page if the viewport is 480
pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

@media screen and (min-width: 480px) {


#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}

CSS Transitions
Transitions enable you to define the transition between two states of an element.

transition-property : property you want to transition (font-size, width etc.)


transition-duration : 2s / 4ms ..
transition-timing-function : ease-in / ease-out / linear / steps ..
transition-delay : 2s / 4ms ..

Transition Shorthand

property name | duration | timing-function | delay

transition: font-size 2s ease-in-out 0.2s;


CSS Transform
Used to apply 2D & 3D transformations to an element

translate() transform: translate(50px, 100px);


rotate() transform: rotate(20deg);
scaleX() transform: scaleX(2);
scaleY() transform: scaleY(3);
scale() transform: scale(2, 3);
skew() transform: skew(20deg);
skewX() transform: skewX(20deg);
skewY() transform: skewY(20deg);

CSS Animations
CSS allows animation of HTML elements without using JavaScript!

Firstly we have to set keyframes for animation.

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

now we have to apply this keyframe in an element with some animation properties

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Animation Properties
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count animation-direction

Animation Shorthand

animation : myName 2s linear 3s infinite normal

You might also like