Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

CSS

VIEWS: 0 PAGES: 14

									                                    ACT ACADEMY

Why should I use CSS?

Cascading Style allows obtaining the full control under HTML tagging. CSS allows easily redefining the all
default properties of any HTML tag. Using CSS you will open new unique opportunities missing in
common HTML.


For example, by means of CSS it's possible to set the tracking between characters and space between
text rows. Using CSS properties you can exactly specify the background image position disallowing the
repeating of the image within the document.


Using CSS you will create new HTML pages much faster. The styles that were once determined can be
used again and again in any part of the HTML document. It's very important to understand that using
CSS in external file gives a chance to change properties for all elements in any pages where this style
definition is used.


CSS Inline

It is possible to place CSS in the your HTML code and this method of CSS usage is referred to as inline
css.


Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can
override style rules that are defined in external or internal by using inline CSS.


CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is
specify the desired CSS properties with the style HTML attribute


Sample


Code:


<p style="background: #660066; text-decoration: underline; color: white;">Inline CSS Sample</p>


Internal CSS
When using internal CSS, you must add a new tag, style, inside the tag. The HTML code below contains
an example of <style>'s usage


<html>


<head>


<style type="text/css">


 h5 {


   text-align: center;


   text-decoration: underline;


   text-transform: capitalize;


  }


</style>


</head>


<body><h5>hello ACT </h5></body>


</html>


Linking to external CSS files

A key benefit of CSS is that you can create a style sheet for use not just within a single page, but
throughout an entire web-project. This external style sheet can be applied so many pages as you desired,
without having to duplicate the code. So if you'd like to change the design of all your pages, you just need
to change one file, instead of making changes to all your pages of the web-project.


To set up an external CSS file:


      1. Create a new file by means of software allowing you to save it as a text file.
      2. Type in your clear CSS codes.
      3. Save the document as filename.css
Link to your external file:


To use external file CSS file on every page that you want affected by CSS, insert the following code in the
head:


   <HEAD>
     <LINK REL=stylesheet TYPE="text/css" HREF="filename.css">
   </HEAD>




CSS Text Properties

                                               Text Formatting

        Property     Description                             Values         Sample Code

                                                             name
          color      Sets text colour                                       h2 {color: red}
                                                             RGB

                                                             normal
   letter-spacing    Sets spacing between characters                        p {letter-spacing: 0}
                                                             length

                                                             normal
                                                             number
     line-height     Sets spacing between lines                             h1 {line-height:36px}
                                                             length
                                                             percentage

                                                             left
                                                             right
        text-align   Sets justification                                     p{text-align: left}
                                                             center
                                                             justify

                                                             none
                                                             underline
  text-decoration Sets text Style                            overline       a{text-decoration: none}
                                                             line-through
                                                             blink

                                                             length
     text-indent     Sets indent text from the left margin                  p {text-indent: 5px}
                                                             percentage

   text-transform    Transforms text letters                 capitalize     h1 {text-transform: uppercase}
                                                            uppercase
                                                            lowercase
                                                            none




SAMPLE

<style type="text/css">

h5 {

   text-align: center;

   text-decoration: underline;

   text-transform: capitalize;

  }

</style>


CSS Font Properties

                                                  Fonts

   Property       Description                      Values           Sample Code

                                                   font-family
                                                   font-size
        font      Sets multiple font properties    font-weight
                                                   font-style
                                                   font-variant

                                                   family-name      p {font-family: verdana,arial}
  font-family Sets font names
                                                   generic-family   p {font-size: 10pt; font-family: arial}

                                                   smaller
                                                                    P {font: 12pt arial}
                                                   larger
      font-size   Sets the size of the text                         P {font: 70% sans-serif}
                                                   xx-small
                                                                    P {font: bold italic large Verdana}
                                                   x-small
                                                     small
                                                     medium
                                                     large
                                                     x-large
                                                     xx-large

                                                     bold
                                                     bolder
                                                     lighter
                                                     100
                                                     200
                                                     300
    font-weight Sets the weight of the text normal                p{font-weight: bold}
                                                     400
                                                     500
                                                     600
                                                     700
                                                     800
                                                     900

                                                     normal
     font-style   Sets the style of the text         italic       p{font-style: italic}
                                                     oblique

                                                     normal
    font-variant Sets the font variant                            h2 {font-variant: small-caps}
                                                     small caps


Sample


<style type="text/css">

.sample

{

 font: italic small-caps 900 14px tahoma

}

</style>
Color and Background

A background image, background color, and foreground color are subject for total CSS control. Using
CSS you can always obtain the required result.


Color & Background properties

Properties           Values                              Examples/Notes                         CSS level

background-          scroll, fixed                                                              CSS1
attachment

background-color (color), transparent                    Color in hex code                      CSS1

background-          none, (location)                                                           CSS1
image

background-          (percent), (length), top, center,                                          CSS1
position             bottom, left, center, right

background-          repeat, repeat-x, repeat-y, no-                                            CSS1
repeat               repeat

background           Any of the above background         {background: URL(back.gif) repeat      CSS1
                     values separated by spaces          fixed}

color                (color)                             Color is in hex code. This refers to   CSS1
                                                         the foreground color.


You are probably familiar with the <body> tag. A typical <body> tag looks something like this:


<body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000">


To convert that into CSS, it looks like this:


body {


background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000; }


Big deal right? But CSS adds some special features. One of the most important is the background-
repeat property. It has these values: repeat, repeat-x, repeat-y, or no-repeat. A regular web page has a
default of background-repeat: repeat, which means the image is repeated both horizontally and vertically.
With CSS, you can set the background to repeat horizontally (repeat-x), repeat vertically (repeat-y), or
not repeat at all (no-repeat).


Sample


Code:


<style type="text/css">

body

{

background: #00ff00 url("/images/bg.gif") no-repeat fixed center center;

}

</style>




Link styles (Pseudo-Class Selectors)

Link styles are pseudoclass selectors in CSS-Talk


CSS specifications refer to link styles as Pseudoclasses... which are special classes that describe styles
for elements that only apply under certain circumstances. It sounds intimidating but is quite simple:


a:link


Describes any hyperlink that has not been visited by the user's browser. In other words, the page linked
to is not present in the browser's local memory.


a:visited


Describes any hyperlink that has been visited and is present in the browser's local memory.


a:hover
Describes a hyperlink while the user's mouse happens to be hovering over it. This class is recognized by
all version 4 and higher browsers, except Netscape 4. <style type="text/css">
a:link {
   color: #999999;
   }
a:visited {
   color: #FFFFFF;
   }
a:hover {
   color: #CCCCCC;
   background-color: #333333;
   text-decoration: none;
   }
a:active {
   color: #333333;
   }
</style>


a:active


Describes a hyperlink that has been clicked but not yet released. This class is recognized by all version 4
and higher browsers, except Netscape.


Link style syntax


<style type="text/css">

a:link {

   color: #999999;

   }

a:visited {

   color: #FFFFFF;

   }

a:hover {
  color: #CCCCCC;

  background-color: #333333;

  text-decoration: none;

  }

a:active {

  color: #333333;

  }

</style>


CSS Margins

Margin properties allow you to set the width of the margin around the element box. Since margins are
outside the element box, the background color or image for the page or parent element is what will show
through the margin.


                                                   Margins

      Property      Description                                       Values       Sample Code

                                                                                   h1 {margin: 4px}
                                                                      length
                    Sets all of the margin properties of an element
       margin                                                         percentage
                    from one to four values                                        h2{margin:2 1 3
                                                                      auto
                                                                                   3px}

                                                                      length
       margin-                                                                     h1 {margin-bottom:
                    Sets bottom margin                                percentage
       bottom                                                                      2em}
                                                                      auto

                                                                      length
      margin-left   Sets left margin                                  percentage h1 {margin-left: 2px}
                                                                      auto

                                                                      length
                                                                                   h1 {margin-right:
   margin-right Sets right margin                                     percentage
                                                                                   10.5%}
                                                                      auto
                                                                     length
                                                                                   h1 {margin-top:
   margin-top    Sets top margin                                     percentage
                                                                                   2em}
                                                                     auto


Samples


<style type="text/css">

p.sample {margin: 1em 2em 3em 4em}

/* top margin 1em, right margin 2em, bottom margin 3em, left margin 4em */

</style>


CSS - Padding properties

Paddings are part of the box formatting model. Each element formatted in this model is in one or more
rectangular boxes representing the padding, border and margin areas.


The padding Properties determine how much space is to be inserted between the border and the actual
content of the element.


                                                Padding

Property Description                                        Values          Sample Code

           Sets all of the padding properties of an         length
 padding                                                                    p {padding: 2em 2em}
           element from one to four values                  percentage

padding- Sets the bottom padding properties of an           length
                                                                            p {padding-bottom: 5px}
 bottom    element                                          percentage

padding-                                                    length
           Sets the left padding properties of an element                   p {padding-left: 12px}
   left                                                     percentage

padding- Sets the right padding properties of an            length
                                                                            P {padding-right: 10%}
  right    element                                          percentage

padding-                                                    length
           Sets the top padding properties of an element                    P {padding-top: 2px}
   top                                                      percentage
Samples


<style type="text/css">

{padding: 5px 10px 5px 10px; }

</style>


CSS List Properties

                                                 List Properties

     Property        Description                             Values             Sample Code

                                                             block
                     Sets how or if an element is            inline
      display                                                                   p {display: block}
                     displayed                               list-item
                                                             none

                                                             list-style-type
                                                             list-style-image
     list-style      Sets all of the list properties                            ul {list-style: circle inside}
                                                             list-style-
                                                             position

                     Sets an image as the list item          url                ul {list-style-image:
  list-style-image
                     marker                                  none               myimage.gif}

     list-style-                                             inside
                     Sets the position of the list marker                       ul {list-style: outside}
      position                                               outside

                                                             disc
                                                             circle
                                                             square
                                                             decimal
                     Sets the appearance of the list item
   list-style-type                                           lower-roman        ol {list-style-type: circle}
                     marker
                                                             upper-roman
                                                             lower-alpha
                                                             upper-alpha
                                                             none
Internet Explorer and Gecko based browser do not render indents for list the same way. You cam make
them the same wih CSS.


First you need to remove/clear the left padding and margins.
ul{
margin-left:0;
padding-left:0;
}
Now, to indent the list XXpx just add the the number of pixels to either the left padding or left margin.
ul{
margin-left:XXpx;
padding-left:0;
}
or
ul{
margin-left:0;
padding-left:XXpx;
}


Samples


<style type="text/css">

ul

{

list-style: square inside url("images/cl.gif")

}

</style>


CSS - common display properties

Display Block and Inline


CSS Code:
a { display: block; }
p { display: inline; }


Samples


<style type="text/css">

a { display: block; }

p { display: inline; }

</style>


CSS: border-radius and -moz-border-radius

CSS3                      Mozilla equivalent       WebKit equivalent


border-top-right-         -moz-border-radius-      -webkit-border-top-right-
radius                    topright                 radius


border-bottom-right-      -moz-border-radius-      -webkit-border-bottom-
radius                    bottomright              right-radius


border-bottom-left-       -moz-border-radius-      -webkit-border-bottom-left-
radius                    bottomleft               radius


border-top-left-radius -moz-border-radius-         -webkit-border-top-left-
                          topleft                  radius


border-radius             -moz-border-radius       -webkit-border-radius


-webkit-box-shadow
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

box-shadow: h-shadow v-shadow blur spread color inset;
-webkit-transform: rotate()
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: rotate(-5deg)

-webkit-transform: skew()
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: skew(5deg,5deg);

text-shadow
h1
{
text-shadow: 2px 2px #ff0000;
}

text-shadow: h-shadow v-shadow blur color;

Opacity property

.opaque1 { // for all other browsers

      opacity: .5;

}

.opaque2 { // for IE5-7

      filter: alpha(opacity=50);

}

.opaque3 { // for IE8

      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

}

								
To top