the id selector - bsit99.files.wordpress.com · web viewcss(cascading style sheet ) the e. lement...
TRANSCRIPT
CSS(cascading Style Sheet )
The Element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):
p { text-align: center; color: red;}
Example
<!DOCTYPE html><html><head><style>p { text-align: center; color: red;} </style></head><body>
<p>Every paragraph will be affected by the style.</p><p id="para1">Me too!</p><p>And me!</p>
</body></html>OUTPUT
The id SelectorThe id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element.To select an element with a specific id, write a hash character, followed by the id of the element.The style rule below will be applied to the HTML element with id="para1":
<!DOCTYPE html><html><head><style>#para1 { text-align: center; color: red;}</style></head><body>
<p id="para1">Hello World!</p><p>This paragraph is not affected by the style.</p>
</body></html>
OUTPUT
The class SelectorThe 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:In the example below, all HTML elements with class="center" will be red and center-aligned:Example :
<!DOCTYPE html><html><head><style>.center { text-align: center; color: red;}</style></head><body>
<h1 class="center">Red and center-aligned heading</h1><p class="center">Red and center-aligned paragraph.</p>
</body></html>
OUTPUT
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:
<!DOCTYPE html><html><head><style>p.center { text-align: center; color: red;}</style></head><body>
<h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be red and center-aligned.</p>
</body></html>
OUTPUT
Grouping SelectorsIf you have elements with the same style definitions, like this:
h1 { text-align: center;
color: red;}
h2 { text-align: center; color: red;}
p { text-align: center; color: red;}
you can group the selectors, to minimize the code.To group selectors, separate each selector with a comma.In the example below we have grouped the selectors from the code above:
h1, h2, p { text-align: center; color: red;}
<!DOCTYPE html><html><head><style>h1, h2, p { text-align: center; color: red;}</style></head><body>
<h1>Hello World!</h1><h2>Smaller heading!</h2><p>This is a paragraph.</p>
</body></html>
OUTPUT
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
Background ColorThe background-color property specifies the background color of an element.
The background color of a page is set like this:
<!DOCTYPE html><html><head><style>body { background-color: #b0c4de;}</style></head><body>
<h1>Hello World!</h1>
<p>This page has a background color!</p>
</body></html>
With CSS, a color is most often specified by:
a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a valid color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
In the example below, the <h1>, <p>, and <div> elements have different background colors:
<!DOCTYPE html><html><head><style>h1 { background-color: #6495ed;}
p { background-color: #e0ffff;}
div { background-color: #b0c4de;}</style></head><body>
<h1>CSS background-color example!</h1><div>This is a text inside a div element.<p>This paragraph has its own background color.</p>We are still in the div element.</div>
OUTPUT
Background ImageThe background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
<!DOCTYPE html><html><head><style>body { background-image: url("paper.gif");}</style></head><body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body></html>
OUTPUT
Background Image - Repeat Horizontally or VerticallyBy default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:<!DOCTYPE html><html><head><style>body { background-image: url("gradient_bg.png");}</style></head><body>
<h1>Hello World!</h1><p>Strange background image...</p>
</body></html>
OUTPUT
If the image is repeated only horizontally (background-repeat: repeat-x;), the background will look better:
OUTPUT
Background Image - Set position and no-repeatShowing the backgound image only once is also specified by the background-repeat property:
<!DOCTYPE html><html><head><style>body { background-image: url("img_tree.png"); background-repeat: no-repeat;}</style></head><body>
<h1>Hello World!</h1><p>W3Schools background image example.</p><p>The background image is only showing once, but it is disturbing the reader!</p>
OUTPUT
In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top;}
<!DOCTYPE html><html><head><style>body { background-image: url("img_tree.png");
background-repeat: no-repeat; background-position: right top; margin-right: 200px;}</style></head><body>
<h1>Hello World!</h1><p>W3Schools background no-repeat, set position example.</p><p>Now the background image is only shown once, and positioned away from the text.</p><p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body></html>
Background Image - Fixed positionTo specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed;}
Background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
The shorthand property for background is background:
body { background: #ffffff url("img_tree.png") no-repeat right top;}
CSS Border Properties
The CSS border properties allow you to specify the style, width, and color of an element's border.
This element has a groove border that is 15px wide and green.
Border StyleThe 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
Example
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
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;}
Code <!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Result:
Border WidthThe border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.</p>
</body>
</html>
<!DOCTYPE html><html><head><style>body { background-image: url("gradient_bg.png"); background-repeat: repeat-x;}</style></head><body>
<h1>Hello World!</h1><p>Here, a backgound image is repeated only horizontally!</p>
</body></html>
CSS Margins
The CSS margin properties set the size of the white space OUTSIDE the border.
Margin - Individual SidesCSS has properties for specifying the margin for each side of an element:
margin-top margin-right margin-bottom margin-left
All the margin properties can have the following values:
auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
border:1px solid red;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
</style>
</head>
<body>
<h2>Using Individual margin Properties:</h2>
<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>
</body>
</html>
Margin - Shorthand PropertyTo shorten the code, it is possible to specify all the margin properties in one property.
The margin property is a shorthand property for the following individual margin properties:
margin-top
margin-right margin-bottom margin-left
Padding - Individual SidesCSS has properties for specifying the padding for each side of an element:
padding-top padding-right padding-bottom padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that the padding should be inherited from the parent element
The following example sets different padding for all four sides of a <p> element:
CSS Dimension PropertiesThe CSS dimension properties allow you to control the height and width of an element.
This element has a width of 100%.
Setting height and widthThe height and width properties are used to set the height and width of an element.
The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.
This <div> element has a height of 100 pixels and a width of 500 pixels.
Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!
The following example shows a <div> element with a height of 100 pixels and a width of 500 pixels:
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables
CSS Box Model
CSS Outline
CSS Display
CSS Max-width
CSS Position
CSS Float
CSS Inline-block
CSS Align
CSS Combinators
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Attr Selectors
CSS Counters
DIV CSS
<html><head><style>div { border: 1px solid black; padding: 10px; width: 200px; height: 200px; text-align: justify;}</style></head><body>
<h1>Example text-align: justify;</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>
<div>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>
