Scribd
Upload
13 views

Unit2 CSS

The document discusses CSS (Cascading Style Sheets), which is a style sheet language used to describe the presentation of a document written in a markup language like HTML. It explains what CSS is, its advantages, syntax, selectors, how to add CSS, comments, the box model, and some common CSS properties like background.

Uploaded by

Måyāñk Gãür
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

Unit2 CSS

The document discusses CSS (Cascading Style Sheets), which is a style sheet language used to describe the presentation of a document written in a markup language like HTML. It explains what CSS is, its advantages, syntax, selectors, how to add CSS, comments, the box model, and some common CSS properties like background.

Uploaded by

Måyāñk Gãür
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and
formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with
HTML to change the style of web pages and user interfaces.

Advantages of CSS

•CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for
each HTML element and apply it to as many Web pages as you want.
•Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS
rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
•Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be
updated automatically.
•Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to
your HTML page in comparison to HTML attributes.
•Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using
the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell
phones or for printing.
•Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a
good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
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:
color: yellow;
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.
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.
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector

1) CSS Element Selector : The element selector selects the HTML element by name.
<html>
<head>
<style>
p{
text-align: center; color: blue; }
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p>And me!</p>
</body>
</html>
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.

<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Class</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
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.

<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

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.
p.center { text-align: center; color: blue; } (in above example)
4) CSS Universal Selector : The universal selector is used as a wildcard character. It selects all the elements on the pages.

<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
5) CSS Group Selector : The grouping selector is used to select all the elements with the same style definitions. It is
used to minimize the code. Commas are used to separate each selector in grouping.

<html>
<head>
<style>
h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
How to add 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 : Inline CSS is used to apply CSS on a single line or element.
<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p>

2) 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.
<html>
<head>
<style>
h1 { color: red; margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>
</body>
</html>
3) 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.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

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 /*............*/ .
CSS BOX MODEL
It is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to
create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements.
The web browser renders every element as a rectangular box according to the CSS box model.

Explanation of the different parts:


• 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
CSS PROPERTIES
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: The background-color property is used to specify the background color of the element.
<style>
h2,p{
background-color: #b0d4de;
}
</style>
2) 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.
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
3) background-repeat: By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally(repeat-x;) or vertically(repeat-y;).
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>

4) 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.
background: white url('bb.gif');
background-repeat: no-repeat;
background-attachment: fixed;

5) 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. Position: Center, top, bottom, left,
right.
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
CSS Border
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:

1) border-style: is used to specify the border type which you want none It doesn't define any border.
to display on the web page. There are some border style values dotted It is used to define a dotted border.
which are used with border-style property to define a border.
<style> dashed It is used to define a dashed border.
p{
border-style: none; solid It is used to define a solid border.
border-style: dotted; double It defines two borders wIth the same border-
border-style: dashed; width value.
border-style: solid; groove It defines a 3d grooved border. effect is
border-style: double; generated according to border-color value.
border-style: groove;
border-style: ridge; ridge It defines a 3d ridged border. effect is
border-style: inset; generated according to border-color value.
border-style: outset;
} inset It defines a 3d inset border. effect is
</style> generated according to border-color value.

outset It defines a 3d outset border. effect is


generated according to border-color value.
2) border-width: 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.
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px; //Thick
}
p.two {
border-style: solid; border-width: medium;
}
p.three {
border-style: solid; border-width: 1px; //Thin
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>
3) border-color: There are three methods to set the color of the border. 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.
Name: It specifies the color name. For example: "red".
RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
Hex: It specifies the hex value of the color. For example: "#ff0000".
<style>
p{
border-style: solid;
border-color: red;
}
</style>

4) border-radius: It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-


bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all
four corners of the box in a single declaration using the border-radius. The values of this property can be defined in
percentage or length units.
<style>
p{
border-radius: 10% 30% 20% 40%;
}
</style>
NOTE: First value will be the radius of top-left, the second value will be used for the top-right, the third value will be
applied on bottom-right, and the fourth value is used for bottom-left.
CSS Fonts
You can set following font properties of an element −

1) font-family: is used to change the face of a font.


<p style = "font-family: georgia, garamond, serif;">
This text is rendered in either georgia, garamond, or the default serif font . </p>

2) font-style: is used to make a font italic or oblique.


<p style = "font-style: italic;"> TEXT </p>

3) font-variant: is used to create a small-caps effect. Possible values are normal and small-caps.
<p style = "font-variant: small-caps;"> This text will be rendered as small caps </p>

4) font-weight: is used to increase or decrease how bold or light a font appears.


<p style = "font-weight:bold;"> This font is bold. </p>
<p style = "font-weight:bolder;"> This font is bolder. </p>
<p style = "font-weight:500;"> This font is 500 weight. </p>

5) font-size: is used to increase or decrease the size of a font.


<p style = "font-size:20px;"> This font size is 20 pixels </p>
<p style = "font-size:small;"> This font size is small </p>
<p style = "font-size:large;"> This font size is large </p>
CSS Text
You can set following text properties of an element −

1) color: is used to set the color of a text.


<p style = "color: red;"> This text will be written in red. </p>

2) direction: is used to set the text direction. Possible values are ltr or rtl.
<p style = "direction: rtl;"> This text will be rendered from right to left </p>

3) letter-spacing: is used to add or subtract space between the letters that make up a word.
<p style = "letter-spacing: 5px;"> This text is having space between letters. </p>

4) word-spacing: property is used to add or subtract space between the words of a sentence.
<p style = "word-spacing: 5px;"> This text is having space between words. </p>

5) text-indent: property is used to indent the text of a paragraph.


<p style = "text-indent: 1cm;"> This text will have first line indented by 1cm. </p>

6) text-align: property is used to align the text of a document. Value can be left, right, center.
<p style = "text-align: right;"> This will be right aligned. </p>
7) text-decoration: property is used to underline, overline, and strikethrough text. Possible values are none, underline,
overline, line-through, blink.
<p style = "text-decoration: underline;"> This will be underlined </p>

8) text-transform: property is used to capitalize text or convert text to uppercase or lowercase letters. Possible values
are none, capitalize, uppercase, lowercase.
<p style = "text-transform: capitalize;"> This will be capitalized </p>

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With
CSS, you have full control over the padding. There are properties for setting the padding for each side of an element
(top, right, bottom, and left).

If the padding property has four values: padding: 25px 50px 75px 100px;
Then the order of value will be: Top, Right, Bottom and left respectively.
CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you
have full control over the margins. There are properties for setting the margin for each side of an element (top, right,
bottom, and left).
CSS has properties for specifying the margin for each side of an element i.e. margin-top, margin-right, margin-bottom,
and margin-left.
Example- p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin Shorthand Property - margin: 25px 50px 75px 100px;

top right bottom left


If there are three values - margin: 25px 50px 75px;
Then, top margin is 25px ; right and left margins are 50px; bottom margin is 75px.

If there are two values – margin: 25px 50px; Then, top and bottom margins are 25px; right and left margins are 50px.
If there is only one value - margin: 25px; then all four margins are 25px.
CSS Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled
differently depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
Example –
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: yellow;
}
a:active {
color: blue;
}
CSS Tables
1) 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. Possible values are collapse and separate.
table
{
border-collapse: collapse;
border-collapse: separate;
}

2) border-spacing: specifies the width that should appear between table cells.
table
{ border-spacing:10px 50px;
}

3) caption-side: captions are presented in the <caption> element. You use the caption-side property to control the
placement of the table caption. This property can have one of the four values top, bottom, left or right.
caption
{
caption-side: top;
}
CSS Images

Images play an important role in any webpage. CSS plays a good role to control image display. You can set the following
image properties using CSS.

1) border: property is used to set the width of an image border. This property can have a value in length or in %. A
width of zero pixel means no border.
<img style = "border:3px dashed red;“ src = "/css/images/logo.png" />

2) height: property is used to set the height of an image.


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

3) width: property of an image is used to set the width of an image.


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

You might also like