CSS3
Css Basics
*{
Margin:0px;
Quick Reference—CSS3 Properties
CSS: --
To write
css in the 3 ways
1.
Inline css
(it works only single element)
Eg:
<h1 style=”background-color:red;text-align:center;border:solid 1px
#000”>
Welcome to inline css
</h1>
<p style=”background-color:red;text-align:center;border:solid 1px
#000”>
Eg 2
Exp 2
</p>
<table style=”bgcolor:yellow”>
</table>
<h1 style=”background-color:red;text-align:center;border:solid 1px
#000”>
Welcome to inline css
</h1>
2.
Internal css
(it works single page)
The
internal css to write in the header section of the page
<head>
<style>
H1 {
background-color:red;
text-align:center;
border:solid 1px #000;
}
</style>
</head>
3.
External css
(what are the css to write in the external format those css to apply more
then one page)
The external css to write in separate page, the file to save file name.css
The external css to link html
page we use LINk element
Eg:
<head>
<link href=”externalcss.css”
rel=”stylesheet”>
</head>
Main key features: -
1. Selectors
(it’s identification of the group
of css attributes and properties )
a. Global selector
(What are the attributes and
properties to write by using global selector those attributes and properties
it’s effected all elements in the page)
Syntax:
*{
Here to write group of attributes
and properties
}
Example:
*{Margin:0px;
Padding:0px;
Border:0px;
}
b. Html element selector
(to write attributes and
properties by using any html element selector)
Syntax :
H1 {
Here group of attributes and
properties
}
p {
Here group of attributes and
properties
}
Div {
Here group of attributes and
properties
}
Etc..
Example:
H1 {
Background-color:#f1f1f1;
Color:#000;
Border:solid 1px #000;
}
div {
Background-color:#f1f1f1;
Width:100px;
Height:100px;
Border:solid 1px #000;
}
c. User define selector
(the selector identification to
define in the custom format of the user)
User define selectors are 2 types
i.
ID
Selector ( # )
ii.
Class
Selector ( . )
Syntax for id:
#mycustomid {
Here to write attributes and properties
}
<div id=”mycustomid”>……………………………..</div>
Syntax for class:
.mycustomid {
Here to write attributes and properties
}
<div
class=”mycustomid”>…………………….</div>
d. Multi selector
(the group of attribute and
properties to apply more than one selector we use multi selectors)
Syntax:
H1, p, div, form, table, #mycustomid,
.mycustomclass {
Here to write group of attributes
and properties
}
Example:
H1, p, div, form, table,
#mycustomid, .mycustomclass {
Font-family:verdana;
Color:#000;
}
e. Attribute selectors
(The group of attributes and
properties to apply the particular attrite in a element we use attribute
selectors)
Syntax:
Input [type=text] {
Here group of attributes and
properties
}
Input [placeholoder] {
Here group of attributes and
properties
}
Input [type=password] {
Here group of attributes and
properties
}
Img [alt] {
Here group of attributes and
properties
}
Div p:fist-line {
Here group of attributes and
properties
}
Ul li:last-child {
Here group of attributes and
properties
}
Example:
Input [type=text] {
Font-size:20px;
Height:20px;
Border:solid 1px #f1f1f1;
}
2. Attributes
3. Properties
Attributes and properties are
dependent selectors
Help this to specify behavior of the selector
Principal for
write attributes and properties : -
1. ( - ) to more than one keyword in the
attribute
Exp:
Background-color:
red;
List-style-type:
none;
2. To link attribute and properties with the
help of ( : )
Exp:
Color
: red
Size
: 20px
3. to close one attribute and property by
using ( ; )
Color : red ;
Size : 20px ;
4. the property it there more then one key word
to use double quote ( “ “ )
exp:
font-family:
”times new roman”;
CSS regular
attributes and properties: -
1.
Margin
(To maintain outside space of the container
we use margins)
The
margins to apply in all directions à
Left, Right, Top, Bottom, Auto
2.
Padding
(to maintain inside space of the container
we use padding)
The padding to apply in all direction of
the container
(Left, Right, Top, Bottom)
Eg:
Padding:10px 10px 10px 10px;
(Top, right, bottom, left)
Padding:10px;
(all sides 10px;)
Padding:10px 50px;
(top, bottom =10)
(left, right=50)
Padding-left:10px;
Padding-right:20px;
3.
Float
(to coordinate the container in the
particular direction we use float)
The coordination’s are float:left and
float:right;
Exp:
float:right;
4.
Width à
to specify the container width (Maser units à
Pixel, percentage)
5.
Height à to specify the container height (Maser units à Pixel, percentage)
Example :
Width: 100%;
Height: 100px;
6.
Background-color / Background-image / Background
à help this attribute to
add solid color / Multi Color / pattern / Picture
Example
:
background:#FFC;
background:url(bg.jpg);
background-size:100%;
7.
Font-family à
to add font styles / models
8.
Font-size à
to Specify the size of the text
Exp:
font-size:50px;
font-family:verdana;
9.
Line-height à
To specify space between the lines
Exp:
Line-height:100px;
10.
Border à
to add border of the container (slide, dotted, dashed)
11.
Colorà
to apply only solid text color
Exp:
Color:#f90;
...........................................*********************..........................................................
Quick Reference—CSS3 Properties
CSS3 provides new
properties to create visual and dynamic effects that are an essential part of
the web these days.
border-radius
This property
generates rounded corners for box elements. It has two different
parameters that shape
every corner of the box. The first parameter determines the horizontal
curve and the second
the vertical curve, providing the possibility of creating an ellipsis. Using
just one value will
shape the corners equally (e.g., border-radius: 20px). A
value for each
corner may be
declared, clockwise, from top-left to bottom-left. To declare both parameters
of
the curve, the values
must be separated with a slash (e.g., border-radius: 15px / 20px).
box-shadow
This property creates
shadows for box elements. It may take five parameters: the
color, the horizontal
offset, the vertical offset, the blur effect, and the inset keyword
to
generate the shadow
inside the element. The offsets may be negative, and the blur and inset
values are optional
(e.g., box-shadow: #000000 5px 5px 10px inset).
text-shadow
This property is
similar to box-shadow but specific for texts. It takes four
parameters: the
color, the horizontal offset, the vertical offset, and the blur effect (e.g., textshadow:#000000
5px 5px 10px).
@font-face
This rule will let
you load and use any font you want. First you have to create the
font, providing a
name with the font-family property and the file with src (e.g.,
@font-face
{ font-family:
Myfont; src: url('fontfile.ttf') }). After this, you will be
able to assign
the font (in the
example, Myfont) to any element in the document.
linear-gradient(start position, from color, to color)
This function may be
applied to the background or background-image property
to generate a linear gradient. The attributes indicate the starting point and
the colors used to create the gradient. The first value can be specified in pixels,
in a percentage or using the keywords top, bottom, left and right.
The starting position may be replaced by an angle to provide a specific
direction for the gradient (e.g., lineargradient(top, #FFFFFF 50%, #006699
90%);).
radial-gradient(start position, shape, from color, to color)
This function may be
applied to the background or background-image property
to generate a radial gradient. The start position is the origin and can be
declared either as pixels, as percentage or as a combination of the keywords center, top, bottom, left and right.
There are two values for the shape: circle and ellipse,
and the color stops indicate the color and the position where transitions start
(e.g.,radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);).
rgba()
This function is an
improvement of the previous rgb(). It will take four values:
the red
color (0-255), the
green color (0-255), the blue color (0-255), and the opacity (a value between
0 and 1).
hsla()
This function is an
improvement of the previous hsl(). It will take four values:
the hue
(a value between 0
and 360), the saturation (a percentage), the lightness (a percentage), and the
opacity (a value
between 0 and 1).
Outline
This property has
been improved by the addition of another property called outlineoffset.
Both properties
combined generate a second border away from the first one (e.g.,
outline: 1px
solid #000000; outline-offset: 10px;).
border-image
This property creates
a border with a custom image. It needs a border set previously with the
property border or border-with, and it takes at least three
parameters: the URL of the image, the size of the pieces that will be taken
from that image to build the border and a keyword that specifies how those
pieces will be placed (e.g., border-image: url ("file.png") 15 stretch;).
Transform
This property
modifies the shape of an element. It uses four basic functions: scale,
rotate, skew,
and translate. The function scale takes
only one value. A negative value inverts
the element, a value
between 0 and 1 reduces the element, and a value greater than 1 expands
the element (e.g., transform:
scale(1.5);). The function rotate uses only one value
expressed
in degrees to rotate
the image (e.g., transform: rotate(20deg);). The function skew has
two
values, also in
degrees, for horizontal and vertical transformation (e.g., transform:
skew(20deg,
20deg);).
The function translate moves the object as many pixels as
specified by its two
parameters (e.g.,
transform: translate(20px);).
Transition
This property can be
applied to other properties to create a transition between two
status of an element.
It takes up to four parameters: the property affected, the time it takes from
start to end, a
keyword to declared how the transition will be made (ease, linear, ease-in,
ease-out, ease-in-out)
and a delay for the time to take the transition to start (e.g., transition:
color 2s linear 1s;).
Comments
Post a Comment