CSS Introduction

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language, most often used to change the style of web pages written in HTML. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.

Using CSS

CSS can be added in different ways.

Slope Style

  1. Inline style attribute

    <h1 style="color: #98c7d4;">CSS Cross Country</h1>
    
  2. In the <head>

    <head>
    	<style>
    		h1 { color: #98c7d4; }
    	</style>
    </head>
    
  3. External <head>

    <head>
    	<title>CSS Cross Country</title>
    	<link rel="stylesheet" href="styles.css" />
    </head>
    

Selectors

Primary DOM selectors:

  • Element selector

    HTML

    		<h1 class="intro" id="header">Nice and Toasty</h1>
    		

    CSS

    		h1 {
    			color: #aba4ac;
    			margin-bottom: 10px;
    		}
    		
  • Class selector

    HTML

    		<h1 class="intro" id="header">Nice and Toasty</h1>
    		

    CSS

    		.intro {
    			color: #aba4ac;
    			margin-bottom: 10px;
    		}
    		
  • ID selector

    HTML

    		<h1 class="intro" id="header">Nice and Toasty</h1>
    		

    CSS

    		#header {
    			color: #aba4ac;
    			margin-bottom: 10px;
    		}
    		
  • Compound selectors

    HTML

    		<h1 class="intro" id="header">Nice and Toasty</h1>
    		

    CSS

    		h1#header {
    			color: #aba4ac;
    			margin-bottom: 10px;
    		}
    		

Cascade Order

Style priority is determined by position in site:

  • External <link>
  • In the <head>
  • Inline style attribute
  • Using !important

Above order represents Increasing Priority.

Priority is also dependent on position in document:

.intro {
	color: #444245;
}
.intro {
	color: #dddadd;
}

the second color definition for .intro overrides the first.

Non-conflicting properties will be combined:

.intro {
	color: #dddadd;
}
.intro {
	margin-bottom: 5px;
	width: 900px;
}

This can ve combined into:

.intro {
	color: #dddadd;
	margin-bottom: 5px;
	width: 900px;
}

Floating Left & Right

Let’s look at how float works. Look at the following markup:

<article>
	<img src="ski.jpg" alt="Ski!" />
	<p>To successfully ski, simply do not fall.</p>
</article>
img {
	float: left;
}

So, floating removes elements from the document flow and moves
them to a specified edge. The other content within the parent element will wrap around floats.

 photo float.png

float: left / right / none
Stacking order

Floated elements stack up to the parent edge, then move down to
the next available edge.

 photo stack.jpg

Take care with elements that have differing heights – the first
available edge isn’t always below.

<article>
	<img class="ski" src="ski.jpg" alt="Ski!" />
	<img class="sled" src="sled.jpg" alt="Sled!" />
</article>
.ski {
	float: right;
}
.sled {
	float: left;
}

 photo leftleft.jpg

.ski {
	float: right;
}
.sled {
	float: right;
}

 photo leftright.jpg

Be first to comment

Leave a Reply