Introduction-to-css
Last updated
Last updated
Browsers combine the content (HTML) and presentation (CSS) layers to display web pages. CSS is the language for styling web pages.
CSS instructions live apart from the HTML elements and have a different look and feel ("syntax"). CSS directives give web pages their specific look and feel. If you have ever been impressed by how a website can be displayed on a desktop browser while the same content looks great on a mobile device, you have CSS to thank for it!
One of the most amazing displays of the power of CSS is the CSS Zen Garden where people take the exact same HTML page and use CSS to create wildly different pages. Take a look!
Like we said: all the difference between these images is created by CSS! Astounding, right!?
We know now what CSS is and its purpose, so how does it differ from HTML and how can we use it?
Recognize the differences between HTML and CSS
List the basics of CSS
Declare CSS properties and values
HTML and CSS play two different roles. When we write HTML, we focus on structure, hierarchy, and meaning — the "marking-up" of content. Questions in the mind of an HTML author are:
Is it best to list these members' names with numbers, or bullets?
Does this menu belong in the navigation in the header?
Should this additional reference be an aside, or a separate section?
These questions deal with structure, hierarchy, and meaning, which are concerns of the content layer (HTML).
When defining the presentation layer (CSS), here are the questions we ask ourselves:
Do we want the header menu to be stationary, or does it scroll with the browser window?
How do we want the content to display inside of a container? For example, does it fill the whole area, edge-to-edge? Is there white space around the content and/or the container?
How large should an H1
be relative to an H2
? What about an H3
?
What properties should links have? Underline or no underline? Which color for the normal state versus the hover state? Should the visited link state be different?
How should the content appear when on a desktop machine versus a mobile device?
As you ask yourself these questions, your focus is on the aesthetic quality of the page. For each bit of content we can define a presentation rule that will change the way the HTML is displayed.
For each presentation rule, there are 3 things to keep in mind:
What is the specific HTML we want to style?
What are the qualities we want to modify (e.g. the properties of text in a paragraph)?
How do we want to modify the qualities of the element (e.g. font family, font color, font size, line height, letter spacing etc.)?
Once you've decided what to modify and how, we can start writing CSS rules.
CSS selectors are a way of declaring which HTML elements you wish to style. Selectors can appear a few different ways:
The type of HTML element(h1
, p
, div
, etc.)
The value of an element's id
or class
(<p id='idvalue'></p>
, <p class='classname'></p>
)
The value of an element's attributes (value="hello"
)
The element's relationship with surrounding elements (a p
within an element with class of .infobox
)
For example if you want the body of the page to have a black background, your selector syntax may be html
or body
. For anchors, your selector would be a
. A few more examples are listed below:
The element type class
is a commonly used selector. Class selectors are used to select all elements that share a given class name. The class selector syntax is: .classname
. Prefix the class name with a '.'(period).
You can also use the id
selector to style elements. However, there should be only one element with a given id in an HTML document. This can make styling with the ID selector ideal for one-off styles. The id
selector syntax is: #idvalue
. Prefix the id attribute of an element with a #
(which is called "octothorpe," "pound sign", or "hashtag").
Each element has a list of qualities that can be styled. CSS "property" names identify those qualities. For text styling, examples of property names include text color
, text-align
and line-height
.
CSS Property Values are directly related to property names. If we are working with the color
property, the value could be a named color such as red
, or #660000
. Some properties have their values set with words, others with numbers, and some can take both.
A CSS property name with a CSS property value is a CSS declaration. To apply a CSS declaration like color: blue
to a specific HTML element, you need to combine your CSS declaration with a CSS selector. The association between one or more CSS declarations and a CSS selector is called a CSS declaration block. CSS declarations (one or more) that applied to a specific selector are wrapped by curly braces ({ }
). Each declaration inside a declaration block must be separated by a semi-colon (;
).
Below is a sample CSS declaration block.
Let's write a more complete example declaration block.
With the combination of HTML and CSS, you are able to define content, structure, and style to websites. Using a CSS selector like h1
or p
paired with a declaration block, you will change the display of that element. Declaration blocks are collections of CSS properties and values.