- Details
- Category: CSS Notes
- Hits: 996
{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
- Details
- Category: CSS Notes
- Hits: 1295
{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
Inside the /* Comment */ marks are CSS comments.
Examples
/* A one-line comment */
/*
A comment
which stretches
over several
lines
*/
/* The comment below is used to
disable specific styling */
/*
span {
color: blue;
font-size: 1.5em;
}
*/
- Details
- Category: CSS Notes
- Hits: 958
{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
Linking CSS to HTML - The complete CSS3 tutorial
Inline CSS through the Style attribute:
CSS code applied with this technique only applies to a single element and can't be re-used for other elements.
It is however a great way to test things out, or to specify rules which you do not expect ever to re-use. Here's how it may be used:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!
</span>
Document wide CSS through style blocks:
The second easiest way to apply CSS to elements in your document is through the use of a style block. HTML includes a tag called style, which can contain CSS code. Here, you can define rules which can then be used all across your document.
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.
</body>
</html>
Global CSS through external CSS documents
A CSS file is simply a plain text file saved with a .css extension and then referenced in the file(s) where you want to
apply the rules.
If we re-use the example from the style block part, we can then move the "highlight" rule to a new file (without the HTML part) and
save it under an appropriate name, e.g. style.css:
.highlight {
color: Blue;
text-decoration: underline;
}
Then reference it in our HTML document, using the link element:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>
- Details
- Category: CSS Notes
- Hits: 949
{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
Introduction to CSS Selectors - The complete CSS3 tutorial
Naming your selectors:
You make up the name and then you prefix it with a dot (.)
Basically, a selector name must begin with an underscore (_
), a hyphen (-
), or a letter (a
–z
) and then be followed by any number of hyphens, underscores, letters, or numbers.
Element selector:
The most basic type of selector is probably the one that simply targets an existing HTML element. For instance, you can target all paragraph elements (<p>) simply by writing the name of it in your stylesheet:.
Class selector:
A class selector looks just like an element selector, but instead of using names that are tied to the names of HTML elements, you make up the name and then you prefix it with a dot (.)
ID selector:
An ID selector looks just like a class selector, but instead of having a dot as the prefix, it uses the hash sign (#)
CSS ID selector should also be used only when you need to target one, specific and unique element on a page.
This is often used for main page elements, e.g. the tags that creates the structure of the page (menu, side box, main content and so on).
Grouping selectors:
Target more than one element at the same time, allowing you to specify the same properties and rules for more than one element at the same time - just separate the selector names with a comma.
Introduction to Advance Selectors - The complete CSS3 tutorial
Descendant Selector:
Descendant selector, which allows you to limit the targeted elements to the ones who are descendants of another element. The syntax is very simple - you simply write the parent(s), separate with a space, and then the actual element you want to target.
<style type="text/css">
p b {
color: Blue;
}
</style>
<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>
Hello, <b>world</b> - what a <b>beautiful</b> day!
Child Selector
It allows you to target ALL children and grandchildren (and so on) of one or several elements. However, sometimes this can be TOO powerful - sometimes you only want to target the direct children of an element. Fortunately for us, CSS has a selector for this as well!
The syntax for using the direct child selector looks like this:
parent > child
<style type="text/css">
div.highlighted > b {
color: Blue;
}
</style>
<div class="highlighted">
<b>Level 0...</b>
<div>
<b>Level 1...</b>
<div>
<b>Level 2...</b>
</div>
</div>
<b>Level 0 again...</b>
</div>
You can add more requirements to the selector, both of the descendant and the child type.
<style type="text/css">
div.highlighted > ul > li > a {
color: DarkOrange;
}
</style>
<div class="highlighted">
<ul>
<li><a href="#">List Link 1</a></li>
<li><a href="#">List Link 2</a></li>
<ul>
<li><a href="#">List Link 2.1</a></li>
</ul>
<li><a href="#">List Link 3</a></li>
</ul>
</div>
Sibling Selector
With the general sibling CSS selector, which takes a selector, followed by a tilde character (~) and then the selector you wish to target, you can target elements by requiring the presence of another element within the same parent element. Another requirement is that the first part of the selector needs to be present in the markup BEFORE the targeted element, even though they are all children of the same parent.
<style type="text/css">
h2 ~ p {
font-style: italic;
}
</style>
<div id="content">
<h1>Hello, world!</h1>
<p>Some text here</p>
<h2>Hello, world!</h2>
<p>Some text here</p>
<div>
<p>More text here</p>
</div>
</div>
Adjacent Sibling Selector
With the adjacent sibling selector, we have just specified that the first paragraph element after
all H2 elements should use italic text. If we had used the general sibling selector,
like we did in the previous chapter for an example much like this one,
all paragraph elements after the first H2 element would be targeted.
The syntax for the adjacent sibling selector is just as easy though,
as you can see - the two selector parts are simply joined by a plus character (+).
<style type="text/css">
div#content h2.main + p {
font-style: italic;
color: Blue;
}
</style>
<div id="content">
<h1>Hello, world!</h1>
<p>Some text here</p>
<h2 class="main">Hello, world!</h2>
<p>Some text here</p>
<p>More text here</p>
<h2>Hello, world!</h2>
<p>Text here as well...</p>
</div>
- Details
- Category: CSS Notes
- Hits: 992
Introduction to the CSS Box Model - The complete CSS3 tutorial
{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
The margin is an outer, invisible border around your element..
You can specify the margin(s) for an element by using one or several of the four margin-* properties, named
- margin-top,
- margin-right,
- margin-bottom
- margin-left.
<style type="text/css">
.box {
background-color: DarkSeaGreen;
width: 100px;
height: 100px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
</style>
<div class="box">
Box
</div>
Using the margin shorthand property
While it's perfectly fine to use the margin-* properties, a so-called shorthand property exists, simply named margin. It allows you to define margin values for all four sides, without having to repeat all the property names each time. The margin property simply directs your values out to the margin-top, margin-right, margin-bottom and margin-left properties, so it's just another way of using the CSS syntax, which will shorten your code in many situations.
The margin property can take from one to four values.
<style type="text/css">
.box {
background-color: DarkSeaGreen;
width: 100px;
height: 100px;
}
</style>
<div class="box" style="margin: 10px 10px 10px 10px;">
Box
</div>
<div class="box" style="margin: 10px 10px;">
Box
</div>
<div class="box" style="margin: 10px;">
Box
</div>
When specifying margins, the following rules apply:
4 values:
- [top margin]
- [right margin]
- [bottom margin]
- [left margin]
3 values (not as commonly used):
- [top margin]
- [left/right margin]
- [bottom margin]
2 values:
- [top/bottom margin]
- [left/right margin]
1 value:
- [top/right/bottom/left margin]
Introduction to the CSS Box Model - The complete CSS3 tutorial
Relative margins
A lot of margins will be specified in absolute values (usually pixels, like we saw in the first example), but just like most other size related CSS properties, you may also use relative values. This is usually done by either using a relative size unit, for instance the em unit (1 em equals the size of the current font), or simply by specifying a percentage-based value.
<style type="text/css">
.box {
width: 100px;
height: 100px;
padding: 10px;
background-color: DarkSeaGreen;
}
.box-header {
background-color: CornflowerBlue;
}
</style>
<div class="box">
<div class="box-header">
Header
</div>
Hello, world!
</div>
Negative margins
This can be utilized to pull an element closer to another or to negate the effect of padding. Now, padding will be explained in the next chapter, but since we'll be using it in the next example, just think of it as an internal margin - space reserved inside of the element, instead of outside like margins.
<style type="text/css">
.box {
width: 100px;
height: 100px;
padding: 10px;
background-color: DarkSeaGreen;
}
.box-header {
background-color: CornflowerBlue;
margin: -10px -10px 10px -10px;
padding: 5px 10px;
}
</style>
<div class="box">
<div class="box-header">
Header
</div>
Hello, world!
</div>
- Details
- Category: CSS Notes
- Hits: 972
Introduction to the CSS Box Model - Borders The complete CSS3 tutorial
{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
A basic border - by using the border-style, border-color and border-width properties, we can easily give an element the border we want.
<style type="text/css">
.box {
width: 100px;
height: 100px;
border-color: CornflowerBlue;
border-width: 2px;
border-style: solid;
}
</style>
<div class="box">
Hello, world!
</div>
Border color
Just a plain old color property, where you can define the color for the border in several different ways, as it is with all color related properties in CSS. Look elsewhere in this tutorial for a complete walkthrough of all the options you have when defining a color in CSS.
Border width
Works much like margins and paddings - can be either an absolute value, like in this example, a relative value, or one of the pre-defined border width values: Thin, medium or thick. If you use the pre-defined values, it's up to the browser to interpret them, which basically gives you less control of how your work will look across all the different devices and browsers.
Border style
For the style of the border, you have a range of options. The most commonly used is probably the solid border, but there are many more to choose from: hidden, dotted, dashed, solid, double, groove, ridge, inset and outset. Wanna know how they all look?
<style type="text/css">
.box {
width: 100px;
height: 100px;
border-color: CornflowerBlue;
border-width: 4px;
margin: 10px;
float: left;
}
</style>
<div class="box" style="border-style: dashed;">Dashed</div>
<div class="box" style="border-style: dotted;">Dotted</div>
<div class="box" style="border-style: double;">Double</div>
<div class="box" style="border-style: groove;">Groove</div>
<div class="box" style="border-style: inset;">Inset</div>
<div class="box" style="border-style: outset;">Outset</div>
<div class="box" style="border-style: ridge;">Ridge</div>
<div class="box" style="border-style: solid;">Solid</div>
Shorthands
properties which allows you to define values for multiple properties at the same time. In the first example, we actually used shorthand properties to define the same color, width and style for borders of all four sides of an element. For instance, border-style actually maps to border-top-style, border-right-style, border-bottom-style and border-left-style, and the same goes for border-width and border-color. This also means that border-style, border-color and border-width can all take from one to four values, allowing you to use different styles, colors and widths for all four sides of the element
<style type="text/css">
.box {
width: 100px;
height: 100px;
border-style: solid dashed ridge dotted;
border-color: CornflowerBlue Chartreuse CadetBlue Chocolate;
border-width: 1px 2px 3px 4px;
}
</style>
<div class="box">
Hello, world!
</div>
Using the border property, you can shorten it even more.
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: 2px solid CornflowerBlue;
}
</style>
<div class="box">
Hello, world!
</div
Border radius
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: 3px solid CornflowerBlue;
border-radius: 5px;
}
</style>
<div class="box">
Hello, world!
</div>
Border-radius is a shorthand property, short for border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. You can set these individually, or use one or several values for the border-radius property to have different values for the four corners of an element.
<style type="text/css">
.circle {
width: 100px;
height: 100px;
background-color: CornflowerBlue;
border-radius: 50%;
}
</style>
<div class="circle"></div>
- Details
- Category: CSS Notes
- Hits: 926
{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
Padding is an inner, invisible border around your element.
<style type="text/css">
.box {
border: 2px solid CadetBlue;
background-color: Gainsboro;
}
</style>
<div class="box">
Hello, world!
</div>
Apply a padding to the box, which will push all child elements away from the borders. This is done with one or several of the padding properties called
- padding-top
- padding-right
- padding-bottom
- padding-left:
<style type="text/css">
.box {
border: 2px solid CadetBlue;
background-color: Gainsboro;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
</style>
<div class="box">
Hello, world!
</div>
Padding shorthand property
The padding property simply directs your values out to the padding-top, padding -right, padding -bottom and padding -left properties,
so it's just another way of using the CSS syntax, which will shorten your code in many situations.
<style type="text/css">
.box {
border: 2px solid CadetBlue;
background-color: Gainsboro;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
<div class="box" style="padding: 10px 10px 10px 10px;">
Box
</div>
<div class="box" style="padding: 10px 10px;">
Box
</div>
<div class="box" style="padding: 10px;">
Box
</div>
When specifying paddings, the following rules apply:
4 values:
- [top padding]
- [right padding]
- [bottom padding]
- [left padding]
3 values (not as commonly used):
- [top padding]
- [left/right padding]
- [bottom padding]
2 values:
- [top/bottom padding]
- [left/right padding]
1 value:
- [top/right/bottom/left padding]