types of css (cascading style sheet) - smcschoolsonatalab.insmcschoolsonatalab.in/work/class 8...
TRANSCRIPT
CLASS VIIICOMPUTER
Lesson 2: Cascading Style Sheets (CSS)
1.1. What is CSS?
'Cascading Style Sheets' (CSS) allow you to define styles, layouts and spacing separate from the content which should be styled. The CSS information is typically contained in an external file. Other code, e.g., an HTML page, can reference to the CSS file for its layout information. For example you define in an external file the fonts and colors used for certain elements.
CSS is defined as a standard. Currently the versions CSS 2.1 and CSS 3 are most widely used.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScriptCSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device. The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
1.2. CSS selectors and style rules
The CSS standard defines selectors and style rules. The syntax is defined as follows:
selector { property:value; }
A selector can be one of a predefined identifier(, e.g., H1), a class name (e.g. .myclass) or an identifier (e.g. #myuniqueid).
In CSS an identifier is supposed to be unique across all of the elements in a page (or window in our case) while a class can be assigned to several elements.
For example the following CSS file defines the size and color of the 'h1' tag.
h1 { color:red; font-size:48px; }
1.3. CSS pseudo classes
CSS pseudo classes are used to qualify attributes of selectors. For example you can select any visited link in HTML and style it differently.
a:visited { color:red; }
2. Exercise: Style a HTML page with CSS
In the following you create a local html page and style it with CSS. Create a new directory and create the following file called 'styles.css'.
/* this is a comment *//* we style only the h1 element*/
h1 { border-style:solid none solid solid; color:red;}
In the same directory define the following HTML file. This file defines that it uses the 'styles.css' style sheet file from the same same directory.
<!DOCTYPE html><html> <head> <title>An HTML5 Document</title> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Your first HTML5 page</h1> <p>This is a <a href="http://www.vogella.com">link</a> to another webpage</p> <!-- this is a comment --> </body></html>
3. HTML container via id and class
HTML allows to define sections via 'div' containers. These 'div' containers can be used to style parts of the HTML document differently. For this purpose, you can identify the div containers via id or class attributes.
While id and class generate the same output, an id must be unique in the HTML document while the class attribute can be defined for several HTML elements in a page. CSS allows to style these elements via special selectors.
The following rule applies:
Table 1. Styling div containers
Definition CSS selection rule
<div id="myid">Content</div> #myid {css rules….}
<div class="myclass">Content</div> .myclass {css rules…}
The following example demonstrate both usages. Create the file stylesdiv.css
/* this is a comment *//* we style only the h1 element*/
#number1 { color:red;}
#number2 { color:blue;}
.class1 { font-weight: bold;}
.class2{ font-weight: normal; color: green;}
Create the following HTML file to use the style sheet.
<!DOCTYPE html><html> <head> <title>An HTML5 Document</title> <link href="stylesdiv.css" rel="stylesheet" type="text/css"> </head> <body> <div id="number1"> Some Text </div> <div id="number2"> Another Text</div> <div class="class1"> Styling with classes </div> <div class="class2"> Another class </div> </body></html>
You can also select by position in the HTML document. For example 'td a' only selects links which are within a table row.
You can also use other attributes for example the following will define certain styling for links which have been visited or over which the mouse hovers. They will identify if you have a link already visited or if the mouse hovers over a link and will change the display of the link accordingly.
a:visited {color:grey}a:hover {text-decoraton:underline}
4. CSS includes
A CSS file can import other CSS files via the '@import' statement. It must be the first rule in the style sheet using the '@import' statement.
@import "mystyle.css";@import url("mystyle.css");
If you want to import a css file from a html file it is better to use the following statement:
<link rel="stylesheet" href="include.css">
and not
@import "mystyle.css";@import url("mystyle.css");
5. Margins and padding5.1. Margins
A block element can be thought of as a box which contains something. This box has a border to other elements and you can influence the distance to other elements via the 'margin' and 'padding' settings.
Margin defines the outer distance of other elements. You can set values for top, right, bottom and left.
You can define the margins for a box individually or combine them into one statement.
body { margin-top: 10px; margin-right: 120px; margin-bottom: 20px; margin-left: 8px;}
body { margin: 10px 120px 20px 8px;}
5.2. Padding
Padding defines the inner distance of elements to the end of the box.
<!DOCTYPE html><html> <head> <title>Margin, padding test</title> <link href="styles.css" rel="stylesheet" type="text/css"> </head>
<body> <p id="test">Your first HTML5 page</p> </body>
</html>
#test { width: 200px; height: 60px; padding: 10px; border: 5px dotted blue; margin: 5px, 10px, 20px, 30px;}
The total size of the HTML box is defined by the initial size of the box, plus the margins and the padding and a border, if defined.
6. Positioning HTML elements with CSS
CSS allows to setup element with fixed, relate and absolute positions. Relative is the standard and will change the distribution of the different text containers based on the available space.
Frequently you want to make sure that your boxes stay on a specific place. You can use postion: absolute for this. A block element with this style will be removed from the normal flow of the HTML page and will have a fixed space. For example:
<!DOCTYPE html><html><head><title>An HTML5 Document</title><style type="text/css">#center { position: absolute; width: 200px; left: 400px; background-color: green;}#left { position: absolute; width: 200px; background-color: blue; top:200px;}#right { position: absolute; background-color: red; left: 200px; width: 200px;}</style></head><body><h1>HTML5 with CSS positioning</h1><p id="center">Center fixed box</p><p id="left">Left fixed box</p><p id="right">Right fixed box</p>
</body>
</html>
If you want to have a element always on a certain position you can use the fixed position and will not move even if you scroll down the HTML page.
<!DOCTYPE html><html><head><title>An HTML5 Document</title><style type="text/css">p.position_fixed { position: fixed; top: 200px; right: 5px;}</style></head><body><h1>HTML5 with CSS positioning</h1><p class="position_fixed"><a href="http://www.twitter.com/vogella">Followvogella on twitter</a></p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p>
</body></html>
7. Defining size
The most consist way to define size is the unit 'em' which is a relative unit to the font-size. 1em is as large as the font-size. You can use 1em for defining the space between words (word-spacing), or letters (letter-spacing) or to define the line height (line-height) of an HTML element. text-indent allows you to define the intent of the first line of a paragraph. text-indent: -1em put the first line a bit before the rest of the text.
8. Alignment and Text transformations
Via text-align you can define how your content (not only text) should be aligned. text-transform allows to transform the text to upper, lower case or to capitalize the first letter.
text-transform:uppercase;text-transform:lowercase;text-transform:capitalize;
text-align:left;text-align:right;text-align:center;text-align:justify;
9. Versioning of CSS
The versioning of css files is not mandatory, but it could be very useful to force the browser to load a changed css file instead of using the CSS caching.
To achieve this just add ?version=1.1 at the end of the css file name when referencing to the file.
So instead of calling a css file like this:
https://www.vogella.com/css/companyfooter.css
you should replace it with
https://www.vogella.com/css/companyfooter.css?version=1.1
The wording after the '?' has no relevance and can be chosen freely. With this solution your css changes are immediately visible and you do not need to refresh your browser with CTRL F5 until you see them. Additionally the name of the css file keeps the same which saves you a global search and replace.
Types of CSS (Cascading Style Sheet)
Cascading Style Sheet(CSS) is used to set the style in web pages which contain HTML elements. It sets the background color, font-size, font-family, color, … etc property of elements in a web pages.There are three types of CSS which are given below:
Inline CSS Internal or Embedded CSS External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using style attribute.Example:
filter_none
editplay_arrowbrightness_4<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>
</body>
</html>
Output:
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.Example:
filter_none
editplay_arrowbrightness_4<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.Example: The file given below contains CSS property. This file save with .css extension. For Ex: geeks.cssbody {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
Below is the HTML file that is making use of the created external style sheet
link tag is used to link the external style sheet with the html webpage. href attribute is used to specify the location of the external style sheet file.
filter_none
editplay_arrowbrightness_4<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are defined in multiple style sheets then the below order will be followed.
As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.
Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet then external style sheet rules are applied for the HTML tags.
CSS | Text Formatting
CSS text formatting properties is used to format text and style text.CSS text formatting include following properties:1.Text-color2.Text-alignment3.Text-decoration4.Text-transformation5.Text-indentation6.Letter spacing7.Line height8.Text-direction9.Text-shadow10.Word spacing
1.TEXT COLOR
Text-color property is used to set the color of the text.
Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB value“rgb(255, 0, 0).Syntax:
body
{
color:color name;
}
Example:
<!DOCTYPE html> <html>
<head> <style> h1 { color:red; } h2 { color:green; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> TEXT FORMATTING </h2> </body> </html>
OUTPUT:
2.TEXT ALIGNMENT
Text alignment property is used to set the horizontal alignment of the text.
The text can be set to left, right, centered and justified alignment.
In justified alignment, line is stretched such that left and right margins are straight.Syntax:
body
{
text-align:alignment type;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style> h1 { color:red; text-align:center; } h2 { color:green; text-align:left; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> TEXT FORMATTING </h2> </body> </html>
OUTPUT:
3.TEXT DECORATION
Text decoration is used to add or remove decorations from the text.
Text decoration can be underline, overline, line-through or none.Syntax:
body
{
text-decoration:decoration type;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style> h1 { color:red; text-decoration:underline; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> TEXT FORMATTING </h2> </body> </html>
OUTPUT:
4.TEXT TRANSFORMATION
Text transformation property is used to change the case of text, uppercase or lowercase.
Text transformation can be uppercase, lowercase or captitalise .
Capitalise is used to change the first letter of each word to uppercase.Syntax:
body
{
text-transform:type;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style> h2 { text-transform:lowercase; } </style> </head> <body> <h1> GEEKS FOR GEEKS
</h1> <h2> TEXT FORMATTING </h2> </body> </html>
OUTPUT:
5.TEXT INDENTATION
Text indentation property is used to indent the first line of the paragraph.The size can be in px, cm, pt.Syntax:
body
{
text-indent:size;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style> h2 { text-indent:80px; } </style>
</head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> This is text formatting properties.<br> Text indentation property is used to indent the first line of the paragraph. </h2> </body> </html>
OUTPUT:
6.LETTER SPACING
This property is used to specify the space between the characters of the text.The size can be given in px.Syntax:
body
{
letter-spacing:size;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style>
h2 { letter-spacing:4px; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> This is text formatting properties. </h2> </body> </html>
OUTPUT:
7.LINE HEIGHT
This property is used to set the space between the lines.Syntax:
body
{
line-height:size;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html>
<html> <head> <style> h2 { line-height:40px; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> This is text formatting properties.<br> This property is used to set the space between the lines. </h2> </body> </html>
OUTPUT:
8.TEXT DIRECTION
Text direction property is used to set the direction of the text.
The direction can be set by using rtl : right to left .
Left to right is the default direction of the text.
Syntax:
body
{
direction:rtl;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style> h2 { direction: rtl; text-align:center; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2><bdo dir="rtl"> This is text formatting properties. </bdo> </h2> </body> </html>
OUTPUT:
9.TEXT SHADOW
Text shadow property is used to add shadow to the text.You can specify the horizontal size, vertical size and shadow color for the text.
Syntax:
body
{
text-shadow:horizontal size vertical size color name;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow:3px 1px blue; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> This is text formatting properties. </h2> </body> </html>
OUTPUT:
10.WORD SPACING
Word spacing is used to specify the space between the words of the line.The size can be given in px.Syntax:
body
{
word-spacing:size;
}
Example:
filter_nonebrightness_4
<!DOCTYPE html> <html> <head> <style> h2 { word-spacing:15px; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> This is text formatting properties. </h2> </body> </html>
OUTPUT:
FONT PROPERTIES:
We 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 font-variant property is used to create a small-caps effect. The font-weight property is used to increase or decrease how bold or light a
font appears. The font-size property is used to increase or decrease the size of a font. The font property is used as shorthand to specify a number of other font
properties.
Set the Font Family
Following is the example, which demonstrates how to set the font family of an element. Possible value could be any font family name.
<html> <head> </head>
<body> <p style = "font-family:georgia,garamond,serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> </body></html>
This will produce following result −
Set the Font Style
Following is the example, which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.
<html> <head> </head>
<body> <p style = "font-style:italic;"> This text will be rendered in italic style </p> </body></html>
This will produce following result −
Set the Font Variant
The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps.
<html> <head> </head>
<body> <p style = "font-variant:small-caps;"> This text will be rendered as small caps </p> </body></html>
This will produce following result −
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html> <head> </head>
<body> <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> </body></html>
This will produce following result −
Set the Font Size
The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html> <head> </head>
<body> <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> </body></html>
This will produce following result −
Set the Font Size Adjust
The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.
<html> <head>
</head>
<body> <p style = "font-size-adjust:0.61;"> This text is using a font-size-adjust value. </p> </body></html>
This will produce following result −
Set the Font Stretch
The following example demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html> <head> </head>
<body> <p style = "font-stretch:ultra-expanded;"> If this doesn't appear to work, it is likely that your computer doesn't have a <br>condensed or expanded version of the font being used. </p> </body></html>
This will produce following result −
Shorthand Property
You can use the font property to set all the font properties at once. For example −
<html> <head> </head>
<body> <p style = "font:italic small-caps bold 15px georgia;"> Applying all the properties on the text at once. </p> </body>
</html>
This will produce following result –Applying all the properties on the text at once.
CSS Border Properties
The CSS border properties allow you to specify the style, width, and color of an element's border.
I have borders on all sides.
I have a red bottom border.
I have rounded borders.
I have a blue left border.
CSS Border Style
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 border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example
Demonstration of the different border styles:
p.dotted {border-style: dotted;}p.dashed {border-style: dashed;}p.solid {border-style: solid;}p.double {border-style: double;}p.groove {border-style: groove;}p.ridge {border-style: ridge;}p.inset {border-style: inset;}p.outset {border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}p.mix {border-style: dotted dashed solid double;}
Result:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
CSS background Property
Example
Set different background properties in one declaration:
body { background: lightblue url("img_tree.gif") no-repeat fixed center;
Definition and Usage
The background property is a shorthand property for:
background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment
It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.
Default value: see individual properties
Inherited: no
Animatable: yes, see individual properties.
Version: CSS1 + new properties in CSS3
JavaScript syntax: object.style.background="red url(smiley.gif) top left no-repeat”
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property Google Chrome
Internet Explorer/Edge
Mozilla Firefox
Safari Opera
Background
1.0 4.0 1.0 1.0 3.5
Note: Internet Explorer 8 and earlier versions do not support multiple background images on one element.
Note: See individual browser support for each value below.
CSS Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.
Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
Property Values
************
Value Description CSS
background-color
Specifies the background color to be used 1
background-image
Specifies ONE or MORE background images to be used 1
background-position
Specifies the position of the background images 1
background-size
Specifies the size of the background images 3
background-repeat
Specifies how to repeat the background images 1
background-origin
Specifies the positioning area of the background images 3
background-clip
Specifies the painting area of the background images 3
background-attachment
Specifies whether the background images are fixed or scrolls with the rest of the page
1
initial Sets this property to its default value. 3
inherit Inherits this property from its parent element. 2
The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.
We have the following properties to set an element margin.
The margin specifies a shorthand property for setting the margin properties in one declaration.
The margin-bottom specifies the bottom margin of an element.
The margin-top specifies the top margin of an element.
The margin-left specifies the left margin of an element.
The margin-right specifies the right margin of an element.
Now, we will see how to use these properties with examples.
The Margin Property
The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph −
Here is an example −
<html> <head> </head> <body> <p style = "margin: 15px; border:1px solid black;"> all four margins will be 15px </p> <p style = "margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document. </p> <p style = "margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p> <p style = "margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p> </body></html>
It will produce the following result −
The margin-bottom Property
The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.
Here is an example −
<html> <head> </head>
<body> <p style = "margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin </p> <p style = "margin-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom margin in percent </p> </body></html>
It will produce the following result –
This is a paragraph with a specified bottom margin
This is another paragraph with a specified bottom margin
The margin-top Property
The margin-top property allows you set top margin of an element. It can have a value in length, % or auto.
Here is an example −
<html> <head> </head>
<body> <p style = "margin-top: 15px; border:1px solid black;"> This is a paragraph with a specified top margin </p> <p style = "margin-top: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body></html>
It will produce the following result –
This is a paragraph with a specified top margin
This is another paragraph with a specified top margin in percent
The margin-left Property
The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.
Here is an example −
<html> <head> </head>
<body> <p style = "margin-left: 15px; border:1px solid black;"> This is a paragraph with a specified left margin </p> <p style = "margin-left: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body></html>
It will produce the following result –
This is a paragraph with a specified left margin
This is another paragraph with a specified top margin in percent
The margin-right Property
The margin-right property allows you set right margin of an element. It can have a value in length, % or auto.
Here is an example −
<html> <head> </head> <body> <p style = "margin-right: 15px; border:1px solid black;"> This is a paragraph with a specified right margin </p> <p style = "margin-right: 5%; border:1px solid black;"> This is another paragraph with a specified right margin in percent </p> </body></html>
It will produce the following result −
This is a paragraph with a specified right margin
This is another paragraph with a specified right margin in percent
CSS Outline
This element has a black border and a green outline with a width of 10px.
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
CSS has the following outline properties:
outline-style outline-color outline-width outline-offset outline
Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the
element's dimensions; the element's total width and height is not affected by the width of the outline.
CSS Outline Style
The outline-style property specifies the style of the outline, and can have one of the following values:
dotted - Defines a dotted outline dashed - Defines a dashed outline solid - Defines a solid outline double - Defines a double outline groove - Defines a 3D grooved outline ridge - Defines a 3D ridged outline inset - Defines a 3D inset outline outset - Defines a 3D outset outline none - Defines no outline hidden - Defines a hidden outline
The following example shows the different outline-style values:
Example
Demonstration of the different outline styles:
p.dotted {outline-style: dotted;}p.dashed {outline-style: dashed;}p.solid {outline-style: solid;}p.double {outline-style: double;}p.groove {outline-style: groove;}p.ridge {outline-style: ridge;}p.inset {outline-style: inset;}p.outset {outline-style: outset;}
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Note: None of the other outline properties will have ANY effect unless the outline-style property is set!
BOX MODEL
When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.
Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.
If the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.
The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.
The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.
The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.
The thickness of the borders are determined by the border-width and shorthand border properties. If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties. When there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the background-clip css property.
The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.
The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.
Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the borders and padding are still displayed around the content.
CSS float Property
ExampleLet an image float to the right:
img { float: right;}
Definition and Usage
The float property specifies how an element should float.
Note: Absolutely positioned elements ignore the float property!
Note: Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).
Default value: none
Inherited: no
Animatable: no.
Version: CSS1
JavaScript syntax: object.style.cssFloat="left"
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property Google Chrome
Internet Explorer/Edge
Mozilla Firefox
Safari Opera
float 1.0 4.0 1.0 1.0 7.0
CSS Syntaxfloat: none|left|right|initial|inherit;
Value Description
none The element does not float, (will be displayed just where it occurs in the text). This is default
left The element floats to the left of its container
right The element floats the right of its container
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Property ValuesMore ExamplesExample
Let an image float to the left:
img { float: left;}
Example
Let image be displayed just where it occurs in the text (float: none):
img { float: none;}
Example
Let the first letter of a paragraph float to the left and style the letter:
span { float: left; width: 0.7em; font-size: 400%; font-family: algerian, courier; line-height: 80%;}
Example
Use float with a list of hyperlinks to create a horizontal menu:
.header, .footer { background-color: grey; color: white; padding: 15px;}.column { float: left; padding: 15px;}.clearfix::after { content: ""; clear: both; display: table;}.menu {width: 25%;}.content {width: 75%;}
Example
Use float to create a homepage with a header, footer, left content and main content:
.header, .footer { background-color: grey; color: white; padding: 15px;}.column { float: left; padding: 15px;}.clearfix::after { content: ""; clear: both; display: table;}.menu {width: 25%;}.content {width: 75%;}
Example
Do not allow floating elements on the left or the right side of a specified <p> element:
img { float: left;}p.clear { clear: both;}
Example
If a floating element is taller than the containing element, it will overflow outside its container. It is possible to fix this with the "clearfix hack":
.clearfix::after { content: ""; clear: both; display: table;}
************