Scribd Logo
Upload

Welcome to Scribd!

  • Css

    Uploaded by

    Gautham Saju
    10 views4 pages

    Original Title

    css

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views4 pages

    Css

    Uploaded by

    Gautham Saju

    Copyright:

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

    What is CSS?

    Cascading Style Sheets (CSS) is used to format the layout of a webpage.

    With CSS, you can control the color, font, the size of text, the spacing between

    elements, how elements are positioned and laid out, what background images

    or background colors are to be used, different displays for different devices

    and screen sizes, and much more!

    Advantages of CSS:

    • CSS plays an important role, by using CSS you simply got to specify a

    repeated style for element once & use it multiple times as because

    CSS will automatically apply the required styles.

    • The main advantage of CSS is that style is applied consistently across

    variety of sites. One instruction can control several areas which is

    advantageous.

    • Web designers needs to use few lines of programming for every

    page improving site speed.

    • Cascading sheet not only simplifies website development, but also

    simplifies the maintenance as a change of one line of code affects

    the whole web site and maintenance time.

    • It is less complex therefore the effort are significantly reduced.

    • It helps to form spontaneous and consistent changes.

    • CSS changes are device friendly. With people employing a batch of

    various range of smart devices to access websites over the web,

    there’s a requirement for responsive web design.

    • It has the power for re-positioning. It helps us to determine the

    changes within the position of web elements who are there on the

    page.

    • Easy for the user to customize the online page

    CSS Syntax

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


    The selector points to the HTML element you want to style.The declaration block

    contains one or more declarations separated by semicolons.Each declaration

    includes a CSS property name and a value, separated by a colon.Multiple CSS

    declarations are separated with semicolons, and declaration blocks are

    surrounded by curly braces.

    Example

    In this example all <p> elements will be center-aligned, with a red text color:

    p{

    color: red;

    text-align: center;

    Using CSS

    CSS can be added to HTML documents in 3 ways:

    • Inline - by using the style attribute inside HTML elements

    • Internal - by using a <style> element in the <head> section

    • External - by using a <link> element to link to an external CSS file

    The most common way to add CSS, is to keep the styles in external CSS files.

    However, in this tutorial we will use inline and internal styles, because this is

    easier to demonstrate, and easier for you to try it yourself.

    Inline CSS

    An inline CSS is used to apply a unique style to a single HTML element. An

    inline CSS uses the style attribute of an HTML element.

    The following example sets the text color of the <h1> element to blue, and the

    text color of the <p> element to red:

    Example

    <h1 style="color:blue;">A Blue Heading</h1>

    <p style="color:red;">A red paragraph.</p>

    Internal CSS

    An internal CSS is used to define a style for a single HTML page. An internal CSS
    is defined in the <head> section of an HTML page, within a <style> element.

    The following example sets the text color of ALL the <h1> elements (on that

    page) to blue, and the text color of ALL the <p> elements to red. In addition,

    the page will be displayed with a "powderblue" background color:

    Example

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    body {background-color: powderblue;}

    h1 {color: blue;}

    p {color: red;}

    </style>

    </head>

    <body>

    <h1>This is a heading</h1>

    <p>This is a paragraph.</p>

    </body>

    </html>

    External CSS

    An external style sheet is used to define the style for many HTML pages. To use

    an external style sheet, add a link to it in the <head> section of each HTML

    page:

    Example

    <!DOCTYPE html>

    <html>

    <head>

    <link rel="stylesheet" href="styles.css">

    </head>
    <body>

    <h1>This is a heading</h1>

    <p>This is a paragraph.</p>

    </body>

    </html>

    The external style sheet can be written in any text editor. The file must not

    contain any HTML code, and must be saved with a .css extension.

    Here is what the "styles.css" file looks like:

    "styles.css":

    body {

    background-color: powderblue;

    h1 {

    color: blue;

    p{

    color: red;

    You might also like