CSS Selectors

CSS Selectors
The element Selector

p{
text-align: center;
color: red;
}
The id Selector
#para1 {
text-align: center;
color: red;
}
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 class Selector

.center {
text-align: center;
color: red;
}
To select elements with a specific class, write a period character, followed by the
name of the class.
Grouping Selectors
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
Three Ways to Insert CSS
External style sheet
Internal style sheet
Inline style
External Style Sheet

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain
any html tags. The style sheet file must be saved with a .css extension. An example
of a style sheet file called "myStyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet

<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
CSS Background
background-color
background-image
background-repeat
background-attachment
background-position
background-size:cover;
Text Alignment
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Text Decoration
a{
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformation
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
p{
text-indent: 50px;
}
div {
direction: rtl;
}
http://www.w3schools.com/cssref/playit.asp?filename=playcss_direction&preval=initial
CSS display Property
p.inline {
display: inline;
}
CSS Text
Text Color
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Text Alignment
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Font Family
p{
font-family: "Times New Roman", Times, serif;
}
Font Style
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Font Size
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
Styling Links
a{
color: #FF0000;
}
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Text Decoration
a:link {
}
a:visited {
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}
Background Color
a:link {
background-color: #B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
List
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
An Image as The List Item Marker

ul {
list-style-image: url('sqpurple.gif');
}
Crossbrowser Solution
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
List - Shorthand property

ul {
list-style: square inside url("sqpurple.gif");
}
Table Borders
table, th, td {
border: 1px solid black;
}
Collapse Borders
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Table Width and Height

table {
width: 100%;
}
Horizontal Text Alignment
th {
height: 50px;
}
th {
text-align: left;
}
Vertical Text Alignment

td {
height: 50px;
vertical-align: bottom;
}
Table Padding
td {
padding: 15px;
}
Table Color
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
The CSS Box Model
CSS Border
Border Width
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
Border Color
p.one {
border-color: red;
}
p.two {
border-color: #98bf21;
}
Border - Individual sides

p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Margin - Individual sides

p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
Margin - Shorthand property

p{
margin: 100px 50px;
}
All CSS Dimension Properties
Block-level Elements
Display: none;
li {
display: inline;
}
span {
display: block;
}
The position Property

HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way;
position: relative;
position: fixed;
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #8AC007;
}
</style>
position: absolute;
Overlapping Elements
z-index:
+ve
-ve
The clear Property

The clear property is used to control the behavior of floating elements.
Elements after a floating element will flow around it. To avoid this, use the clear property.
Center Align - Using margin

Setting the width of a block-level element will prevent it from stretching out to the
edges of its container. Use margin: auto;, to horizontally center an element within
its container.
CSS Navigation Bar
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a{
display: block;
width: 60px;
}
li {
display: inline;
}
li {
float: left;
}
a{
display: block;
width: 60px;
}
li {
display: inline;
}
CSS Image Gallery

http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
Example 1 - Creating a Transparent Image

img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Example 2 - Image Transparency - Hover Effect

img {
opacity: 0.4;
}
img:hover {
opacity: 1.0;
}
Image Sprites - Create a Navigation List

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav
The @media Rule
@media screen {
p{
font-family: verdana, sans-serif;
font-size: 17px;
}
}
@media print {
p{
font-family: georgia, serif;
font-size: 14px;
color: blue;
}
}

CSS Selectors

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS Selectors

Încărcat de

Drepturi de autor:

Formate disponibile

CSS Selectors

The element Selector

The class Selector

Three Ways to Insert CSS

External style sheet

Internal style sheet

External Style Sheet

Internal Style Sheet

a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"

a color name - like "red"

An Image as The List Item Marker

List - Shorthand property

Table Width and Height

Vertical Text Alignment

The CSS Box Model

Border - Individual sides

Margin - Individual sides

Margin - Shorthand property

All CSS Dimension Properties

The position Property

The clear Property

Center Align - Using margin

CSS Navigation Bar

CSS Image Gallery

Example 1 - Creating a Transparent Image

Example 2 - Image Transparency - Hover Effect

Image Sprites - Create a Navigation List

The @media Rule

S-ar putea să vă placă și