CSS Layout II

CSS Align

Align a simple div element using the margin property and setting it to "auto".

If you want to just center the text without setting the width.

The following images are centered by making it a block element and its margin set to auto.

Previous Image

Next Image

The following is a div element inside a parent div element. The parent div element has a relative position while the child div element has an absolute position (relative to its parent div element).

You can also use float properties just make sure to use the clearfix hack to include tall images in your div containers! For the two following divs, the first div does not have a clearfix hack but the second one does.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, ipsa libero quos minus odio optio itaque ratione tenetur esse quod deserunt id autem totam aliquid iure accusantium neque. Aut, suscipit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, ipsa libero quos minus odio optio itaque ratione tenetur esse quod deserunt id autem totam aliquid iure accusantium neque. Aut, suscipit.

CSS Pseudo-Classes

Pseudo-classes are used to define the state of an element. Examples are the hover state of an element, the visited and unvisited state of anchor links, the focus state of an element, and the valid/invalid/required/optional states for form elements.

The following is an anchor link styled depending on its state (link, visited, hover, active):

Next example is a div element that is styled when hovered. Move your mouse over to see a gradient background.

Next example is a div with a dropdown tooltip when hovered.

Next pseudo-class is the first-child. This determines the first child of an element that will be styled by CSS. The span first child of the div element will be styled but not the second, third, ... span.

CSS Pseudo-Elements

Pseudo-elements are used style specific parts of an element. It can be used to style the first letter of a paragraph, insert content and more.

The following div is an example of using pseudo-elements in styling its first line of text:

The next pseudo-element is first-letter. This is showcased below:

The next pseudo-element is the before and after pseudo-element. These adds content before and after the element selected.

The following is an example of a p element that have before and after pseudo-elements (Anthony Mackie ahh face):

If your webpage has lists, you can add the marker pseudo-element to style the list style type such as buttons, disks, numbers, etc.

The following list is an example of how to utilize marker:

The next pseudo-element is the selection. It defines what happens to elements selected by users of your website such as it changes the background color and text color, etc.

CSS Opacity

Opacity specifies the transparency of an element.

The following images are the same but have different opacity values:

Opacity is often use to highlight transparent images such as in a slideshow.

See and hover over the images below (surprise for last pic!):

CSS Navigation Bar

The following is the most basic navigation bar styled by CSS using the ul element and setting the margin and padding to zero.

Now we create a vertical navigation bar by making the list' display into blocks.

Now we create a more advanced vertical navigation bar which automatically highlights when hovered.

Next, we will make the home link an active link by distinctively highlighting it over the other tab menus.

Also add border on bottom of each link except the last one. The navigation bar will look like this:

Last, we will make this vertical navigation bar stick to the left and cover the entire height of the div. We can also add overflow if the side navigation will have too many tabs for a menu.

Navigation bars can also be made horizontal. The following is a horizontal navigation menu using the CSS float.

You can also right align the links you want in your navigation menu just like the following.

You can also add border dividers by adding the border-right property like so.

Next example we will use an iframe to showcase the fix CSS property. This will fix the position of our horizontal navigation in a separate webpage since fix is relative to the entire viewport of the website.

Again we will use another iframe to showcase another CSS property:stick. This property will let our horizontal menu nav to scroll but then stick when its viewport condition is met.

Next we will attempt to design a responsive navigation menu which changes from horizontal to vertical or vice-versa depending on the size of the web browser or the device used. Try to resize your browser window!

Dropdowns

Dropdowns are common in modern websites. When we hover over dropdowns, a list of links will drop down. The following is a simple dropdown menu in a navigation tab.

The previous example is a bit advanced since we are already adding dropdowns to a navigation menu. For the next example, create a simple dropdown using divs.

Hover over me!

Now we will create a simple dropdown menu using buttons, divs, and anchor links. Make sure to encase these elements in one div with relative position for the child's absolute position to work.

Next is an image dropdown that will show an enlarge version when hovered.

Sung-Jin Woo: The Shadow Monarch

CSS Image Gallery

With CSS, you can create image galleries like the following example. Click on the images to view in a new window.

Naruto Uzamaki

Sasuke Uchiha

Boruto Uzamaki

Itachi Uchiha

To make this image gallery better, we will make it responsive depending on browser window size.

Naruto Uzamaki

Sasuke Uchiha

Boruto Uzamaki

Itachi Uchiha

We also have what we call image sprites. This is like a collage of image that is put together to make one image file. Using image sprites will reduce the time for a webpage to load which is especially useful to users with low internet connectivity.

This is an example of an image sprite:

CSS Attribute Selector

The attribute selector is used to select elements with a specific attribute such as an anchor link with a target attribute. Below is an example of selecting links with the target attribute using the attribute selector:

You can also specify more by adding a value to the attribute. Say for example, the background color is light blue instead of white for links which have a target value of _blank which in this case is facebook.com.

There is also an attribute selector for elements with title attribute. We can add the value of a word from a string of words from the title of the element to select it thru CSS.
Example below are images but we will only want to design the images with a "ninja" word in its title attribute using img[title~="ninja"].

There are many other ways of attribute selection. We will discuss the following selectors individually in the following:

CSS Forms

The following is an example form styled by CSS using attribute selectors.

The example form above is a bit advanced so we need to style form elements for the following one at a time.

In this example, we will apply a full width to the text input in the following form:

For the following form, the inputs are padded and have margins.

You can also add colored borders to the input text box. These borders can also be rounded thru CSS.

You can also change the background color of input boxes like so.

Outlines are automatically available on text inputs when in focus. You can change this by removing outlines and change its CSS style when hovered.

Next we wil add a search element in our form which is common in modern websites. This element will have a search icon as background-image.

If you want to upgrade the search bar, we can use transition property.

We can also style text areas. In addition, text area inputs have a resize function but we can set it to none in CSS properties like the one below.

We can also style select and button elements in forms just like the following.

The last exercise for this section is making a responsive form which changes depending on the size of the browser window.

CSS Counters

Counters are like assigned variables in CSS. You can start a counter with counter-reset property then use counter-increment which adds/increments the counter value. Use content to insert the generated value using counter() or counters().

In the example below, we used the variable "test" for our "counter-reset". Then we added content before every "h3" header in this div. We incremented first our variable "test" with "counter-increment" and then we added the resulting counter values with "counter(test)" in our content.

We can also use nested counters just like the following:

CSS Website Layout

There are a plethora of website layouts in the internet and one of the most common layouts is the image below:

For this section, we will again utilize iframes to show a separate webpage to fully understand the topic for website layout.

For the first one, we will design a header which mostly contains the website name and logo commonly found at the top of the webpage.

Now we create a simple horizontal navigation menu just below the header.

Next, we will create a responsive content page for our website that stacks the content on top of each other if the window screen is small like in smartphones.

We can also create unequal widths for each column in our content. Say we create the main content in the middle and two sides on its left and right. Then we proceed to apply responsive web design like so.

The last section for our website layout is the footer. Most often contains the copyright information of our website and some contact info of the author. The following is a simple footer to finish up our demo website.

Now we will try to replicate a responsive web design from W3Schools.com

CSS Math Functions

CSS also allow mathematical functions such as "calc()", "min()", and "max()". These functions are used for specific designs such as the following function "calc()". We will use this function to calculate the width of a div element. Remember, we must at least put one operator for the function to work.

Now we will create a div element that has a gap of 50px between the edges of the window, in this case, another div element.

The next function is the "max()" function. We will attempt to limit the width of the following div by making it follow 50% of the parent element's size or 300px, whichever is higher at the moment.

The last function will be the "min()" function. We will now code the width of the div element below to be the minimum of 50% of its parent element or 300px.