Style Sheet (CSS)
Ducat India
India’s Most Trusted IT Training School, 100% placement for all courses. Apply Today or follow our page updates.
A Style Sheet is a collection of style rules that that tells a browser how the various styles are to be applied to the HTML tags to present the document. Rules can be applied to all the basic HTML elements, for example the
tag, or you can define you own variation and apply them where you wish to.
Types of style sheet
You can use?CSS ?in three ways in your HTML document:
External Style Sheet
If you need to use your style sheet to various pages, then it’s always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Internal Style Sheet
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
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Inline Style Sheet
Inline style sheets is a term that refers to style sheet information being applied to the current element. By this, I mean that instead of defining the style once, then applying the style against all instances of an element (say the <p> tag), you only apply the style to the instance you want the style to apply to.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
About CSS Selectors
In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine grained precision when selecting elements to style.
Given below is a table which shows different selectors with its description
Let us see some of the above selectors in detail.
.class selector
The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
Syntax
.class {
css declarations;
}
Example
Style all
elements with class=”hometown”:
<!DOCTYPE html>
<html>
<head>
<style>
p.hometown {
background: yellow;
}
</style>
</head>
<body>
<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>
<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
</body>
</html>
#id selector
The #id selector styles the element with the specified id.
Syntax
#id {
css declarations;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
* selector
The * selector selects all elements.
The * selector can also select all elements inside another element.
Syntax
*{
css declarations;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div * {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
Element selector
The element selector selects all elements with the specified element name.
Syntax
element {
css declarations;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
Types of properties
CSS properties is used to change the look and feel of your web pages. Given below are different categories of CSS properties with functionality.
Background Properties
Border Properties
Color Properties
Dimension Properties
Font Properties
List Properties
Margin Properties
Padding Properties
About CSS properties
Let’s discuss some of the CSS properties in detail.
Background Properties
The CSS provide several properties for styling the background of an element, such as background-color, background-image, background-repeat, background-attachment and background-position.
The following section will describe you how to use these properties to set the different styles for the backgrounds one by one.
Background Color
The background-color property is used to set the background color of an element.
The example below demonstrates, how to set the background color of a web page.
Example
body {
background-color: #f0e68c;
}
Background Image
The background-image property set an image as a background of an HTML element.
领英推荐
See the example below which demonstrates how to set the background image for a page.
Example
body {
background-image: url("leaf.jpg");
}
Background Repeat
By default the background-image property repeats an image both horizontally and vertically.
By using background-repeat property you can control how a background image is tiled in the background of an html element. You can set a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.
See the example below which demonstrates how to set the gradient background for a web page by repeating the sliced image horizontally.
Example
body {
background-image: url("gradient.png");
background-repeat: repeat-x;
}
Background Attachment
The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block.
Example
body {
width: 250px;
height: 200px;
overflow: scroll;
background-image: url("recycle.jpg");
background-attachment: fixed;
}
Background Position
The background-position property is used to control the position of the background image.
If no background-position has been specified, the image is placed at the default top-left position of the element i.e. at (0,0). See the example below:
Example
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
In the following example, the background image is positioned at top-right corner and the position of the image is specified by the background-position property.
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: 100% top;
}
Box Properties
The box-sizing CSS property defines how the user should calculate the total width and height of an element.
The actual space that an element’s box might take is calculated like this:
Here is the same example below, with box-sizing: border-box; added to both <div> elements:
Example
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Border Properties
The CSS border properties allow you to define the border area of a box. The border can either be a predefined style like, solid line, double line, dotted line, etc. or it can be an image. The following section will describe you how to set the various properties defining the style (border-style), color (border-color), and thickness (border-width) of the border.
The border-width Property
The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.
Example
p {
border-width: medium 10px thick 15px;
}
Note:?If the value for the border-width property is missing or not specified, the default value (medium) of the border-width will be used instead.
The border-style Property
The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.
The border-style property may take one of the following values: none, hidden, dashed, dotted, double, groove, inset, outset, ridge and solid.
Example
p {
border-style: dotted;
}
The border-color Property
The border-color property specify the color of a box’s border. This is also a shorthand property for setting the color of all the four sides of an element’s border.
Example
p {
border-style: solid;
border-color: #ff0000;
}
Note:?The border-color property does not work if it is used alone. Use the border-style property to set the border first.
The border Shorthand Property
The border CSS property is a shorthand property for setting one or more of the individual border properties border-style, border-width and border-color in a single rule.
Example
p {
border: 5px solid #ff4500;
}
If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.
Note:?If the value for the border-color property is missing or not specified when setting the borders for an element (e.g. border: 5px solid;) the element’s color property will be used as the value for the border-color.
In this example, the border will be a solid black line of 5px width:
p {
color: black;
border: 5px solid;
}
But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for border-style property is none.
In the example below, there will be no border:
p {
border: 5px #00ff00;
}
Positioning Properties
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). The following section will describe you these positioning methods one by one.
Static Positioning
A static positioned element is always positioned according to the normal flow of the page. HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, right, and z-index properties.
Example
.box {
padding: 20px;
background: #7dc765;
}
Relative Positioning
A relative positioned element is positioned relative to its normal position.
In the relative positioning scheme the element’s box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the properties — top or bottom and/or left or right.
Example
.box {
position: relative;
left: 100px;
}
Note:?A relatively positioned element can be moved and overlap other elements, but it keeps the space originally reserved for it in the normal flow.
Absolute Positioning
An absolutely positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the ‘top-left’ corner of the browser window. The box’s offsets further can be specified using one or more of the properties top, right, bottom, and left.
Absolutely positioned elements are taken out of the normal flow entirely and thus take up no space when placing sibling elements. However, it can overlap other elements depending on the z-index property value. Also, an absolutely positioned element can have margins, and they do not collapse with any other margins.
Example
.box {
position: absolute;
top: 200px;
left: 100px;
}
Fixed Positioning
Fixed positioning is a subcategory of absolute positioning.
The only difference is, a fixed positioned element is fixed with respect to the browser’s viewport and does not move when scrolled.
Example
.box {
position: fixed;
top: 200px;
left: 100px;
}
Note:?In case of the print media type, the fixed positioned element is rendered on every page, and is fixed with respect to the page box (even in print-preview). IE7 and IE8 support the fixed value only if a <!DOCTYPE> is specified.
Summary