Home | Knowledge verification | Import for Anki (Save target as ...)

Content:
1. Why to use CSS
2. Including style in HTML document
   - Style in independent file
3. Style for all HTML elements type
4. DIV and SPAN
5. Apply style directly
6. Use a style class
   - Style precedence
   - Selectors combinations
   - Pseudo classes
   - Pseudo elements
   - Attribute selectors
7. Content style
   - Text
   - Font
   - Border style
   - Background style
   - List style
8. Elements geometry
   - Box model
   - Positioning
   - Floating of elements
   - Max - Min
   - Block/Inline style
   - Overflow of content
9. Tips
   - Table with fixed column width
10. Comments

This section requires HTML knowledge.

HTML specification
HTML 4 definition (DTD)
HTML Examples on W3 Schools

Styles were introduced in HTML 4.0.
CSS introduction on w3.org
CSS Specification
CSS 2.1 Specification
CSS 3
CSS on W3Schools

1. Why to use CSS

CSS separates appearance and functionality in HTML pages, which makes it easy to reuse one style for multiple scenarios. It also provides you more features to modify look of your web site than classic HTML.

2. Including style in HTML document

When style is embedded in html page, the STYLE section is embedded directly under html element. The style below will modify color of text in body section to green. 

HTML
<html>
    <STYLE TYPE="text/css">
       BODY { color:green } 
    </STYLE>
<body>
<body>
HELLO
</html>

Style in independent file

It is also possible to place the content of the STYLE section in an independent .css file and refer to it from the html file 

HTML
<html>
<head>
  <link href="my_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
This is a text 
</body>
</html>
or 

HTML
<html>
<STYLE type="text/css">
@import "mystyle.css";
</STYLE>
<body>
This is a text 
</body>
</html>

3. Style for all HTML elements type

Style can be applied to all HTML elements in the page, it this example color of LI element is set to blue 

HTML
 LI { color:blue }

4. DIV and SPAN

Both <div> and <span> elements are be used to create a connection between an HTML element and style. The difference is that DIV is a block-level element and SPAN is an inline element. DIV can contain SPAN, SPAN cannot contain DIV. Next element after DIV section will start on new line.


5. Apply style directly

You can apply style directly in either DIV or SPAN section or HTML element 

HTML
<p style="color: pink">Paragraph text.</p>
<div style="color: blue">
   Use style directly
   <ul>
     <li>XX</li>
     <li><span style="color: red">YY</span></li>
   <ul>
</div>

6. Use a style class

CSS 2.1 Selectors specification
CSS 3 Selectors specification
Selectors with CSS versions

DIV or SPAN section can refer to a predefined style class, which allows reuse of styles. 

HTML
<html>
    <STYLE TYPE="text/css">
      .myStyle {color:blue; }  /* style can be applied to any element */
      p.myStyle {color:blue; }  /* style will applied to all p elements with class="myStyle" - see style precedence bellow */
      .myStyle2 {color:red; }
      p {color:green; } /* style for all paragraphs */
      #myTextBox {color:gray; } /* style element(s) with id="myTextBox" */
    </STYLE>
<body>
<p class="myStyle">Paragraph text.</p>
<div class="myStyle">
   Refer by class
   <ul>
     <li>XX</li>
     <li><span class="myStyle2">YY</span></li>
   <ul>
</div>
</body>
</html>

Style precedence

Basic rule is: the smaller the scope of the style is, the higher precedence. Below is order of precedence in which the style will be applied:

1. Direct style <div style="color : black">
2. Id related style #named {color : yellow; } <div id="named">
3. Element style div.myStyle {color : magenta; } <div class="myStyle">
4. Style for element type <div style="color : black">
5. Generic style (any element) .myStyle {color : blue; } <div class="myStyle"> 

HTML
.myStyle {color:blue; }
div {color:red; }

<div class="myStyle"> <!-- color is red -->


HTML
div {color:red; }
div.myStyle {color : magenta; }
 
<div class="myStyle"> <!-- color is magenta -->


HTML
div.myStyle {color : magenta; }
#named {color:yellow; }

<div id="named"> class="myStyle"> <!-- color is yellow -->


HTML
#named {color:yellow; }
 
<div id="named"  style="color : black"> <!-- color is black -->
See Example
Code example:CSS basics

Selectors combinations

JavaScript
div p     // get all P that are DIV descentants
div > p   // get all P that are DIV children
div + p   // get all P that is first following sibling of DIV
div ~ p   // get all P that are following siblings of DIV  - CSS 3
div p + img // get all IMG that is first following sibling of P in DIV

Pseudo classes

Specification
Pseudo elements allow selecting elements in specific state or position in DOM, e.g. a:hover when user moves mouse over a link. 

CSS
:first-child { }

/* dynamic */
:hover { background-color: yellow } /* mouse over */
:focus { background-color: yellow }   
:active { }  /* being clicked */

/* link only */
a:link { }    /* unvisited */
a:visited { }

Pseudo elements

Specification 

CSS
/* prepends and appends given content */
:before { content:"+++"; }
:after { content:"+++"; }

/* changes look */
:first-line  { }
:first-letter { }

Attribute selectors

Specification 

CSS
img[alt] {} /* all elements with alt attribute */
img[alt=graph]  /* all elements with alt="graph" */
div[title~="stock"] /* all divs with title containing space separated WORD stock */
img[src*="ie"] /* all img elements containing text "ie" - CSS 3 */
img[src^="top"] /* all img elements with src starting with "top" - CSS 3 */
img[src$".png"] /* all eimg lements with src ending .png - CSS 3 */
img[alt=graph][src$\\.png] /* combining attributes with AND */

7. Content style

Text

CSS
text-color:red; 
text-decoration:underline; /* overline, linethrough */
text-shadow: 3px 3px gray; 

text-align:right; /* center, justify */
text-indent:25px;

Font

CSS
font-style: italic; 
font-weight: bold;
font-size: 12px;  /* 50%, 1em(=16px) */

Border style

CSS
border: 5px dotted red;
Available styles: dotted, dashed, solid, double, inset, outset, ridge groove:

Style can be specified for one edge only 

CSS
border-top-style: blue;

Background style

CSS
p { 
background-color:green; 
background-image:url("myphoto.png"); 
}

List style

CSS
ul.myList {list-style-type: circle;} /* square, lower-alpha, upper-roman; */

8. Elements geometry

Visual appearance
Code example:CSS basics

Box model

Specification

margin - outer area outside of border
outline - outer area outside of border - not included in box geometry border - defines border including its thickness
padding - inner area of the box

CSS
<div style="background-color: orange" >
<div style="background-color:yellow; 
margin: 10px 10px 10px 10px; 
outline:dotted 3px blue;  /* not included in box geometry */
border: solid 5px red; 
padding: 20px; 
width:200px; height:150px
">Hello</div>
</div>
Hello
if the outer box contains only background-color without border then top and bottom margins disappears in IE (11).

Positioning

CSS
/* static - default, elements are ordered in standard flow */

/* elements are displayed relatively to standard flow position. The position remains reserved */
position:relative; left:30px; top:-10px;

/* element is located in absolute position from parent (visual position changes when user scrolls) */
position:absolute; left:100px; top:150px;

/* absolute could be used to "anchor" blocks */ 
position:absolute; left:100px; right:50px 

/* element is located in absolute position from browser view area (visual position does not change when user scrolls) */
position:fixed; top:30px; right:5px

/* When elements overlaps, z index can be used to define which elements is on the top. Can be negative */
z-index:-1;

Floating of elements

Floating specifies which way one element will flow the in the containing element 

CSS
float:right;
if the floating elements should cover a rectangular area, clear will ensure that e.g. text after will be pushed out from that area and start under the section with floating elements 

CSS
clear: both;

Max - Min

CSS
min-width:100px;
max-width:200px;
min-height:100px;
max-height:200px;

Block/Inline style

CSS
.inlineStyle {display:inline;}
.blockStyle {display:block;}
.hiddenStyle {display:none} /* does not occupy space */

.invisible {visibility:hidden;} /* occupies space */

Overflow of content

CSS
When containing element is not able to display the whole content then overflow element can define behavior of the container 
overflow:auto; /* scrollbar visible when needed */
overflow:scroll; /* scrollbar always visible */
overflow:visible; /* overflowen text is visible outside of borders */
overflow:hidden; /* overflowen text is not visible */

9. Tips

Table with fixed column width

CSS
table-layout: fixed

10. Comments

CSS
/* a comment */



Home | Knowledge verification | Import for Anki (Save target as ...)