Scribd Logo
Upload

Welcome to Scribd!

  • Css Introduction

    Uploaded by

    api-295680421
    342 views18 pages
    CSS is a Style Sheet language used for describing the look and formatting of a document written in a markup language. In an HTML document you can create a rule to select different elements and style them. HTML should be used to define the content of the document. Tags like and are obsolete as of HTML 4.

    Original Description:

    Original Title

    css introduction

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS is a Style Sheet language used for describing the look and formatting of a document written in a markup language. In an HTML document you can create a rule to select different elements and style them. HTML should be used to define the content of the document. Tags like and are obsolete as of HTML 4.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    342 views18 pages

    Css Introduction

    Uploaded by

    api-295680421
    CSS is a Style Sheet language used for describing the look and formatting of a document written in a markup language. In an HTML document you can create a rule to select different elements and style them. HTML should be used to define the content of the document. Tags like and are obsolete as of HTML 4.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    CSS Introduction

    Cascading Style Sheets (CSS) is a style sheet language used for


    describing the look and formatting of a document written in a
    markup language.
    In an HTML document you can create a rule to select different
    elements and style them.
    HTML should be used to define the content of the document.
    tags like <center> and <font> are obsolete as of HTML 4.0
    CSS should be used to define the style or layout of the document
    when viewed in the browser.

    CSS Syntax
    A CSS rule consists of a selector and a declaration block.

    The following example selects all <h1> tags and makes the content inside
    red and centered.
    h1 {/*selectorforheading1tags*/
    color: red;/*maketheheadingsred#ff0000*/
    textalign: center;/*centertheheadings*/
    }

    The element Selector


    The element selector selects elements based on the element
    name.
    Example: You can select all <p> elements on a page like this
    p {
    textalign: center;
    color: red;
    }

    The id Selector
    The id selector uses the id of an HTML element in the page.
    An id should be unique within the page, and is used to select a
    single, unique element.
    Example: You can select the element with id=unique
    #unique {
    textalign: center;
    color: red;
    }

    The class Selector


    The class selector uses the class attribute of an HTML element
    in the page.
    You can select all elements with the same class attribute and
    style them.
    Example: You can select the element with class=center_me
    .center_me {
    textalign: center;
    color: red;
    }

    Adding CSS to an HTML Document


    There are 3 ways to add CSS to your HTML
    document.
    1. External

    Style Sheet

    2. Internal

    Style Sheet

    3. Inline

    Styles

    1. External Style Sheet


    You can create a separate file to contain all your CSS rules.
    In your HTML document, you can then include a reference to the file in
    the <head>section using the <link>tag.
    You can share this style sheet with all your HTML documents.
    Example:
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    2. Internal Style Sheet


    You may choose to include your CSS rules by creating an internal
    style sheet.
    This is useful for HTML documents that have a unique style.
    You simply specify all your CSS rules with a <style>tag inside the
    <head> of the document.
    <head>
    <style>
    h1 {
    color: maroon;
    marginleft: 40px;
    }
    </style>
    </head>

    3. Inline Styles
    If you want to add unique styling to a single element, you
    can specify the CSS rules inline.
    Simply use the style attribute and define all your CSS rules.
    Examples:
    <h1 style="color:blue;">
    <img style="width:100px;height:100px"/>
    <table style="width:100%">

    CSS Text
    Text Color
    h1 {
    color: #00ff00;
    }
    For simple colors you can use words like black, blue, red, orange etc. or
    you can choose a color using a color picker such as:
    http://www.w3schools.com/tags/ref_colorpicker.asp
    Text Alignment
    h1 {
    textalign: center;/*center|right|justify*/
    }
    Text Shadow
    h1 {
    textshadow: 2px2px red;
    }

    CSS Font
    In CSS, there are two types of font family names:
    Generic family a group of fonts with a similar look (e.g. Serif,
    Monospace)
    Font Family a specific font family (e.g. Arial, Times New Roman)
    The font-family property should hold several font family names as a
    fallback system.
    Start with the font you want, and end with a generic family. The browser
    will choose your font based upon availability.
    p {
    fontfamily: "TimesNewRoman",Times,serif;
    }

    CSS Font Sizes and Styles


    Font Style
    #normal {
    fontstyle: normal;/*normal|italic*/
    }
    Font Size with Pixels
    h1 {
    fontsize: 40px;
    }
    Font Size with Em (1 em is equal to the current font size)
    h1 {
    fontsize: 2.5em;
    }

    CSS Links
    Links can be styled just like text
    /*unvisitedlink*/
    a:link {
    color: #FF0000;
    }

    textdecoration: none;

    /*visitedlink*/
    a:visited {
    color: #00FF00;
    }
    /*mouseoverlink*/
    a:hover {
    color: #FF00FF;
    }

    textdecoration: underline;

    /*selectedlink themomentthelinkisclicked*/
    a:active {
    color: #0000FF;
    }

    CSS Background
    You can change the background color of an HTML document or even use an image
    for the background
    Colors can be specified in a few different ways:
    body {
    backgroundcolor: #FF0000;/*HEXvalue*/
    }
    body {
    backgroundcolor: rgb(255,0,0);/*RGBvalue*/
    }
    body {
    backgroundcolor: red;/*name*/
    }
    You can also use an image
    body {
    backgroundimage: url("background.jpg");
    }

    CSS Lists
    You can change the list item marker using the list-style-type
    property.
    ul {
    liststyletype: circle;/*circle|square*/
    }
    ol {
    liststyletype: upperroman;/*upperroman|loweralpha*/
    }

    You can even use an image as a list item marker


    ul {
    liststyleimage: url('marker.jpg');
    }

    CSS Tables
    You can specify a border using the border property
    table,th,td {
    border: 1pxsolidblack;
    }
    Choose between single border or separated with the border-collapse property.
    table {
    bordercollapse: collapse;
    }
    Change the height and width:
    table {
    width: 100%;
    }
    th {
    height: 50px;
    }

    CSS Tables continued


    Horizontal Alignment can be set using the text-align property
    th {
    textalign: left;
    }
    Vertical Alignment can be set using the vertical-align property
    td {
    height: 50px;
    verticalalign: bottom;
    }
    You can control the space between the border and the content inside the <td> or
    <th> elements using the padding property.
    td {
    padding: 15px;
    }

    CSS Images
    The height and width properties are used to set the height and width of an
    element.
    img {
    height: 100px;
    width: 50px;
    }

    The float property can be used to wrap text around images.


    img {
    float: right;
    margin: 10px;
    }

    You can use the clear property to control the behavior of floating elements.
    div {
    clear: left;
    }

    You might also like