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; ...- At the bottom of this page you can find a table with some CSS properties and their values.
<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.
<h2 style="color:#02da03; text-align:center;">HTML - CSS Lesson</h2>Result:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css"><!--
h3 {color:blue; text-decoration:underline;}
--></style>
</head>
<body>
... Page content ...
</body>
</html>
This code defines all "h3" elements to be blue and underlined.<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 one file.
a { font-size: 15px; font-family: Helvetica, Sans-Serif; font-weight: bold; } a:hover { color: #b54090; text-decoration: none; font-weight: normal; } p { background-color: #e7e8fe; font-size: 14pt; text-indent: 20px; font-family: Arial, Sans-Serif; }- The CSS rules defined for a:hover are applied to a link when the mouse cursor is over it.
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
<html> <head> <title>ID selector</title> <style type="text/css"><!-- #idh { color: #0111fe; dext-decoration:overline; text-align:center; } --></style> </head> <body> <h2 id="idh">Text in the first h2</h2> <h2>Other text in the second h2</h2> </body> </html>- In this example, the style defined for "#idh" will be applied only to the "h2" element which has id ="idh".
<html> <head> <title>CLASS selector</title> <style type="text/css"><!-- .cls { color: #01da02; dext-decoration: underline; font-weight: bold; } --></style> </head> <body> <h2 class="cls">Text ...</h2> <h2>H2 tag without class</h2> <ul> <li class="cls">List with class</li> <li>List without class</li> <li class="cls">Another List with class</li> </ul> </body> </html>- In the example above, the style defined for ".cls" selector will be applied to all HTML elements with class="cls", the other remain unaffected.
h3, #idh { color:blue, font-size:15px; }
Property | Description | Values 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 |
<dl> <dt>HTML</dt> <dd> - Hyper Text Markup Language</dd> <dd> - Language for web pages</dd> </dl>
#id { visibility: hidden; }
document.getElementById("id").onclick = function(){ alert("http://CoursesWeb.net/"); }
if(isset($_REQUEST["id"])) { echo $_REQUEST["id"]; }