Scribd
Upload
7 views

CSS 1

Uploaded by

shahmirwordpress11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

CSS 1

Uploaded by

shahmirwordpress11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

CSS Backgrounds

background-color
Opacity / Transparency

The opacity property specifies the opacity/transparency of an element.

div {
background-color: green;
opacity: 0.3;
}

CSS background-attachment
background-attachment: fixed;
background-attachment: scroll;
CSS Border Style
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
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;}
Specific Side Widths
The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border)

border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the
sides */

CSS Border - Individual Sides

/* Four values */
p.four {
border-style: dotted solid double dashed;
CSS Border - Shorthand Property

border-left: 6px solid red;


border-bottom: 6px solid red;

CSS Rounded Borders


border: 2px solid red;
border-radius: 5px;

CSS Margins
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
Margin - Shorthand Property
margin: 25px 50px 75px 100px;
•margin-top
•margin-right
•margin-bottom
•margin-left

The inherit Value


margin-left: inherit;

CSS Padding
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
•padding-top
•padding-right
•padding-bottom
•padding-left
Padding and Element Width
width: 300px;
padding: 25px;
box-sizing: border-box;

CSS height and width Values


The height and width properties may have the following values:
•auto - This is default. The browser calculates the height and width
•length - Defines the height/width in px, cm etc.
•% - Defines the height/width in percent of the containing block
•initial - Sets the height/width to its default value
•inherit - The height/width will be inherited from its parent value
CSS Text
div {
border: 1px solid gray;
padding: 8px;
}

h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}

p{
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}

a{
text-decoration: none;
color: #008CBA;
}
</style>
</head>
<body>

<div>
<h1>Muhammad Iqbal</h1>
<Sir Muhammad Iqbal Kt, was a South Asian Muslim writer,
philosopher, and politician, whose poetry in the Urdu language
is considered among the greatest of the twentieth century, and
whose vision of a cultural and political ideal for the Muslims of
British-ruled India was to animate the impulse for Pakistan.</p>
</div>
CSS Text Alignment and Text Direction
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
When the text-align property is set to "justify", each line is stretched so that every
line has equal width, and the left and right margins are straight

div {
text-align: justify;
}

Text Align Last


The text-align-last property specifies how to align the last line of a text.

Align the last line of text in three <p> elements:


p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}
Text Direction
The direction and unicode-bidi properties can be used to change the text direction
of an element:

p{
direction: rtl;
unicode-bidi: bidi-override;
}

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.


Set the vertical alignment of an image in a text:

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

CSS Text Decoration


text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration
Add a Decoration Line to Text
The text-decoration-line property is used to add a decoration line to text.

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p{
text-decoration-line: overline underline;
}
Specify a Color for the Decoration Line
The text-decoration-color property is used to set the color of the decoration line.

Specify a Style for the Decoration Line


The text-decoration-style property is used to set the style of the decoration line.
text-decoration-thickness property is used to set the thickness of the decoration line.

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
Text Spacing
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text

text-indent:value;

Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.

letter-spacing: value;

Line Height
The line-height property is used to specify the space between lines

line-height: 1.8; (value must be in numbers without comma’s


Word Spacing
The word-spacing property is used to specify the space between the words in a text.

word-spacing: 2px;

Text Shadow

text-shadow: 2px 2px;


text-shadow: 2px 2px red;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px
darkblue;

Font-family
Font Weight
The font-weight property specifies the weight of a font
font-weight: normal;

Font Variant
The font-variant property specifies whether or not a text should be displayed
in a small-caps font.
font-variant: small-caps;
Google Fonts
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">

font-family: "Sofia", sans-serif;


CSS Icons

<script src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"></script>

<p>Some Font Awesome icons:</p>


<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>


<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

Bootstrap Icons
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boot
strap.min.css">
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

Google Icons
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
CSS Links

a{
color: hotpink;
}

a:link {
color: red;
}

a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
Link Buttons

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
<style>
a:link, a:visited {
background-color: black;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius:10px;
}

a:hover, a:active {
background-color: green;
color: white;
border-radius:10px;
}
</style>

<h2>Sign Up</h2>

<a href=“#" target="_blank">Sign Up</a>

You might also like