Droid
Would you like to react to this message? Create an account in a few clicks or log in to continue.

This is where you learn anything and develop your computer and mental skills.

MICKYDROID welcomes all of you to this website. feel free to chat me up and ask questions. thanks

HTML CSS

Droid :: Web development :: Learn html

Go down

HTML CSS Empty HTML CSS

Post by Admin Sun Aug 30, 2015 10:06 pm

Example





Code:
<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>





Styling HTML with CSS

CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:

  • Inline - using a style attribute in HTML elements


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


  • External - using one or more external CSS files



The most common way to add styling, is to keep CSS syntax in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.





CSS Syntax

CSS styling has the following syntax:
element { property:value ; property:value }
The element is an HTML element name. The property is a CSS property. The value is a CSS value.
Multiple styles are separated with semicolon.

Inline Styling (Inline CSS)

Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:


Example



Code:
<h1 style="color:blue">This is a Blue Heading</h1>



Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styling is defined in the <head> section of an HTML page, using a <style> element:


Example



Code:
<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>





External Styling (External CSS)

External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire site by changing one file.
External styles are defined in the <head> section of an HTML page, in the <link> element:


Example



Code:
<!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>





CSS Fonts

The CSS property color defines the text color to be used for an HTML element.
The CSS property font-family defines the font to be used for an HTML element.
The CSS property font-size defines the text size to be used for an HTML element.


Example



Code:
<!DOCTYPE html>
<html>

<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>



The CSS Box Model

Every visible HTML element has a box around it, even if you cannot see it.
The CSS border property defines a visible border around an HTML element:


Example







Code:
p {
    border:1px solid black;
}







The CSS padding property defines a padding (space) inside the border:


Example



Code:
p {
    border:1px solid black;
    padding:10px;
}




The CSS margin property defines a margin (space) outside the border:


Example



Code:
p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}





The id Attribute

All the examples above use CSS to style HTML elements in a general way.
The CSS styles define an equal style for all equal elements.
To define a special style for a special element, first add an id attribute to the element:


Example



Code:
<p id="p01">I am different</p>




then define a different style for the (identified) element:


Example

Code:
p#p01 {
    color:blue;
}





The class Attribute

To define a style for a special type (class) of elements, add a class attribute to the element:


Example



Code:
<p class="error">I am different</p>





Now you can define a different style for this type (class) of element:


Example



Code:
p.error {
    color:red;
}



Deprecated Tags and Attributes in HTML5

In older HTML versions, several tags and attributes were used to style documents.
These tags are not supported in HTML5.
Avoid using the elements: <font>, <center> and <strike>.
Avoid using the attributes: color and bgcolor.

Chapter Summary


  • Use the HTML style attribute for inline styling


  • Use the HTML <style> element to define internal CSS


  • Use the HTML <link> element to define external CSS


  • Use the HTML <head> element to store <style> and <link> elements


  • Use the CSS color property for text colors


  • Use the CSS font-family property for text fonts


  • Use the CSS font-size property for text sizes


  • Use the CSS border property for visible element borders


  • Use the CSS padding property for space inside the border


  • Use the CSS margin property for space outside the border


Admin
Admin
Admin
Admin

Posts : 83
Points : 34357
Reputation : 3
Join date : 2015-07-22

https://droid.1talk.net

Back to top Go down

Back to top

- Similar topics

Droid :: Web development :: Learn html

 
Permissions in this forum:
You cannot reply to topics in this forum