Scribd
Upload
47 views

CSS3 Modules

The document discusses several ways to add styles to HTML elements using CSS, including: 1. Embedded CSS using the <style> element to define styles internal to the page. 2. Inline CSS using the style attribute of elements to apply styles locally. 3. External CSS linking to an external .css file using the <link> element to define styles in a separate file. 4. CSS comments for adding comments to style sheets using /* */ syntax.

Uploaded by

Soni Soniya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

CSS3 Modules

The document discusses several ways to add styles to HTML elements using CSS, including: 1. Embedded CSS using the <style> element to define styles internal to the page. 2. Inline CSS using the style attribute of elements to apply styles locally. 3. External CSS linking to an external .css file using the <link> element to define styles in a separate file. 4. CSS comments for adding comments to style sheets using /* */ syntax.

Uploaded by

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

CSS

Embedded CSS - The <style> Element


<!DOCTYPE html>

<html>

<head>

<style type = "text/css" media = "all">

body {

background-color: linen;

h1 {

color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Inline CSS - The style Attribute


You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic
syntax –

<element style = "...style rules....">

<html>

<head>

</head>

<body>

<h1 style = "color:#36C;">

This is inline CSS

</h1>

</body>

</html>
External CSS - The <link> Element

The <link> element can be used to include an external stylesheet file in your HTML document.

An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can
include this file in any HTML document using <link> element.

Here is the generic syntax of including external CSS file –

Example

Consider a simple style sheet file with a name mystyle.css having the following rules −

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

Now you can include this file mystyle.css in any HTML document as follows −

<head>

<link type = "text/css" href = "mystyle.css" media = " all" />

</head>

CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet.
You can simple put your comments inside /*.....this is a comment in style sheet.....*/.

You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.

Example

<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red;

/* This is a single-line comment */

text-align: center;

/* This is a multi-line comment */

</style>

</head>
<body>

<p>Hello World!</p>

</body>

</html>

CSS - Backgrounds

This chapter teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an
element −

The background-color property is used to set the background color of an element.

The background-image property is used to set the background image of an element.

The background-repeat property is used to control the repetition of an image in the background.

The background-position property is used to control the position of an image in the background.

The background-attachment property is used to control the scrolling of an image in the background.

The background property is used as a shorthand to specify a number of other background properties.

body {

background-image: url("/css/images/css.jpg");

background-color: #cccccc;

background-repeat: repeat;

background-repeat: repeat-y;

background-position:100px;

background-position:100px 200px;

background-repeat: no-repeat;

background-attachment: fixed;

Eg:-
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url('/css/images/css.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-attachment:scroll;

</style>
</head>

<body>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>

</body>

</html>

CSS – Fonts

This chapter teaches you how to set fonts of a content, available in an HTML element. You can set following font properties of an
element −The font-family property is used to change the face of a font.

The font-style property is used to make a font italic or oblique.

The border-style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border


• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The font-variant property is used to create a small-caps effect.

(Possible values are normal and small-caps.)

The font-weight property is used to increase or decrease how bold or light a font appears.

(Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.)

The font-size property is used to increase or decrease the size of a font.

(xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.)

<p style = "font-stretch:ultra-expanded;">

Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-
expanded, expanded, extra-expanded, ultra-expanded.
CSS – Text

This chapter teaches you how to manipulate text using CSS properties. You can set following text properties of an element −

The color property is used to set the color of a text.

The direction property is used to set the text direction.

The letter-spacing property is used to add or subtract space between the letters that make up a word.

The word-spacing property is used to add or subtract space between the words of a sentence.

The text-indent property is used to indent the text of a paragraph.

The text-align property is used to align the text of a document.

The text-decoration property is used to underline, overline, and strikethrough text.

The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

The white-space property is used to control the flow and formatting of text.

The text-shadow property is used to set the text shadow around a text.

Eg:-

<p style = "color:red;">

<p style = "direction:rtl;">

<p style = "letter-spacing:5px;">

<p style = "word-spacing:5px;">

<p style = "text-indent:1cm;">

<p style = "text-align:right;">

<p style = "text-decoration:underline;">

<p style = "text-decoration:line-through;">

<p style = "text-decoration:overline;">

<p style = "text-decoration:blink;">

<p style = "text-transform:capitalize;">

<p style = "text-transform:uppercase;">

<p style = "text-transform:lowercase;">

<p style = "text-shadow:4px 4px 8px blue;">

CSS - Using Images

Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use
good images wherever required.

CSS plays a good role to control image display. You can set the following image properties using CSS.

The border property is used to set the width of an image border.

The height property is used to set the height of an image.

The width property is used to set the width of an image.

The -moz-opacity property is used to set the opacity of an image.

<html>

<head>

</head>
<body>

<img style = "border:0px;" src = "/css/images/logo.png" /> <br />

<img style = "border:3px dashed red;" src = "/css/images/logo.png" /><br>

<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" /> <br />

<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />

<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />

</body>

</html>

CSS – Links

This chapter teaches you how to set different properties of a hyper link using CSS. You can set following properties of a hyper link −

We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

The :link signifies unvisited hyperlinks.

The :visited signifies visited hyperlinks

The :hover signifies an element that currently has the user's mouse pointer hovering over it.

The :active signifies an element on which the user is currently clicking.

Eg:-

<style type = "text/css">

a:link {color: #000000}

a:visited {color: #006600}

a:hover {color: #FFCC00}

a:active {color: #FF00CC}

</style>

Example:-

<html>

<head>

<style type = "text/css">

a:link {color:#000000}

a:visited {color: #006600}

a:hover {color: #FFCC00}

a:active {color: #FF00CC}

</style>

</head>

<body>

<a href = "">Link</a>

</body>
</html>

CSS – Tables

You can set following properties of a table −

The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or
whether each cell should maintain its style.

The border-spacing specifies the width that should appear between table cells.

The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You
use the caption-side property to control the placement of the table caption.

The empty-cells specifies whether the border should be shown if a cell is empty.

The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column
rather than having to load the whole table before rendering it.

Example:-

<html>

<head>

<style type = "text/css">

table.one {border-collapse:collapse;}

table.two {border-collapse:separate;}

td.a {

border-style:dotted;

border-width:3px;

border-color:#000000;

padding: 10px;

td.b {

border-style:solid;

border-width:3px;

border-color:#333333;

padding:10px;

</style>

</head>

<body>

<table class = "one">

<caption>Collapse Border Example</caption>

<tr><td class = "a"> Cell A Collapse Example</td></tr>

<tr><td class = "b"> Cell B Collapse Example</td></tr>

</table>
<br />

<table class = "two">

<caption>Separate Border Example</caption>

<tr><td class = "a"> Cell A Separate Example</td></tr>

<tr><td class = "b"> Cell B Separate Example</td></tr>

</table>

</body>

</html>

Eg:-2

<html>

<head>

<style type = "text/css">

table.one {

border-collapse:separate;

width:400px;

border-spacing:10px;

table.two {

border-collapse:separate;

width:400px;

border-spacing:10px 50px;

</style>

</head>

<body>

<table class = "one" border = "1">

<caption>Separate Border Example with border-spacing</caption>

<tr><td> Cell A Collapse Example</td></tr>

<tr><td> Cell B Collapse Example</td></tr>

</table>

<br />

<table class = "two" border = "1">

<caption>Separate Border Example with border-spacing</caption>

<tr><td> Cell A Separate Example</td></tr>

<tr><td> Cell B Separate Example</td></tr>

</table>
</body>

</html>

The caption-side Property

The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table.

This property can have one of the four values top, bottom, left or right. The following example uses each value.

<html>

<head>

<style type = "text/css">

caption.top {caption-side:top}

caption.bottom {caption-side:bottom}

caption.left {caption-side:left}

caption.right {caption-side:right}

</style>

</head>

<body>

<table style = "width:400px; border:1px solid black;">

<caption class = "top">

This caption will appear at the top

</caption>

<tr><td > Cell A</td></tr>

<tr><td > Cell B</td></tr>

</table>

<br />

<table style = "width:400px; border:1px solid black;">

<caption class = "bottom">

This caption will appear at the bottom

</caption>

<tr><td > Cell A</td></tr>

<tr><td > Cell B</td></tr>

</table>

<br />

<table style = "width:400px; border:1px solid black;">

<caption class = "left">

This caption will appear at the left

</caption>

<tr><td > Cell A</td></tr>


<tr><td > Cell B</td></tr>

</table>

<br />

<table style = "width:400px; border:1px solid black;">

<caption class = "right">

This caption will appear at the right

</caption>

<tr><td > Cell A</td></tr>

<tr><td > Cell B</td></tr>

</table>

</body>

</html>

********************************************

CSS3 modules
CSS3 is collaboration of CSS2 specifications and new specifications, we can called this collaboration is module. Some of the modules are
shown below −

CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of
rounded corners is as follows −

#rcorners7 {

border-radius: 60px/15px;

background: #FF0000;

padding: 20px;

width: 200px;

height: 150px;

Sr.No. Value & Description

1 border-radius Use this element for setting four boarder radius property

2 border-top-left-radius Use this element for setting the boarder of top left corner

3 border-top-right-radius Use this element for setting the boarder of top right corner

4 border-bottom-right-radius Use this element for setting the boarder of bottom right corner

5 border-bottom-left-radius

Use this element for setting the boarder of bottom left corner

Example:-

<html>

<head>

<style>

#rcorners1 {

border-radius: 25px;
background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

#rcorners2 {

border-radius: 25px;

border: 2px solid #8AC007;

padding: 20px;

width: 200px;

height: 150px;

#rcorners3 {

border-radius: 25px;

background: url(/https/www.scribd.com/css/images/logo.png);

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

</style>

</head>

<body>

<p id = "rcorners1">Rounded corners!</p>

<p id = "rcorners2">Rounded corners!</p>

<p id = "rcorners3">Rounded corners!</p>

</body>

</html>

Example:2

<html>

<head>

<style>

#rcorners1 {

border-radius: 15px 50px 30px 5px;

background: #a44170;
padding: 20px;

width: 100px;

height: 100px;

#rcorners2 {

border-radius: 15px 50px 30px;

background: #a44170;

padding: 20px;

width: 100px;

height: 100px;

#rcorners3 {

border-radius: 15px 50px;

background: #a44170;

padding: 20px;

width: 100px;

height: 100px;

</style>

</head>

<body>

<p id = "rcorners1"></p>

<p id = "rcorners2"></p>

<p id = "rcorners3"></p>

</body>

<body>

CSS Border image property is used to add image boarder to some elements.you don't need to use any HTML code to call boarder image.A
sample syntax of boarder image is as follows –

#borderimg {

border: 10px solid transparent;

padding: 15px;

Sr.No. Value & Description

1 border-image-source Used to set the image path

2 border-image-slice Used to slice the boarder image

3 border-image-width Used to set the boarder image width

4 border-image-repeat Used to set the boarder image as rounded, repeated and stretched
Eg:-

<html>

<head>

<style>

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

border-image-source: url(/https/www.scribd.com/css/images/border.png);

border-image-repeat: round;

border-image-slice: 30;

border-image-width: 10px;

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

border-image-source: url(/https/www.scribd.com/css/images/border.png);

border-image-repeat: round;

border-image-slice: 30;

border-image-width: 20px;

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

border-image-source: url(/https/www.scribd.com/css/images/border.png);

border-image-repeat: round;

border-image-slice: 30;

border-image-width: 30px;

</style>

</head>

<body>

<p id = "borderimg1">This is image boarder example.</p>

<p id = "borderimg2">This is image boarder example.</p>

<p id = "borderimg3">This is image boarder example.</p>

</body>

</html>
Multi Background
CSS Multi background property

#multibackground {

background-image: url(/https/www.scribd.com/css/images/logo.png), url(/https/www.scribd.com/css/images/border.png);

background-position: left top, left top;

background-repeat: no-repeat, repeat;

padding: 75px;

Sr.No. Value & Description

1 background Used to setting all the background image properties in one section

2 background-clip Used to declare the painting area of the background

3 background-image Used to specify the background image

4 background-origin Used to specify position of the background images

5 background-size Used to specify size of the background images

<html>

<head>

<style>

#multibackground {

background-image: url(/https/www.scribd.com/css/images/logo.png), url(/https/www.scribd.com/css/images/border.png);

background-position: left top, left top;

background-repeat: no-repeat, repeat;

padding: 75px;

</style>

</head>

<body>

<div id = "multibackground">

<h1>www.abc.com</h1>

<p>

ABc originated from the idea that there exists a class of

readers who respond better to online content and prefer to learn new

skills at their own pace from the comforts of their drawing rooms.

The journey commenced with a single tutorial on HTML in 2006 and elated

by the response it generated, we worked our way to adding fresh tutorials

to our repository which now proudly flaunts a wealth of tutorials and


allied articles on topics ranging from programming languages to web designing

to academics and much more..

</p>

</div>

</body>

</html>

Size of Multi background

Multi background property is accepted to add different sizes for different images.A sample syntax is as shown below −

#multibackground {

background: url(/https/www.scribd.com/css/imalges/logo.png) left top no-repeat, url(/https/www.scribd.com/css/images/boarder.png) right bottom no-repeat, url(/https/www.scribd.com/css/images/css.gif)
left top repeat;

background-size: 50px, 130px, auto;

CSS3 Colors

CSS3 has Supported additional color properties as follows −

RGBA colors

RGBA stands for Red Green Blue Alpha.It is an extension of CSS2,Alpha specifies the opacity of a color and parameter number is a
numerical between 0.0 to 1.0. A Sample syntax of RGBA as shown below −

Eg:- #d1 {background-color: rgba(255, 0, 0, 0.5);}

HSL colors

HSL stands for hue, saturation, lightness.Here Huge is a degree on the color wheel, saturation and lightness are percentage values
between 0 to 100%

Eg:- #g1 {background-color: hsl(120, 100%, 50%);}

HSLA colors

HSLA stands for hue, saturation, lightness and alpha. Alpha value specifies the opacity as shown RGBA. A Sample syntax of HSLA as
shown below –

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}

Eg:-

<html>

<head>

<style>

#p1 {background-color:rgba(255,0,0,0.3);}

#p2 {background-color:rgba(0,255,0,0.3);}

#p3 {background-color:rgba(0,0,255,0.3);}

</style>

</head>
<body>

<p>RGBA colors:</p>

<p id = "p1">Red</p>

<p id = "p2">Green</p>

<p id = "p3">Blue</p>

</body>

</html>

Eg2:-

<html>

<head>

<style>

#g1 {background-color:hsl(120, 100%, 50%);}

#g2 {background-color:hsl(120,100%,75%);}

#g3 {background-color:hsl(120,100%,25%);}

</style>

</head>

<body>

<p>HSL colors:</p>

<p id = "g1">Green</p>

<p id = "g2">Normal Green</p>

<p id = "g3">Dark Green</p>

</body>

</html>

CSS3 – Gradients

What is Gradients?

Gradients displays the combination of two or more colors as shown below –

Types of gradients

Linear Gradients(down/up/left/right/diagonally)

Radial Gradients

Linear gradients

Linear gradients are used to arrange two or more colors in linear formats like top to bottom.

Top to bottom

<html>

<head>

<style>
#grad1 {

height: 100px;

background: -webkit-linear-gradient(pink,green);

background: -o-linear-gradient(pink,green);

background: -moz-linear-gradient(pink,green);

background: linear-gradient(pink,green);

</style>

</head>

<body>

<div id = "grad1"></div>

</body>

Left to right

<html>

<head>

<style>

#grad1 {

height: 100px;

background: -webkit-linear-gradient(left, red , blue);

background: -o-linear-gradient(right, red, blue);

background: -moz-linear-gradient(right, red, blue);

background: linear-gradient(to right, red , blue);

</style>

</head>

<body>

<div id = "grad1"></div>

</body>

</html> </html>

Diagonal

Diagonal starts at top left and right button.


<html>

<head>

<style>

#grad1 {

height: 100px;

background: -webkit-linear-gradient(left top, red , blue);

background: -o-linear-gradient(bottom right, red, blue);

background: -moz-linear-gradient(bottom right, red, blue);

background: linear-gradient(to bottom right, red , blue);

</style>

</head>

<body>

<div id = "grad1"></div>

</body>

</html>

Multi color

<html>

<head>

<style>

#grad2 {

height: 100px;

background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);

background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);

background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);

background: linear-gradient(red, orange, yellow, red, blue, green,pink);

</style>

</head>

<body>

<div id = "grad2"></div>

</body>

</html>

CSS3 Radial Gradients

Radial gradients appears at center.


<html>

<head>

<style>

#grad1 {

height: 100px;

width: 550px;

background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);

background: -o-radial-gradient(red 5%, green 15%, pink 60%);

background: -moz-radial-gradient(red 5%, green 15%, pink 60%);

background: radial-gradient(red 5%, green 15%, pink 60%);

</style>

</head>

<body>

<div id = "grad1"></div>

</body>

</html>

CSS3 – Shadow

CSS3 supported to add shadow to text or elements.Shadow property has divided as follows −

Text shadow

Box Shadow

Text shadow

CSS3 supported to add shadow effects to text. Following is the example to add shadow effects to text −

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px;

h2 {

text-shadow: 2px 2px red;

h3 {

text-shadow: 2px 2px 5px red;

h4 {
color: white;

text-shadow: 2px 2px 4px #000000;

h5 {

text-shadow: 0 0 3px #FF0000;

h6 {

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

p{

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

</style>

</head>

<body>

<h1> abc.com </h1>

<h2>abc.com</h2>

<h3> abc.com </h3>

<h4> abc.com</h4>

<h5>abc.com</h5>

<h6>abc.com</h6>

<p>abc.com</p>

</body>

</html>

Box shadow(Div)

Used to add shadow effects to elements, Following is the example to add shadow effects to element.

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: red;

box-shadow: 10px 10px;


}

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div>

</body>

</html>

CSS3 – Text

CSS3 contained several extra features, which is added later on.

text-overflow

word-wrap

word-break

There are following most commonly used property in CSS3 −

Sr.No. Value & Description

1 text-align-last Used to align the last line of the text

2 text-emphasis Used to emphasis text and color

3 text-overflow used to determines how overflowed content that is not displayed is signaled to users

4 word-break Used to break the line based on word

5 word-wrap Used to break the line and wrap onto next line

Eg:-

Text-overflow

The text-overflow property determines how overflowed content that is not displayed is signaled to users. the sample example of text
overflow is shown as follows −

<html>

<head>

<style>

p.text1 {

white-space: nowrap;

width: 500px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

p.text2 {

white-space: nowrap;

width: 500px;

border: 1px solid #000000;


overflow: hidden;

text-overflow: ellipsis;

</style>

</head>

<body>

<b>Original Text:</b>

<p>

ABC originated from the idea that there exists a class ofreaders who respond better to online content and prefer to learn new

skills at their own pace from the comforts of their drawing rooms.

</p>

<b>Text overflow:clip:</b>

<p class = "text1">

ABC originated from the idea that there exists a class of readers who respond better to online content and prefer

to learn new skills at their own pace from the comforts of their

drawing rooms.

</p>

<b>Text overflow:ellipsis</b>

<p class = "text2">

ABC originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.

</p>

</body>

</html>

CSS3 Word Breaking

Used to break the line, following code shows the sample code of word breaking.

<html>

<head>

<style>

p.text1 {

width: 140px;

border: 1px solid #000000;

word-break: keep-all;

p.text2 {

width: 140px;
border: 1px solid #000000;

word-break: break-all;

</style>

</head>

<body>

<b>line break at hyphens:</b>

<p class = "text1">

ABC originated from the idea that there exists a class of readers who respond better to online content and prefer

to learn new skills at their own pace from the comforts of their drawing rooms. </p>

<b>line break at any character</b>

<p class = "text2">

ABC originated from the idea that there exists a class of readers who respond better to online content and

prefer to learn new skills at their own pace from the comforts of their drawing rooms.

</p>

</body>

</html>

CSS3 - 2d Transforms

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.

The following table has contained common values which are used in 2D transforms −

Sr.No. Value & Description

1 matrix(n,n,n,n,n,n) Used to defines matrix transforms with six values

2 translate(x,y) Used to transforms the element along with x-axis and y-axis

3 translateX(n) Used to transforms the element along with x-axis

4 translateY(n) Used to transforms the element along with y-axis

5 scale(x,y) Used to change the width and height of element

6 scaleX(n) Used to change the width of element

7 scaleY(n) Used to change the height of element

8 rotate(angle) Used to rotate the element based on an angle

9 skewX(angle) Used to defines skew transforms along with x axis

10 skewY(angle) Used to defines skew transforms along with y axis

Rotate 20 degrees

Box rotation with 20 degrees angle as shown below −

<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Abc&xyz.com
</div>

<div id = "myDiv">
ABC & XYZ.com
</div>
</body>
</html>
Rotate -20 degrees

Box rotation with -20 degrees angle as shown below −


Live Demo

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: pink;

border: 1px solid black;

div#myDiv {

/* IE 9 */

-ms-transform: rotate(-20deg);

/* Safari */

-webkit-transform: rotate(-20deg);

/* Standard syntax */

transform: rotate(-20deg);

</style>

</head>

<body>

<div>

ABC&XYZ.com

</div>

<div id = "myDiv">

ABC&xyz.com

</div>

</body>

</html>
CSS BOX Model

Eg:-

<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 25px;

padding: 35px;

width: 200px;

background-color: lightseagreen;

border: 20px dashed indianred;

</style>

</head>

<body>

<div>

Content demo box<br/>

</div>

</body>

</html>
Style examples

<!-- <html>

<head>

<style>

header.page-header {

background: no-repeat left/cover url(images/images13.jpg);

display: flex;

height: 120px;

min-width: 120px;

align-items: center;

color: #fff;

text-shadow: #000 0 0 .2em;

header.page-header > h1 {

font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive,

fantasy;

margin: 2%;

main {

font: 1rem 'Fira Sans', sans-serif;

</style>

</head>

<body>

<header class="page-header">

<h1>Cute Puppies Express!</h1>

</header>

<main>
<p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>

</main>

</body>

</html> -->

<!--

<html>

<article>

<header>

<h2>The Planet Earth</h2>

<p>

Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by

Jane Smith

</p>

</header>

<p>

We live on a planet that's blue and green, with so many things still unseen.

</p>

<p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>

</article>

</html> -->

<!-- Article tag example -->

<html>

<head>

<style>

.forecast {

margin: 0;

padding: .3rem;

background-color: #eee;
font: 1rem 'Fira Sans', sans-serif;

.forecast > h1,

.day-forecast {

margin: .5rem;

padding: .3rem;

font-size: 1.2rem;

.day-forecast {

background: right/contain content-box border-box no-repeat

url('/media/examples/rain.svg') white;

.day-forecast > h2,

.day-forecast > p {

margin: .2rem;

font-size: 1rem;

</style>

</head>

<body>

<article class="forecast">

<h1>Weather forecast for Seattle</h1>

<article class="day-forecast">

<h2>03 March 2018</h2>

<p>Rain.</p>

</article>

<article class="day-forecast">

<h2>04 March 2018</h2>

<p>Periods of rain.</p>

</article>

<article class="day-forecast">

<h2>05 March 2018</h2>


<p>Heavy rain.</p>

</article>

</article>

</body>

</html>

<!-- Nav tag example -->

<html>

<head>

<style>

nav {

border-bottom: 1px solid black;

.crumbs ol {

list-style-type: none;

padding-left: 0;

.crumb {

display: inline-block;

.crumb a::after {

display: inline-block;

color: #000;

content: '>';

font-size: 80%;

font-weight: bold;

padding: 0 3px;

</style>
</head>

<body>

<nav class="crumbs">

<ol>

<li class="crumb"><a href="#">Bikes</a></li>

<li class="crumb"><a href="#">BMX</a></li>

<li class="crumb">Jump Bike 3000</li>

</ol>

</nav>

<h1>Jump Bike 3000</h1>

<p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>

</body>

</html>

You might also like