Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

CSS Notes by Sadanand

Uploaded by

ybuddiestech
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

CSS Notes by Sadanand

Uploaded by

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

CSS NOTES

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

CSS is a language used to describe the presentation of a web page, including colors, layout, and fonts. It
allows you to apply styles to HTML elements to create visually appealing websites.

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 style sheets 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 the head 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

Displays an element as an inline-level block


container. The element itself is formatted as an
inline-block 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 centimeters

mm millimeters

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

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

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

pc picas (1pc = 12 pt)

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
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

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 / center / 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