Cascade Style Sheets

1_ How to embed style in HTML document

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

2_ How to refer to style in another file (2 options)

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

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

3_ How to set style for all LI elements

HTML
 LI { color:blue }

4_ What are DIV and SPAN

5_ How to apply style directly

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_ How to use a style class

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>

7_ Style precedence

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 -->

8_ Available selector 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

9_ Describe pseudo classes

CSS
:first-child { }

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

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

10_ Describe pseudo elements

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

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

11_ Describe attribute selectors

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 */

12_ Text style

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

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

13_ Font style

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

14_ 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;

15_ Background style

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

16_ List style

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

17_ Describe box model

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>

18_ What are 4 available ways to position elements. How to deal with overlapping elements.

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;

19_ 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;

20_ How to define min and max sizes

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

21_ Block/Inline style

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

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

22_ How can you control 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 */

23_ Table with fixed column width

CSS
table-layout: fixed

24_ How to write comments in CSS

CSS
/* a comment */