What is CSS and how does it work?
CSS stands for Cascading Style Sheets. You can embed CSS code into HTML files or link them together. Like HTML, CSS code is downloaded, interpreted, rendered, then displayed as the final product (web page).
How the CSS syntax works:
Below is an image of the fundamental CSS model
The difference between id and class:
IDs and Classes can be described as “hooks” – meaning they allow us to directly access and modify different portions of the document.
IDs are unique. Each element can only have one ID, and each page can only have one element with that ID.
Classes are not unique. You can use the same class on multiple elements, and you can use multiple elements on one class.
The difference between external style sheet, internal style sheet and inline style:
External Style Sheet – styles are called up using a separate page
example:
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
Internal Style Sheet – styles are referenced on the same page
example:
<head>
<style type=”text/css”>
<!–
.body {background: #000000;}
–>
</style>
</head>
Inline Style – style attribute goes right on the tag
example:
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
When is it better to use one over the other?
External – when a style is applied to many pages
Internal – when a single document has a unique style
Inline – when only one small section of a document is different
The box model:
The box model is literally a box that wraps around HTML elements. It consists of margins, borders, padding, and the content. The box model allows you to place a border around elements in relation to other elements.
- Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
- Border – A border that goes around the padding and content. The border is affected by the background color of the box
- Padding – Clears an area around the content. The padding is affected by the background color of the box
- Content – The content of the box, where text and images appear
What does floating and position do?
Position rules are used to position an element in the document flow in relation to other elements.
Floating is when you render two elements so they sit side-by-side with each other.
CSS grouping/nesting:
Grouping is a technique used to minimize code when there are elements with the same style.
Example – the code below:
h1
{color:green;}
h2
{color:green;}
p
{color:green;}
…can be group selector-ed into the code below:
h1,h2,p
{color:green;}
Nesting is a technique used to apply a selector within a selector.
In the example below, one style is specified for all p elements, one style is specified for all elements with, and a third style is specified only for p elements within elements with:
p
{color:blue;
text-align:center;}
.marked
{background-color:red;}
.marked p
{color:white;}
How to align elements:
There are two properties used when aligning elements. The choices are for each property are shown below:
text-align: [left, right, center, justify]
vertical-align: [auto, baseline, sub, super, top, middle, bottom, text-top, text-bottom]
How to build a CSS navigation bar:
Since a navigation bar is simply a list of links, you just need to use the tags for an unordered list <ul> and a link <li>:
<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>
Then you simply remove the bullets, margins, and padding:
ul
{list-style-type:none;
margin:0;
padding:0;}
Julia Wice 