• Problems

    This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

In the second part of "How to Make a own Web Site for free : The Complete Dummies Guide"  Tutorial , we have discuss about

Understanding and Writing HTML- How to Make a own Web Site for free : The Complete Dummies Guide

In this part we will learn css for styling HTML Document In this tutorial we are going to learn the basis of CSS .This guide is for completely for dummies who had not listen about CSS

What is CSS?

CSS stands for Cascading Style Sheets, and it's the language your browser uses to interpret how elements on a web page should look. The CSS language is pretty easy to understand: You define specific CSS properties, which span everything from element dimensions (width and height), text (weight, style, font-type, color, etc.), positioning, and spacing (margins and paddings).

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files
Essentially, if it has anything to do with how an element should look, it has to do with CSS. To extend on the metaphor above, HTML and the elements in your document are the bones of the site. They provide structure. CSS dresses your site and makes it look nice—or not. That part depends on your design chops.
Written out, for example, CSS looks a little something like this: If I wanted to add a color to a piece of text, the corresponding CSS property is, unsurprisingly, color. To define the color property, you'd simply type color, a colon, declare what the style should be, then end with a semicolon. So, for example, color:red;

What You Will Need

  • A plain text editor or any kind of text editor
  • Web browser
  • A desire to learn some CSS basic code 
Now you will see, you really don't need much to  learn CSS

Get Your Text Editor

In order to write CSS, you need a plain text editor If you want something free, you've got a lot of great options, including Notepad++ (Windows), Kod (Mac), or Sublime Text for either Windows and Mac.
Note: For the purposes of this tutorial, you should save all the files you create in your text editor with .css as your file extension—for example, "style.css". You can edit a .css document in your plain-text editor of choice, but you can also view it in your browser. What you see when you open it in your browser will be very different than what you see when you open it in your text editor.

CSS Syntax:


          selector{property:value;property:value}  
The selector points to the HTML element you want to style.
The block after curly bracket contains one or more property separated by semicolons.
In the following example all <p> elements will be center-aligned, with a red text color:
eg: p{color:red;}

When to Use Classes, IDs, and Element Selectors?

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
  • Element selectors: You should use an element selector when you want most elements of that type to look the same way on your page. So if you wanted all p elements text color to red
    p {
            color:red;
    }
    From then on, every p will respect that style unless you override it.
  • Class selectors: The class selector selects elements with a specific class attribute.To select elements with a specific class, write a period (.) character, followed by the name of the class. Classes are useful for broad styles that you want to apply to more than one element, but it may be a style that you want to use a little more selectively than you would when using the element selector.
    .bold{
            font-size:30px;
    }
    Using the dot (.) before the text "bold", I've told my browser that this selector is a class I'm creating. Now, in any element in my page, I can add an attribute of class="bold"
  • ID selectors: The id selector uses the id attribute of an HTML element to select a specific element.
    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.Defined in CSS by a preceding hash (#), the ID selector is for one specific element and one element only. Essentially this provides a way to adjust styles for one specific element without using inline styles—keeping all your styling in one place.
    #second_div {
            width:500px;
            height:500px;
            color:red;
    }

How to Apply CSS to Elements


Of course, you need to know where to apply your CSS styles so that the elements on your page reflect them. (You couldn't just go typing color:red; willy-nilly and expect results. There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline style

  • Inline styles: This method is best for quick, one-off styles that you want to apply to one element without a lot of overhead. You can add inline styles to any element by defining the style attribute of an element. For example:<p style="font-size:30px;">this text is 30 px.</p>
     
  • Internal stylesheets: An internal style sheet may be used if one single page has a unique style.
    Inside the document (often inside the head), you can define styles for elements in the page using selectors. Internal stylesheets look like this:
    <style type="text/css">
           .bold{
            font-size:30px;
    }
    </style>
     
  • External stylesheets:With an external style sheet, you can change the look of an entire website by changing just one file!
    These stylesheets move the CSS to an external file ending with .css (for example, style.css. The syntax for external stylesheets is exactly like what you saw with internal stylesheets, but you don't need the style declaration. Instead, you link to your external stylesheet like so:<link href="style.css" media="screen" type="text/css" rel="stylesheet" />


For a quick reference of all css tags you can use in your document, this cheatsheet is a good place to start.

No comments:

Post a Comment