CSS Tags with examples
CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. It defines how HTML documents are to be displayed
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
·
External style sheet
·
Internal style sheet
· Inline style
External Style Sheet: An
external style sheet is ideal when the style is applied to many pages. With
an external style sheet, you can change the look of an entire Website by
changing just one file.
Code
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Internal style sheet: An internal style sheet should be used when a single document has a
unique style. You define internal styles in the head section of an HTML
page, inside the <style> tag.
Code
<head>
<style>
hr {color: sienna }
p {margin-left: 20px}
body {background-image: url("images/background.gif");}
</style>
</head>
Inline style:
To use inline styles, add the style attribute to the relevant tag. The style
attribute can contain any CSS property
Code
<p style="color: blue; margin-left: 20px;">This is a paragraph. </p>
1. CSS SELECTORS:
CSS selectors allow you to select and manipulate HTML element(s). CSS
selectors used to "find" (or select) HTML elements based on their id,
classes, types, attributes, values of attributes and much more.
1.1 Element selector: The element selector selects elements based on the
element name.
Code
<style>
p{
text-align: center;
color: red;
}
1.2 Id selector: The id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the id selector when you want to find a single, unique element
Code
<style>
#p1{
text-align: center;
color: red;
}
<body>
<p id="p1">hello</p>
<h1 id="p1">hi</h1>
1.3 Class selector: The class selector finds elements with the specific
class. The class selector uses the HTML class attribute.
Code
<style>
p.x{
text-align: center;
color: red;
}
<style>
<p class="x">heading is affected</p>
<p>not affected</p>
2. CSS Background:
CSS background properties are used to define the background effects of an
element. CSS properties used for background effects are:
Code
<style>
body {
background-color: red;
background-image: url (" ");
background-position: left top;
background-repeat: repeat-x;
}
p {
background-color: green;
text-align: center;
}
3. CSS Text: It contains some of the text formatting properties like text-transform, text- align, color etc.
3.1 Text-transform: The text-transform property is used to specify
uppercase and lowercase letters in a text
Code
<style>
p.uppercase
{
text-transform: uppercase;
}
p.lowercase
{
text-transform: lowercase;
}
p.capitalize
{
text-transform: capitalize;
}
<p class="uppercase">Text will be converted to uppercase</p>
3.2 Indented text: The text-indent property is used to specify the
indentation of the first line of a text.
Code
p {
text-indent: 50px;
letter-spacing: 30px;
line-height: 70%;
word-spacing: 30px;
}
3.3 Vertical alignment of image inside text: This property aligns the image
according to the given value.
Code
<style>
img.top
{
vertical-align: text-top;
}
img.bottom
{
vertical-align: text-bottom;
}
</style>
4. CSS Links:
Links can be styled with any CSS property (e.g. color, font-family,
background, etc.)
4.1 Background color: The background-color property specifies the
background color for links.
Code
<style>
a: link
{
background-color: red;
}
a: visited
{
background-color: blue;
}
a: hover
{
background-color: yellow;
}
a: active
{
background-color: green;
}
5. CSS Tables:
This property helps us to create table with some table formatting
properties.
5.1 Table border: To specify table borders in CSS, use the border
property.
Code
table, th, td {
border: 1px solid black;
}
5.2 Table width and height: Width and height of a table is defined by the
width and height properties.
Code
table {
width:100%;
}
th{
height:50px;
}
5.3 Table text alignment: The text in a table is aligned with the
text-align and vertical-align properties.
Code
td {
text-align: right:
}
5.4 Table padding: To control the space between the border and content in a
table, use the padding property on td and th elements.
Code
td {
padding:15px;
}
5.5 Table color: The example below specifies the color of the borders, and
the text and background color of the elements:
Code
table, td, th {
border:1px solid green;
}
th {
background-color: green:
color: white;
}
6. CSS Border: The CSS border properties allows you to specify the style and color of an element’s border.
6.1 Border style: The border-style property specifies what kind of border
to display.
Code
<style>
p.none{border-style: none;}
p.dotted{border-style: dotted;}
p.dashed{border-style: dashed;}
p.solid{border-style: solid;}
</style>
6.2 Border width: The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Code
<style>
p.one
{
border-style: solid;
border-width:5px;
}
p.two
{
border-style: solid;
border-width: medium:
}
</style>
<p class="one" >Some test</p>
7. CSS Padding:
The CSS padding properties define the space between the element border at
the element content. The padding clears an area around the content (inside
the border) of an element. The top, right, bottom, and left padding can be
changed independently using separate properties.
Code
p.padding
{
padding-top: 25px;
padding-bottom 25px;
padding-right: 50px;
padding-left 50px;
}
8. CSS Dimensions:
The CSS dimension properties allow you to control the height and width of
an element.
Code
img.normal
{
height: auto;
width: auto;
}
img.big
{
height:200;
width:200;
}
9. CSS Display:
The display property specifies if/how an element is displayed, and the
visibility property specifies if an element should be visible or hidden.
Code
h1.a
{
visibility: hidden; //hidden heading takes space
}
h1.b
{
display: none; //for none: no space between 2 elements
//collapse
}
10. Scrollable paragraph:
This property provides a scrollable paragraph using attributes like width
and height.
Code
p.scroll
{
background-color: red;
width:100;
height:200:
overflow: scroll;
}
11. CSS POSITIONING: The CSS positioning properties allow you to position an element. Elements can be positioned using the top, bottom, left and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods.
11.1: Static Positioning: HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left and right properties.
11.2: Fixed Positioning: An element with fixed position is positioned
relative to the browser window. Fixed positioned elements are removed from
the normal flow. The document and other elements behave like the fixed
positioned element does not exist
Code
p.pos
{
position: fixed;
top:30px;
right:5px;
}
11.3: Relative Positioning: A relative positioned element is positioned
relative to its normal position.
Code
h2.pos_ left {
position: relative;
left:20px;
}
h2.pos_right {
position: relative;
right:20px;
}
11.4 Absolute Positioning: An absolute position element is positioned
relative to the first parent element that has a position other than static.
If no such element is found, the containing block is <html>:
Code
h2{
position: absolute;
left:100px;
top: 150px;
}
12. CSS COUNTER: CSS counter is a way to number sections and sub-sections with "Section 1”, “1.1”', “1.2", etc.: The counter-reset property creates or resets one or more counters. The counter- reset property is usually used together with the counter-increment property and the content property. The counter-reset property is supported in all major browsers.
Code
body
{
counter-reset: section;
}
h1
{
counter-reset: subsection;
}
h1: before
{
counter-increment: section;
content: "Section" counter(section) ". ";
}
h2: before
{
counter-increment: subsection;
content: counter(section) " . " counter(subsection) " . ";
}
13. CSS FOCUS:
The focus selector is allowed on elements that accept keyboard events or
other user inputs. CSS focus selector is used to select the element that has
focus. Focus selector is supported in all major browsers.
Code
input: focus
{
background-color: yellow;
}
14. CSS first-of-type selector: The first-of-type selector matches every element that is the first child, of a particular type, of its parent. This is the same as nth-of-type selector. First-of-type selector is supported in all major browsers.
14.1: Make First Child Special: It Selects every <p> element that is
the first child of its parent.
Code
p: first-child
{
color: blue;
}
14. 2: Make First Letter Special: It selects the first letter of every
<p> element.
Code
p: first-letter
{
color: red;
font-size: xx-large;
}
14.3: Make First Line Special: It selects the first line of every <p>
element.
Code
p: first-line
{
color: red;
}
15. CSS NAVIGATION BAR: A navigation bar is basically a list of links. With the help of CSS you can transform boring HTML menus into good-looking navigation bars. Having easy-to-use navigation is important for any web site. A navigation bar needs standard HTML as a base. As it is a list of links, so using the <ul> and <li> elements make perfect sense.
15.1: Vertical Navigation Bar: To build a vertical navigation bar we only
need to style the <a> elements, in addition to the code.
Code
ul
{
list-style-type: none;
}
a: link
a: visited
{
display: block;
color: blue;
background-color: red
width:120;
text-align: center;
padding:4
text-decoration: none
text-transform: uppercase;
}
a: hover,
a: active
{
background-color: green;
}
15.2: Horizontal Navigation Bar: There are two ways to create a horizontal navigation bar. Using inline or floating list items. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
15.2.1: Inline List items: One way to build a horizontal navigation bar is to specify the <li> elements as inline. In addition to the “standard” code above:
Code
li
{
display: inline;
}
15.2.2: Floating List Items: For all the links to have an equal width,
float the <li> elements and specify a width for the <a>
elements:
Code
li
{
float: left
}
a
{
display: block;
width: 60px;
}
16. CSS IMAGE GALLERY:
CSS can be used to create an image gallery
Code
<style>
div.img
{
margin:15px; //It is used to create a gap between two images.
padding:15px; //It is used to create a gap between wall and image.
border:1px solid blue
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img .img
{
display: inline;
margin: 5px;
border: 1px solid;
}
</style>
<div class="img">
<a target="_blank” href = "path of an image">
"_self"
"_parent"
<img src=" path of an image" alt="image name" width="110" height="90">
</a>
<div class="desc"> Add a description of the image here </div>
17. CSS IMAGE OPACITY: The CSS opacity property is used for creating transparent images. The CSS
property for transparency is opacity. The opacity property can take value
from 0.0-1.0. A lower value makes the element more transparent.
Code
<style>
img
{
opacity: 0.4;
}
img: hover
{
opacity: 1.0;
}
</style>
<body>
<img src="path of an image" width=100 height=100>
</body>
17.1. Text in Transparent Box: With the help of CSS Image Opacity, we can
write text in the transparent box
Code
<style>
div.background
{
width: 500px;
height: 250px;
background: url ( ) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: blue;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: red;
}
</style>
<div class="background">
<div class="transbox">
<p>TEXT</p>
</div>
</div>
18. CSS BORDER: The CSS border properties allow you to specify the style and color of an
element's border.
border style values are as follows
none: Defines no border.
dotted: Defines a dotted border.
dashed: Defines a dashed border.
solid black: Defines a solid border.
double: Defines two borders. The width of the two borders is the same as
the border-width value
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.
Code
p
{
border: 2 solid black;
border radius:25;
box-shadow: 10 10 25 color;
}
p.one
{
border-style: solid:
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
In CSS it is possible to specify different borders for different sides:
Code
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Border-Shorthand property: To shorten the code, it is also possible to
specify all the individual properties in one property. This is called a
shorthand property.
Code
p
{
border: 5px solid red; //width style color;
}
19. CSS TEXT EFFECTS:
CSS contains several new text features. It contains following text
properties.
a) Text Shadow
b) Word Wrap
19.1: CSS Text Shadow: In CSS the text-shadow property applies shadow to
text.
You can specify the horizontal shadow, the vertical shadow, the blur
distance, and the color of the shadow:
Code
h1
{
text-shadow: 5px 5px 5px black;
}
19.2: CSS Word Wrapping: In CSS the word-wrap property allows you to force
the text to wrap-even if it means splitting it in the middle of a word.
Code
p
{
word-wrap: break-word;
}
20. CSS TRANSITIONS:
CSS transitions are effects that let an element gradually change from one
style to another. The transition effect will start when the specified CSS
property changes value. A typical CSS property change would be when a user
mouse-over an element:
Code
p
{
transition: width 2s, height 2s, transform 2s;
}
p: hover
{
transform: rotate (180 deg);
}
Post a Comment