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

CSS Tutorial

The document provides information about CSS (Cascading Style Sheets) including its uses, syntax, selectors, and different types (inline, internal, external). CSS is used to style and design HTML elements and web pages. Some key points covered include: - CSS is used to control the look and formatting of HTML elements using declarations like color, font-size, etc. - CSS rules contain selectors that specify elements to style and declaration blocks with properties and values. - Common selectors include element, id, class, and universal selectors. - Styles can be defined inline, internally in <style> tags, or externally in .css files.

Uploaded by

Vaijayanthi S
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
60 views

CSS Tutorial

The document provides information about CSS (Cascading Style Sheets) including its uses, syntax, selectors, and different types (inline, internal, external). CSS is used to style and design HTML elements and web pages. Some key points covered include: - CSS is used to control the look and formatting of HTML elements using declarations like color, font-size, etc. - CSS rules contain selectors that specify elements to style and declaration blocks with properties and values. - Common selectors include element, id, class, and universal selectors. - Styles can be defined inline, internally in <style> tags, or externally in .css files.

Uploaded by

Vaijayanthi S
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

CSS Tutorial

CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology.
Our CSS tutorial is developed for beginners and professionals. The major points of CSS
are given below:

o CSS stands for Cascading Style Sheet.


o CSS is used to design HTML tags.
o CSS is a widely used language on the web.
o HTML, CSS and JavaScript are used for web designing. It helps the web designers
to apply style on HTML tags

CSS Example with CSS Editor

In this tutorial, you will get a lot of CSS examples, you can edit and run these examples
with our online CSS editor tool.

1. <!DOCTYPE>  
2. <html>  
3. <head>  
4. <style>  
5. h1{  
6. color:white;  
7. background-color:red;  
8. padding:5px;  
9. }  
10. p{  
11. color:blue;  
12. }  
13. </style>  
14. </head>  
15. <body>  
16. <h1>Write Your First CSS Example</h1>  
17. <p>This is Paragraph.</p>  
18. </body>  
19. </html>  
Output

CSS Syntax
A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations


separated by a semicolon. For the above example, there are two declarations:

1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border


etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

1. Selector{Property1: value1; Property2: value2; ..........;}  

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute
etc.

There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector


The element selector selects the HTML element by name.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. p{       text-align: center;       color: blue;   }   
6. </style>  
7. </head>  
8. <body>  
9. <p>This style will be applied on every paragraph.</p>  
10. <p id="para1">Me too!</p>  
11. <p>And me!</p>  
12. </body>  
13. </html>    
Output

This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. #para1 {  
6.     text-align: center;  
7.     color: blue;  
8. }  
9. </style>  
10. </head>  
11. <body>  
12. <p id="para1">Hello Javatpoint.com</p>  
13. <p>This paragraph will not be affected.</p>  
14. </body>  
15. </html>    

Output:

Hello Javatpoint.com
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. .center {  
6.     text-align: center;  
7.     color: blue;  
8. }  
9. </style>  
10. </head>  
11. <body>  
12. <h1 class="center">This heading is blue and center-aligned.</h1>  
13. <p class="center">This paragraph is blue and center-aligned.</p>   
14. </body>  
15. </html>  

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element


If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.

Let's see an example.


1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. p.center {  
6.     text-align: center;  
7.     color: blue;  
8. }  
9. </style>  
10. </head>  
11. <body>  
12. <h1 class="center">This heading is not affected</h1>  
13. <p class="center">This paragraph is blue and center-aligned.</p>   
14. </body>  
15. </html>   

Output

This heading is not affected

This paragraph is blue and center-aligned.

4) CSS Universal Selector


The universal selector is used as a wildcard character. It selects all the elements on the
pages.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. * {  
6.    color: green;  
7.    font-size: 20px;  
8. }   
9. </style>  
10. </head>  
11. <body>  
12. <h2>This is heading</h2>  
13. <p>This style will be applied on every paragraph.</p>  
14. <p id="para1">Me too!</p>  
15. <p>And me!</p>  
16. </body>  
17. </html>    

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!

5) CSS Group Selector


The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.

Let's see the CSS code without group selector.

1. h1 {  
2.     text-align: center;  
3.     color: blue;  
4. }  
5. h2 {  
6.     text-align: center;  
7.     color: blue;  
8. }  
9. p {  
10.     text-align: center;  
11.     color: blue;  
12. }  

As you can see, you need to define CSS properties for all the elements. It can be
grouped in following ways:

1. h1,h2,p {  
2.     text-align: center;  
3.     color: blue;  
4. }  

Let's see the full example of CSS group selector.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. h1, h2, p {  
6.     text-align: center;  
7.     color: blue;  
8. }  
9. </style>  
10. </head>  
11. <body>  
12. <h1>Hello Javatpoint.com</h1>  
13. <h2>Hello Javatpoint.com (In smaller font)</h2>  
14. <p>This is a paragraph.</p>  
15. </body>  
16. </html>  

Output:

Hello Javatpoint.com
Hello Javatpoint.com (In smaller font)

This is a paragraph.
Types of CSS
CSS is added to HTML pages to format the document according to information in the
style sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS

1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.

For example:

1. <p style="color:blue">Hello CSS</p>  

For more visit here: Inline CSS

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the
elements of the page. It is written inside the style tag within head section of html.

For example:

1. <style>  
2. p{color:blue}  
3. </style>  

For more visit here: Internal CSS


3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the
CSS code in a css file. Its extension must be .css for example style.css.

For example:

1. p{color:blue}  

You need to link this style.css file to your html pages like this:

1. <link rel="stylesheet" type="text/css" href="style.css">  

The link tag must be used inside head section of html.

Inline CSS
We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method
mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>    

Example:

1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>  
2. <p>This paragraph is not affected.</p>  
Test it Now

Output:

Inline CSS is applied on this heading.

This paragraph is not affected.


Disadvantages of Inline CSS
o You cannot use quotations within inline CSS. If you use quotations the browser will
interpret this as an end of your style value.
o These styles cannot be reused anywhere else.
o These styles are tough to be edited because they are not stored at a single place.
o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
o Inline CSS does not provide browser cache advantages.

Internal CSS
The internal style sheet is used to add a unique style for a single document. It is defined
in <head> section of the HTML page inside the <style> tag.

Example:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. body {  
6.     background-color: linen;  
7. }  
8. h1 {  
9.     color: red;  
10.     margin-left: 80px;  
11. }   
12. </style>  
13. </head>  
14. <body>  
15. <h1>The internal style sheet is applied on this heading.</h1>  
16. <p>This paragraph will not be affected.</p>  
17. </body>  
18. </html>  
Output

The internal style sheet is applied on this


heading.
This paragraph will not be affected.

External CSS
The external style sheet is generally used when you want to make changes on multiple
pages. It is ideal for this condition because it facilitates you to change the look of the
entire web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head
section.

Example:

1. <head>  
2. <link rel="stylesheet" type="text/css" href="mystyle.css">  
3. </head>  

The external style sheet may be written in any text editor but must be saved with a .css
extension. This file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css

1. body {       background-color: lightblue;   }  


2. h1 {      color: navy;  
3.     margin-left: 20px;  
4. }   

Note: You should not use a space between the property value and the unit. For example:
It should be margin-left:20px not margin-left:20 px.
CSS Comments
CSS comments are generally written to explain your code. It is very helpful for the users
who reads your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/ .

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. p {  
6.     color: blue;  
7.     /* This is a single-line comment */  
8.     text-align: center;  
9. }   
10. /* This is  
11. a multi-line  
12. comment */  
13. </style>  
14. </head>  
15. <body>  
16. <p>Hello Javatpoint.com</p>  
17. <p>This statement is styled with CSS.</p>  
18. <p>CSS comments are ignored by the browsers and not shown in the output.</p>  
19. </body>  
20. </html>   

Output:

Hello Javatpoint.com

This statement is styled with CSS.

CSS comments are ignored by the browsers and not shown in the output.
CSS Background
CSS background property is used to define the background effects on element. There
are 5 CSS background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. h2,p{  
6.     background-color: #b0d4de;  
7. }  
8. </style>  
9. </head>  
10. <body>  
11. <h2>My first CSS page.</h2>  
12. <p>Hello Javatpoint. This is an example of CSS background-color.</p>  
13. </body>  
14. </html>   
Output:

My first CSS page.

Hello Javatpoint. This is an example of CSS background-color.

2) CSS background-image
The background-image property is used to set an image as a background of an element.
By default the image covers the entire element. You can set the background image for a
page like this.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. body {   background-image: url("paper1.gif");   margin-left:100px;   }  
6. </style>  
7. </head>  
8. <body>  
9. <h1>Hello Javatpoint.com</h1>  
10. </body>  
11. </html>       
Output

Note: The background image should be chosen according to text color. The bad
combination of text and background image may be a cause of poor designed and not
readable webpage.
CSS background-repeat
By default, the background-image property repeats the background image horizontally
and vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. body {  
6.     background-image: url("gradient_bg.png");  
7.     background-repeat: repeat-x;  
8. }  
9. </style>  
10. </head>  
11. <body>  
12. <h1>Hello Javatpoint.com</h1>  
13. </body>  
14. </html>   

Output
4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed
or scroll with the rest of the page in browser window. If you set fixed the background
image then the image will not move during scrolling in the browser. Let?s take an
example with fixed background image.

1. background: white url('bbb.gif');  
2. background-repeat: no-repeat;  
3. background-attachment: fixed;  

5) CSS background-position
The background-position property is used to define the initial position of the
background image. By default, the background image is placed on the top-left of the
webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

1. background: white url('good-morning.jpg');  
2. background-repeat: no-repeat;  
3. background-attachment: fixed;  
4. background-position: center;   

Output
CSS Border
The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the border of an
element. The CSS border properties are given below

o border-style
o border-color
o border-width
o border-radius

1) CSS border-style
The Border style property is used to specify the border type which you want to display
on the web page.

There are some border style values which are used with border-style property to define
a border.

Valu Description
e

none It doesn't define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

solid It is used to define a solid border.

double It defines two borders wIth the same border-width value.

groove It defines a 3d grooved border. effect is generated according to border-color value.

ridge It defines a 3d ridged border. effect is generated according to border-color value.

inset It defines a 3d inset border. effect is generated according to border-color value.


outset It defines a 3d outset border. effect is generated according to border-color value.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. p.none {border-style: none;}  
6. p.dotted {border-style: dotted;}  
7. p.dashed {border-style: dashed;}  
8. p.solid {border-style: solid;}  
9. p.double {border-style: double;}  
10. p.groove {border-style: groove;}  
11. p.ridge {border-style: ridge;}  
12. p.inset {border-style: inset;}  
13. p.outset {border-style: outset;}  
14. p.hidden {border-style: hidden;}  
15. </style>  
16. </head>  
17. <body>  
18. <p class="none">No border.</p>  
19. <p class="dotted">A dotted border.</p>  
20. <p class="dashed">A dashed border.</p>  
21. <p class="solid">A solid border.</p>  
22. <p class="double">A double border.</p>  
23. <p class="groove">A groove border.</p>  
24. <p class="ridge">A ridge border.</p>  
25. <p class="inset">An inset border.</p>  
26. <p class="outset">An outset border.</p>  
27. <p class="hidden">A hidden border.</p>  
28. </body>  
29. </html>  
Output:

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

An inset border.

An outset border.

A hidden border.

2) CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can
also use the one of the three pre-defined values, thin, medium or thick to set the width
of the border.

Note: The border-width property is not used alone. It is always used with other
border properties like "border-style" property to set the border first otherwise it will
not work.
1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. p.one {  
6.     border-style: solid;  
7.     border-width: 5px;  
8. }  
9. p.two {  
10.     border-style: solid;  
11.     border-width: medium;  
12. }  
13. p.three {  
14.     border-style: solid;  
15.     border-width: 1px;  
16. }  
17. </style>  
18. </head>  
19. <body>  
20. <p class="one">Write your text here.</p>  
21. <p class="two">Write your text here.</p>  
22. <p class="three">Write your text here.</p>  
23. </body>  
24. </html>  

3) CSS border-color
There are three methods to set the color of the border.

o Name: It specifies the color name. For example: "red".


o RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
o Hex: It specifies the hex value of the color. For example: "#ff0000".

There is also a border color named "transparent". If the border color is not set it is
inherited from the color property of the element.

Note: The border-color property is not used alone. It is always used with other border
properties like "border-style" property to set the border first otherwise it will not
work.
1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <style>  
5. p.one {  
6.     border-style: solid;  
7.     border-color: red;  
8. }  
9. p.two {  
10.     border-style: solid;  
11.     border-color: #98bf21;  
12. }   
13. </style>  
14. </head>  
15. <body>  
16. <p class="one">This is a solid red border</p>  
17. <p class="two">This is a solid green border</p>  
18. </body>  
19. </html>  

Output

You might also like