Week 3: Demo
CSS Visual Design
CSS Selectors Review
Tag:
We can use CSS to style specific types of tags by their tag name. This will apply the styles to every tag of that type used in the page.
p{ color:red; }
ID:
When we apply an ID attribute to an HTML tag, we can address it individually through CSS. This allows us to isolate the application of styles to individual HTML elements. We use the pound symbol to specify that we are styling a specific ID.
#myelement{ color:red; }
Class:
Adding a class attribute to HTML tags allows them to be part of a family of HTML elements that will be using the same styles from CSS. They don't even need to be the same type of HTML element to use the same CSS class. We use the dot syntax to specify that we are styling a class.
.myclass{ color:red; }
Compound Selection
Compound selection provides us the ability to apply styles to only the children of tags that follow a specific structure. Maybe we want to change the color of links, but only the links that exist within unordered lists.
ul li a{ color:red; }
Following the structure of how the tags are ordered, we can see a hierarchy being established. The above CSS code specifies that anchor (a) tags will be colored red, but they must be a child element of an li element, and those must be child elements of ul elements (meaning we could have an ordered list in the page and those links would not be affected).
We can be even more specific saying that we want the tags to follow each other as direct child elements, not just a descendent somewhere down the chain of hierarchy. Using the greater than symbol allows us to specify direct children:
ul > li > a{ color:red; }
Pseudo-Classes
We can use special names related to the behavior or context of an HTML element in order to change the styles specifically for that moment. For instance, we can change the background color of a div when the cursor hovers over it.
#myelement:hover{ background-color:red; }
Or we can change the color of all of our links when the URL they are directed towards has already been visited by the user:
a:visited{ color:red; }
External Stylesheets
So far we have seen how we can apply styles within a block of
<style> tags, as well as how we can apply styles directly inline with an HTML element by using the style attribute. The preferred technique of applying styles is by using an external stylesheet. This is a separate file with the file extension .css that will house all of our CSS code and we can link to that file from our HTML pages. The benefit of this is that we can have a single file with all of our styles that we can apply to multiple pages, ensuring consistency of styles across pages, and affording you as the developer the ability to update a single piece of code in one location and have it propagate to many different pages. The following line of code goes in between the
<head> tags at the top of your HTML document.
<link href="styles.css" rel="stylesheet" type="text/css">
Graphic CSS Properties
opacity:
We have control over the transparency of our HTML elements by adjusting the opacity property. This will not only affect the HTML element, but all of the child elements it contains. The value must be between 0 and 1.
#myelement{ opacity:0.5; }
border-radius:
We've explored the basics of border styles by adjusting their stroke type, weight, and color, but we also have the opportunity to adjust the border-radius around various HTML elements.
#myelement{ border-radius: 10px; }
#myelement{ border-radius: 15px 50px 30px 5px; }
box-shadow:
Box shadow is a way of adding a drop-shadow behind an HTML element. It uses the rectangular dimensions of the HTML element to determine where the shadow should be applied.
#myelement{ box-shadow:5px 10px 10px grey; }
text-shadow:
Text shadow is similar to box shadow, but rather than use the rectangular dimensions of the HTML element, it instead follows the paths of text content within the HTML element to determine the shape and positioning of the shadow.
Text Shadow
#myelement{ text-shadow:5px 5px 5px red; }
display:
The display property changes the behavior of HTML elements and how they fill the page, as well as how they interact with other content on the page. Many HTML elements like
div,
p elements,
h1 -
h6 elements are all known as "block" elements, because their display property is by default set to "block". This will take up the entire width of the container the element is within.
There are other elements such as
a tags or
img tags that are "inline" elements, which means they flow inline with text content on the page.
It's also possible to set
display: none in order to completely disable an HTML element from being incorporated in the page. This doesn't just make the element invisible, but effectively "removes" it from being included with other HTML elements on the page.
visibility:
The visibility property allows us to toggle on and off the visibility of an HTML element. The difference between
display: none and
visibility: hidden is that the HTML element will still take up space when visibility has been set to hidden.
position:
The position property affords us the ability to change the behavior of how an HTML element interacts with other content on the page. By default, the position of HTML elements is set to "relative", which means that it is going to be arranged according to the elements that came before it.
We can also use
position: absolute to specify an exact location on the page where we would like the element to be placed. This is done by using the
left, top, right, and bottom properties.
There's also the option to set
position: fixed which attaches the HTML element to the browser, which prevents it from scrolling with the rest of the body of the HTML document. More of this to come in week 4.
z-index:
The z-index is the property of an HTML element that determines the order it is drawn to the screen, whether it is overlapping elements or will be overlapped by other elements. The z-index is normally set automatically based on the order the elements are added to the HTML document, but the z-index can be manually adjusted to force items to be on-top or underneath others.