Html Course


CSS (Cascading Style Sheets) offers more control over layout, positioning and graphic display of the HTML elements in the webpage.
Starting with HTML 4.0, all formatting can be removed from the HTML document, and stored in a style sheet.
Style sheet consists of style rules, items that specify which markup element they affect and how that element should appear or behave.
CSS rules are defined as a property name followed by a colon, then one or more property values, and a semicolon.

property1: value1; property2: value2; ...

You can create inline styles (within the HTML tag), internal style sheet (in the Head section) or external style sheet, that contains CSS instructions.

At the bottom of this page you can find a table with some CSS properties and their values


Inline style

Inline styles are CSS rules placed directly within a HTML tag, in the style attribute.
  - Syntax:
<tag style='property1:value; property2:value; ...'> Content </tag>
An inline style can be used if you want to apply a unique style to one single occurrence of an element.
For example, to set the color and alignment of an <h2> heading:
<h2 style='color:#01d002; text-align:center;'>HTML - CSS Lesson</h2>

Internal Style Sheet

Internal styles are defined in the <head> section of the HTML page, in the <style> ... </style> tag.
This method is useful when you want to use the same styles for several HTML elements in a page, so the CSS rules are written once and not for each item.
CSS rules added in the <style> element consist of a selector followed by its associated style declarations within curly braces, as you can see in the next example.
- In this example, the code in the <style> tag defines all 'h3' elements to be blue and underlined

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h3 {
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h3>H3 element</h3>
 ... Page content ...
<h3>Other H3 tag</h3>
</body>
</html>

External Style Sheet

To use an external style sheet, you create it as a separate file (having the .css extension).
- In the external style sheet, the CSS rules are added the same way as in the internal style sheet, but without the <style> tag.
Then, the page you want to use that style sheet must link to it using the <link> tag inside the <head> section.

<link rel='stylesheet' type='text/css' href='filestyle.css' />

With an external style sheet, you can change the look of an entire Web site by editing a single file.
Another advantage of using an external style sheet is that it will be reduced the code of the HTML document, making it to load faster.

- Example:
To create an external style sheet, open a new file in Notepad (or your HTML editor), and add the CSS definitions for each style you want to define in the style sheet. Then save the file with the .css extension.
For example, a file named style.css, which defines properties for all paragraphes (p) and all links (a):
a {
 font-size: 16px;
 font-family: Helvetica, Sans-Serif;
 font-weight: bold;
}

a:hover {
 color: #b54090;
 text-decoration: none;
 font-weight: normal;
}
 
p {
 background-color: #e7e8fe;
 font-size: 17pt;
 text-indent: 20px;
 font-family: Calibri, Sans-Serif;
} 
- The CSS rules defined for a:hover are applied when the mouse cursor is over a link.

Now, include that external CSS file in your web page, by adding the <link> tag in the Head section as in the next example.
<head>
 <title>Page Title</title>
 <link rel='stylesheet' type='text/css' href='style.css' />
</head>

CSS selectors - id and class

Up to this point, this lesson has used HTML tags as the selectors for style rules. However, in HTML tags you can add the 'id' and 'class' attributes.
The value of these attributes can be used as selectors in CSS.
The difference between id and class attributes is the fact that the same 'class' attribute can be added in multiple HTML tags, while the value of an 'id' must be unique, it is used only for a single HTML element.


The id attribute as a selector

If you want to devine some css properties to a certain HTML element, add the 'id' attribute to that element in the HTML document, and assign it a unique value that starts with a letter.
Once the item is marked with the 'id' attribute, you can specify in the style sheet how to format the item, by adding a hash mark (#) in front of the ID value, and the style properties within braces.

- In this example, the style defined for '#idh' will be applied only to the element which has id='idh'.
<!DOCTYPE html>
<html>
<head>
<title>ID selector</title>
<style>
#idh {
 color: #0111fe;
 text-decoration:underline;
 text-align:center;
}
</style>
</head>
<body>
<h2 id='idh'>H2 with id 'idh'</h2>
HTML content...
<h2>Another H2</h2>
</body>
</html>

The class attribute as a selector

The 'class' attribute can be used to apply the same CSS style to multiple and different types of items.
Add the same 'class' value to the HTML tags you want to format, then in the style sheet add a period in front of the class value, and the style rules for the class.

- In this example, the style defined for 'li' will be applied to all <li> elements, and the properties for '.cls' selector will be applied to all HTML elements with class='cls', the other remain unaffected.
<!DOCTYPE html>
<html>
<head>
<title>CLASS selector</title>
<style>
li {
text-decoration: underline;
}

.cls {
 color: #0102da;
 font-size: 18px;
 font-weight: bold;
}
</style>
</head>
<body>
<h2 class='cls'>H2 with class .cls</h2>
<h2>H2 tag without class</h2>
<ul>
 <li class='cls'>List with class .cls</li>
 <li>List without class</li>
 <li class='cls'>Another List with class</li>
<p class='cls'>Some paragraph with class .cls.</p>
</ul>
</body>
</html>
• You can set properties for multiple selectors in a single statement. To do so, separate each selector from the previous one with a comma and a space.
For example:
h3, #idh { color:blue, font-size:15px; }

For more detailed things about CSS, see the Free CSS course.


In the table bellow are presented some CSS properties and their values:

PropertyDescriptionValues or Examples
background-color The background color to apply blue, green, #e5e8fe
color The font color silver, blue, #11dafe
font-family The name of the font family Arial, 'Times New Roman'
font-size A font size measured in points or another measurement unit (pixels, em, centimeters) 12px, 11pt, 1.5cm
font-style The style: normal, italic, or oblique normal, italic, oblique
font-weight How bold the font is lighter, normal, bold, bolder
line-height Sets the line height 150%, 28px, 1.5em
margin-left sets the left margin of an element 8px, 10%, auto
margin-right Sets the right margin of an element 8px, 10%, auto
margin-top Sets the top margin of an element 5px, 3%, auto
text-align Specifies the horizontal alignment of text left, center, right, justify
text-decoration Whether to apply decoration to the text none, blink, underline, overline, line-through
text-indent Specifies the indentation of the first line in a text-block 20px, 1.8cm, 2%
border-style Sets the style of the four borders none, groove, dotted, dashed, solid, double, ridge, inset, outset
border-width grosimea chenarului thin, medium, thick, 3px
border-color Sets the color of the four borders blue, yellow, #abcdef

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
CSS - Cascading Style Sheets in HTML

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (137123)
  2. One Minute Wisdom (1753)
  3. Align DIVs on the same line (8301)
  4. Get data from string with JSON object (2813)
  5. dompdf (3802)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (321)
  2. PHP Unzipper - Extract Zip, Rar Archives (112)
  3. Read Excel file data in PHP - PhpExcelReader (102)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)
Chat
Chat or leave a message for the other users
Full screenInchide