Scribd
Upload
60 views

What Is CSS?: CSS Stands For Cascading Style Sheets

CSS is used to define styles and layout of HTML elements. There are three main ways to insert CSS - external style sheets, internal style sheets, and inline styles. CSS properties are used to control text styling, links, lists, tables, box model, borders, backgrounds, and other aspects of HTML elements. Selectors allow targeting elements by type, id, class and other attributes to apply CSS styles.

Uploaded by

Jinu Chacko
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
60 views

What Is CSS?: CSS Stands For Cascading Style Sheets

CSS is used to define styles and layout of HTML elements. There are three main ways to insert CSS - external style sheets, internal style sheets, and inline styles. CSS properties are used to control text styling, links, lists, tables, box model, borders, backgrounds, and other aspects of HTML elements. Selectors allow targeting elements by type, id, class and other attributes to apply CSS styles.

Uploaded by

Jinu Chacko
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 6

What is CSS?

CSS stands for Cascading Style Sheets


CSS defines how HTML elements are to be displayed

CSS Selectors
CSS selectors allow you to select and manipulate HTML elements.

1.The element Selector


The element selector selects elements based on the element name.
p{
text-align: center;
color: red;
}
If you have elements with the same style definitions, like this:
h1, h2, p {
text-align: center;
color: red;
}

The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
#para1 {
text-align: center;
color: red;
}

The class Selector


The class selector selects elements with a specific class attribute.
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all <p> elements with class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}

Three Ways to Insert CSS


1.External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The style sheet file must be saved with a .css extension.

The rel attribute specifies the relationship between the current document and the linked
document. Only used if the href attribute is present.

2.Internal Style Sheet


An internal style sheet may be used if one single page has a unique style.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

3.Inline Styles
An inline style may be used to apply a unique style for a single element.
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

1.CSS Background
CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
background-color
background-image

background-repeat
background-attachment
background-position

body {
background-color: #b0c4de;
background-image: url("paper.gif");
background-repeat: repeat-x;
//To repeat an image vertically set background-repeat: repeat-y;
background-position: right top;
//set as background-repeat: no-repeat;
}

Background - Shorthand property


it is also possible to specify all the properties in one single property. This is called a shorthand property.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

It does not matter if one of the property values is missing, as long as the ones that are present are in this
order.

2.CSS Text
Body {
color: blue;
}
h1 {
text-align: center;

//The default color for a page is defined in the body selector.

//The text-align property is used to set the horizontal alignment of a text. Text
can be centered, or aligned to the left or right, or justified.

}
a{
text-decoration: none; // The text-decoration property is mostly used to remove underlines
}
from links for design purposes: It can also be used to decorate
text: overline, line-through, underline ;

3.CSS Links
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
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

4.CSS Lists
list-style
list-style-image

Sets all the properties for a list in one declaration


Specifies an image as the list-item marker
Specifies if the list-item markers should appear inside or outside the content
list-style-position
flow
list-style-type
Specifies the type of list-item marker

5.CSS Tables
Table Borders
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

//To specify table borders


//orders are collapsed into a single border

6.CSS Box Model


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
div {
width: 300px;

padding: 25px;
border: 25px solid navy;
margin: 25px;
}

CSS3 Rounded Corners


t

Four values: first value applies to top-left, second value applies to top-right, third value applies
o bottom-right, and fourth value applies to bottom-left corner
Three values: first value applies to top-left, second value applies to top-right and bottom-left,
and third value applies to bottom-right
Two values: first value applies to top-left and bottom-right corner, and the second value applies
to top-right and bottom-left corner
One value: all four corners are rounded equally

#rcorners4{
border-radius: 15px 50px 30px 5px;
}
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

A shorthand property for setting all the four border-*-*-radius properties


Defines the shape of the border of the top-left corner
Defines the shape of the border of the top-right corner
Defines the shape of the border of the bottom-right corner
Defines the shape of the border of the bottom-left corner

CSS3 Backgrounds
CSS3 properties:
background-size
background-origin
background-clip
CSS3 allows you to add multiple background images for an element, through the background-image
property.
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;

}
shorthand property
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
background-size property allows you to specify the size of background images. The size can be
specified lengths, contain or cover.
background-size: 100px 80px;
background-size: contain;
background-size: cover;
background-origin property specifies where the background image is positioned.
border-box - the background image starts from the upper left corner of the border
padding-box - (default) the background image starts from the upper left corner of the padding
edge
content-box - the background image starts from the upper left corner of the content
background-origin: content-box;
background-origin: border-box;
background-clip property specifies the painting area of the background.
border-box - (default) the background is painted to the outside edge of the border
padding-box - the background is painted to the outside edge of the padding
content-box - the background is painted within the content box
background-clip: content-box;
background-clip:padding-box;

You might also like