example Archives - Complete, Concrete, Concise

CSS – A More Advanced Float Example: Part 3

richardsplanet — Tue, 08 Jan 2019 18:51:51 +0000

A detailed walk through the code.

The Final Page
Source Code
Detailed Code Walkthrough
Final Thoughts
Image Credits

The Final Page

You can see the finished page here.

It is best viewed in a browser window that is 960px wide or larger.

Source Code

HTML>

  
    </span>Clone Page<span class="kw">
     charset="utf-8"  />

    
  
  
     id="wrapper">
       id="title">
         id="site-name">clonage
         id="login" class="clearfix">Login


       id="navbar">
         class=nav-item>Gear
         class=nav-item>Gaming
         class=nav-item>Entertainment
         class=nav-item>Tomorrow
         class=nav-item>Video
         class=nav-item>Reviews
         class=nav-item>Events
         class=nav-item>Local Edition
         id="search" class="clearfix">⌕
      
       id="darkbox">
       id="content" class="clearfix">
         class="column-left">
           id="popular">Popular Now
           class="card">
             class="image">
               src="32-small-1.jpg">
            
             class="headline-small">
              Foods that boost your learning
            
             class="timestamp">🕔 2 Hours
          
           class="card">
             class="image">
               src="32-small-2.jpg">
            
             class="headline-small">
              Robot arms may be the next
              technological frontier
            
             class="timestamp">🕔 2 Hours
          
           class="card">
             class="image">
               src="32-small-3.jpg">
            
             class="headline-small">
              Is virtual reality going to far?
            
             class="timestamp">🕔 2 Hours
          
           class="card">
             class="image">
               src="32-small-4.jpg">
            
             class="headline-small">
              The latest trends in cosplay
            
             class="timestamp">🕔 2 Hours
          

        
         class="column-middle">
           class="card">
             class="image">
               src="32-big-1.jpg">
            
             class="headline-large">
              Before you buy, check our review of the
              hottest cars on the market
            
             class="timestamp">🕔 2 Hours
          
           class="card">
             class="image">
               src="32-big-2.jpg">
            
             class="headline-large">
              Health benefits of fresh fruits
            
             class="timestamp">🕔 2 Hours
          
        
         class="column-right">
           class="card">
             class="image">
               src="32-medium-1.jpg">
            
             class="headline-medium">
              The best places to visit on Jupiter
            
             class="timestamp">🕔 2 Hours
          
           class="card">
             class="image">
               src="32-medium-2.jpg">
            
             class="headline-medium">
              The latest smart watches monitor your
              body's vitals while looking stylish
            
             class="timestamp">🕔 2 Hours
          
           class="card">
             class="image">
               src="32-medium-3.jpg">
            
             class="headline-medium">
              Keeping yourself safe while shopping online
            
             class="timestamp">🕔 2 Hours
          
        
      
       id="footer">Copyright 2018

Detailed Code Walkthrough

Setting Some Page Level Defaults

* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
}

The box-sizing property¹ is set to border-box – instead of the default content-box – for all elements. You almost always want to do this because it makes layout much easier.

The font-family is set to sans-serif, but you are free to choose serif or monospace.²

The font-size is set to 16px. This is the default value for almost all web browsers.

These settings will be applied to all the HTML elements unless overridden by more specific styling.³

The Highest Level Structure

When writing the code, it became obvious that another element – which I call darkbox – was needed below the navbar.

It didn’t have to be added to the high level structure, it could have been nested inside the navbar – but it seemed simpler this way.

At the highest level, the (new) HTML structure looks like this:


   id="wrapper">
     id="title">


     id="navbar">
     id="darkbox">
     id="content" class="clearfix">
       class="column-left">
       class="column-middle">
       class="column-right">
    
     id="footer">

As we walk through the code, it should become clear why it was added.

The Wrapper

The standard way of laying out a webpage is to add a content wrapper between the body tags rather than directly adding content to the body section of the document.


   id="wrapper">

There is no change from the design decision to make the content 960px wide and to center it inside the body section by setting the margins to auto:

#wrapper {
  width: 960px;
  margin: auto;
}

The Title

 id="title">
   id="site-name">clonage
   id="login" class="clearfix">Login

The Title section consists of a single line with two parts:

the site title
the login

The span tag is used to style elements in a line.⁴

We want one element to be to the left and one to the right. This can be accomplished by floating the login to the right.⁵

A .clearfix is applied to the final element to remove the effect of the float.⁶

#title {
  background-color: white;
  color: black;
  padding: 8px;
}

Some basic properties are set for the title area:

background colour,
text colour,
and a little bit of padding to make it look nice.

#site-name {
  font-size: 32px;
  font-weight: bold;
}

To make the site name stand out, the font size is set to 32px and made bold. You could also make the site name an image – this would allow you to use a logo as well.

The title could be floated to the left, but it left justifies automatically, so it is unnecessary. You can add float:left to the class – if you want.

#login {
  color: grey;
  padding-top: 8px;
  float: right;
}

The login is subdued compared to the surrounding text, so it was set to grey instead of black. A custom hexadecimal RGB value could be used as well.

8px of padding was added to the top to vertically align the login text with the site name.⁷ If you wanted to adjust the margin instead of the padding, then the display mode of the span must be changed to inline-block.⁸

The HTML element was also floated to the right of the page.

 id="navbar">
   class=nav-item>Gear
   class=nav-item>Gaming
   class=nav-item>Entertainment
   class=nav-item>Tomorrow
   class=nav-item>Video
   class=nav-item>Reviews
   class=nav-item>Events
   class=nav-item>Local Edition
   id="search" class="clearfix">⌕

Each menu or navigation item is enclosed inside a span element. This allows each item to be individually styled.⁹ Recall that HTML eliminates all excess whitespace characters.¹⁰

The element containing the “search” icon is given the id search since there should be only one search item on the page. It is floated to the right. A suitably sized image of a magnifying glass could have been used, instead similar looking text character is used instead – it is a “telephone recorder” (⌕). This simplifies everything by keeping everything text instead of mixing text and images (not that there is anything wrong with doing that). Finally, the .clearfix is applied to clear the float.

#navbar {
  background-color: #333333;
  color: white;
  border-bottom: 2px solid grey;
}

The background is dark, but not black. A thin border is set on the bottom.

.nav-item {
  display: inline-block;
  padding: 24px 16px;
}

Each .nav-item has display set to inline-block. This allows us full control of the margins (including the top and bottom).

The padding is set to something I considered pleasing looking.

#search {
  color: grey;
  float: right;
  padding-top: 18px;
  padding-right: 16px;
  font-size: 24px;
}

The search element is floated to the right. The colour is a more muted and set to grey. Because the “telephone recorder” is a bit small, the font-size was increased to 24 px. This required adjusting the top padding to make it look centred.

The Dark Box

This is the trickiest element and requires a bit of lateral thinking.

If you look at the original page layout, you see the columns overlap a dark region above them. You also notice that there is a vertical line dividing the columns and a horizontal line dividing the navigation bar from the columns:¹¹

The horizontal dividing line is made by setting the border-bottom of the navbar container to something visible.

Placing an identically coloured element below the navigation bar, it looks like there is a horizontal line dividing the dark region into a top and bottom.

 id="darkbox">

The darkbox is an empty div with some height applied.

Perhaps a better name would be navbar-extension instead of darkbox.

#darkbox {
  background-color: #333333;
  height: 100px;
}

The background-color is set the same as for the navbar.

A height of 100px looks about the right size.

The Content

 id="content" class="clearfix">
   class="column-left">


   class="column-middle">
   class="column-right">

The content is a container holding three left floating columns. It is styled with .clearfix to restore normal flow. The .clearfix could be applied only to .column-right, but it seems better to clear at the parent container level.

#content {
  margin-top: -90px;
}

The margin-top is set to -90px. This causes the content area to be shifted upwards 90px. This causes it to overlap the darkbox. It is possible to use negative values for positioning elements.

The column-left

The .column-left contains the title Popular and 4 cards.

 class="column-left">
   id="popular">Popular Now
   class="card">


   class="card">  
   class="card">  
   class="card">

The .column-left is styled to have a width of 20% and to float left.

.column-left {
  width: 20%;
  float: left;
}

The Popular title is styled using the #popular class which sets the text color to white, adds 16px of padding-left to nicely align the title and set the font-weight to bold so it stands out.

#popular {
  color: white;
  padding-left: 16px;
  font-weight: bold;
}

We will examine the details of the .card class a little later.

The column-middle

The .column-middle consists of two cards.

 class="column-middle">
   class="card">


   class="card">

If you wanted to be more like the Verge website, which has a single large card and then two columns of cards beneath it, the code would look something like this this:

 class="column-middle">
   class="card">


   class="dual-columns">  
     class="dual-left">
       class="card">  
       class="card">  
       class="card">  
    
     class="dual-right">
       class="card">  
       class="card">  
       class="card">

There might be better class names or you might want to use IDs instead of classes.

The .column-middle is styled to have a width of 55% and to float left. It also has a thin border on the left and right side – this gives a nice visual esthetic. How could you make these vertical borders touch the horizontal border applied to the #navbar?¹²

.column-middle {
  width: 55%;
  float: left;
  border-left: 2px solid grey;
  border-right: 2px solid grey;
}

The column-right

The .column-right consists of three cards.

 class="column-right">
   class="card">


   class="card">  
   class="card">

The .column-right is styled to have a width of 25% and to float left.

.column-right {
  width: 25%;
  float: left;
}

The card

A .card encapsulates an:

image,
headline,
and timestamp .

 class="card">
   class="image">
     src="image.jpg">


   class="headline">
    A Headline
  
   class="timestamp">🕔 A Timestamp

The img is wrapped inside a div. This is common practice.¹³ It allows the image and everything associated with the image to be encapsulated in its own container.

The headline contains some text. It could be wrapped inside a p tag, but it is not necessary.

The timestamp also contains some – which also could be wrapped inside a p tag. The clock (🕔) could be an image, but there are some Unicode clock characters¹⁴ – which what is used. It is easier to work with text instead of mixing text and images. However, whatever gets the job done is (usually) good.

The .card is styled to have 16px of padding on the left, right, and bottom. This padding allows the card to have some esthetic spacing on the sides and between cards. If 16px of padding were also applied to the top, then there would be 32px of spacing between the bottom of one card and the top of the next card.

.card {
  padding: 0 16px 16px 16px;
}

The img tag is styled with a width of 100%. This causes the image scale correctly to fit whatever container it is in – the same .card is used in all the columns (20%, 55%, and 25%).¹⁵

img {
  width: 100%;
}

The wrapper for the [img]{html-tag} has the class .image applied to it. At the moment, it doesn’t apply any styling, but it is available for modification in the future.¹⁶

.image {

}

The footer has its own ID and is styled to match the rest of the content on the page.

 id="footer">Copyright 2018

#footer {
  text-align: center;
  padding: 24px;
  background: #333333;
  color: white;
  font-size: 20px;
}

Final Thoughts

Using only what we’ve covered so far, it is possible to create quite sophisticated looking webpages.

You can go a step further and make the page “functional” by adding links to all the articles¹⁷ and creating the corresponding pages.

While it is a lot of work to create a webpage, it is not difficult work.

I encourage you to try and “clone” webpages from other sites. Remember, the goal is to practice and hone your skills, not to wear yourself out.

There is still a lot more to developing webpages and websites. Responsiveness[^responsive] is an important one: your webpage should look good on a 320px X 480px phone display as on a 1920px X 1080px desktop display. But this is something you don’t worry about in the beginning. First get the skills down to make pages that look good on the screen you are working on. In future lessons, we will look at how to make the page look good on varying display sizes.

Image Credits

The images used in the example page are courtesy of:

Apple and Books by jarmoluk
Robotic Arm by PIRO4D
Virtual Reality Cyclist by VR Pexels
Cosplay Girl by ptksgc
Toy Cars by kamal1118
Fruit Salad by silviarita
Astronaut and Jupiter by DasWortgewand
Watch by the5th
Keyboard by atthree23

This was covered in None More CSS Properties to Play With ↩
A future tutorial will show how to use specific fonts like: Arial, Courier, Times New Roman, etc.↩
A future tutorial will explore how CSS properties are applied when the same property is styled differently in multiple rules. This can happen when two or more classes are applied to the same element (or and ID and a class).↩
This was covered in Sectioning Using HTML and Auto Centering Content. I could have floated the title to the left and the login to the right, but it wasn’t necessary. This is a design decision. You are free to float the title to the left.↩
See CSS – Understanding How Float Works – Part 2 ↩
See CSS – Understanding How Float Works – Part 1 for a discussion of clearfix.↩
The site is set to 32px, and the default text size is set to 16px. This means the default text is 16px smaller than the site name. This is divided between the top and bottom of the login (or 8px on the top and 8px on the bottom). We know that floats move up as far as they can, so it is only necessary to add 8px of padding to the top. You can also use trial and error until it looks the way you want.↩
This was discussed in HTML Flow and the CSS Box Model – the ‘Display’ Property ↩
It is more common to use an unordered list (ul) and make each element a list item (li). The list items are styled with display:inline instead of the default display:list-item. This requires using a property I haven’t discussed yet: list-style-type which controls what is displayed next to each list item. Some of the values are: disc, circle, square, none. If you want to use a list instead, then apply list-style-type:none to the unordered list.↩
See HTML Basics – Conclusion ↩
OK, the lines are not so visible in the tiny little image I provide, but they are visible if you go to the engadget website.↩
You move the content area up 100px – the full height of the #darkbox – instead of 90px. You then add a bit of padding (maybe 10px) to the top of the content area so there is some spacing between the content and the horizontal line.↩
Common practices, are often called design patterns. A design pattern is a generic solution for problems that repeatedly come up in software engineering. There are many different types of design patterns.↩
Some of the available Unicode time characters are:

⏰ – Alarm Clock

🕰 – Mantelpiece Clock

⌚ – Watch

⏱ – Stopwatch

⏲ – Timer

⌛ – Hourglass

⏳- Hourglass with flowing sand

⧗ – Black Hourglass

⧖ – White Hourglass

🕛 – 12:00

🕧 – 12:30

🕐 – 1:00

🕜 – 1:30

🕑 – 2:00

🕝 – 2:30

🕒 – 3:00

🕞 – 3:30

🕓 – 4:00

🕟 – 4:30

🕔 – 5:00

🕠 – 5:30

🕕 – 6:00

🕡 – 6:30

🕖 – 7:00

🕢 – 7:30

🕗 – 8:00

🕣 – 8:30

🕘 – 9:00

🕤 – 9:30

🕙 – 10:00

🕥 – 10:30

🕚 – 11:00

🕦 – 11:30

↩
This was covered in Nine More CSS Properties to Play With ↩
You could argue that if there is no styling being applied, the class .image shouldn’t exist. It is difficult to always know what is needed or what sort of changed might be made in the future. Having the class allows you to add a border or background colour. It is common to see unique empty classes applied to certain elements on a page for future styling. For example, you could add a unique paragraph class to each p:
```
 class="par-1234">Some text
 class="par-1235">Some other text
```
This allows you to change the appearance of individual paragraphs at a future date without having to change the HTML code – just the CSS. This can be applied to images, or other blocks of text.↩
There is complexity in adding links to the articles. By default, anchored text, has a different default colour from surrounding text, hovering a mouse over the link unlerlines the link, a previously visited link has a different colour. You can style the a tag, but the options are more restricted (for security reasons).When .clearfix was discussed, you saw the ::after pseudo element selector. CSS has other selectors as well. The most commonly used with anchor tags are: :hover for styling when the mouse is over the content and :visited which allows styling visited links. You are free to experiment with them now, but they will be covered in a future tutorial.
To disable underlining when hovering over a link, you would apply the following style:
```
a:hover {
  text-decoration: none;
}
```
↩

The post CSS – A More Advanced Float Example: Part 3 appeared first on Complete, Concrete, Concise.

CSS – A More Advanced Float Example: Part 2

richardsplanet — Tue, 08 Jan 2019 14:36:01 +0000

Every complicated task needs to be broken down into smaller, simpler tasks.

Here we define the general structure before filling in the details in the next tutorial.

Deciding on the Overall Structure
A Skeleton to Work With
Cards

Deciding on the Overall Structure

When we examine the engadget website:

we see that its general structure looks something like this:

It consists of 6 rectangles:

2 stacked one atop the other at the top
3 stacked side-by-side in the middle
1 at the bottom of the page

It should be obvious that the 3 side-by-side columns are positioned using float.

Estimating the columns widths, it looks like:

the narrowest column occupies about 20% of the display
the widest column occupies about 50% of the display
this leaves 30% for the medium width column

This is a rough guess, but it is a starting point. As we refine the page, we may adjust the relative widths of the columns to make the layout appear more pleasing.

I will make the content section 960px wide.¹ I previously mentioned that 960px is a good rule of thumb for the content width of a webpage²

A Skeleton to Work With

A rough page skeleton might look something like this:

HTML>

  
    </span>Rough Layout<span class="kw">
     charset="utf-8"  />

    
  
  
     id="wrapper">
       id="title">Title and Login


       id="navbar">Navigation Bar and Search
       id="content" class="clearfix">
         class="column-left">Narrowest Column
         class="column-middle">Widest Column
         class="column-right">Medium Width Column
      
       id="footer">The Footer

The rough layout consists of 5 ID styles and 4 class styles.

ID Styles in More Detail

If you remember, each ID must be unique³ on the page and each HTML element can have only one ID.⁴

IDs are used to refer to elements that the should only ever be one of on the page.

#wrapper

#wrapper {
  width: 960px;
  margin: auto;
}

Because we are restricting the content width to 960px, we need to wrap all the content in a container that is 960px wide. We also set the margin to auto so the browser will automatically horizontally center the container in the browser window.⁵

All other elements are styled to occupy the full width of the #wrapper by setting their width to 100%.⁶ By using percentages for all other element dimensions, we can change the content width by altering a single value in #wrapper instead of having to change it everywhere we use px.

#title

#title {
  background-color: white;
  color: black;
  width: 100%;
}

There should only be one title section on a page. We set the background to white (but you can make it any colour you like, you can be creative in your reimagining of the page).

#navbar {
  background-color: black;
  color: white;
  width: 100%;
}

There should be only one navbar on a page. The background is set to black (but you can make it a different colour if you like). The text colour is set to white so it contrasts against the black background.

#content

#content {
  width: 100%;
}

There should be only one content section (even if though it contains 3 columns).

#footer {
  width: 100%;
}

There should be only one footer on a page.

Class Styles in More Detail

.column

.column-left {
  width: 20%;
  float: left;
}

.column-middle {
  width: 50%;
  float: left;
}

.column-right {
  width: 30%;
  float: left;
}

Because we have 3 unique columns, they could have been made IDs. I decided to make them classes because if I decide to go with a 4 column or 5 column layout, I might be able to reuse existing classes (I could have named the columns better).

They are all floated left and have their widths set as a percentage totaling 100%.

.clearfix

.clearfix::after {
  clear: both;
  display: block;
  content: "";
}

The clearfix for the #content could have been written as:

#content::after {
  clear: both;
  display: block;
  content: "";
}

But, we may find ourselves using float in more places as we refine the page, so it is better to have it as a generic clearfix that can be applied as needed.

The HTML in More Detail


   id="wrapper">
     id="title">Title and Login


     id="navbar">Navigation Bar and Search
     id="content" class="clearfix">
       class="column-left">Narrowest Column
       class="column-middle">Widest Column
       class="column-right">Medium Width Column
    
     id="footer">The Footer

It should be straightforward:

the #wrapper encloses all the other html
the #title, #navbar, #content, and #footer stack one atop the other in normal flow
the columns are left floated inside the #content

Cards

Having completed the basic structure, we can now focus on some of the internal details.

Each column contains a number of stacked cards containing information about the article. Each card contains:

An image
A title
A timestamp

The HTML should look something like this:

 class="card">
   class="image">


   class="headline">
   class="timestamp">

It should be straightforward:

a card consists of a wrapper which I call card
inside the card wrapper we have the image, the article headline, and the timestamp
the actual image is placed inside an image container because the image only has a single tag and it is easier to manipulate if we place it inside a div element.⁷

And with some styling it could look something like this:

Foods that boost your learning

🕔 2 Hours

If you are curious, the engadget content is 1275px wide. The narrowest column is 255px, the widest column is 680px, and the medium width column is 340px. Corresponding to column widths of 20%, 53.3%, and 26.7% respectively.↩
See note 4 in the tutorial CSS – Understanding How Float Works – Part 2. It’s a good rule of thumb for desktop webpages because it will render correctly on most desktop browsers.↩
This was covered in the article CSS – Selecting Specific Elements for Styling.↩
This was mentioned in a footnote in the article CSS – Selecting Specific Elements for Styling.↩
Of course, if the browser window is narrower than 960px the page will overflow the browser window – the likely result being a horizontal scroll bar. In future tutorials, we will see how to dynamically adjust the page width and layout to fit different browser window widths. This is known as Responsive Web Design↩
Using percentage as a width value was discussed in ↩
This is a common design style: start with the largest structures and nest things inside until we get to the individual elements. It may seem unnecessary, but it makes for easier maintainability. Remember, div has no semantic meaning, it only provides structure. See Sectioning Using HTML and Auto Centering Content ↩

The post CSS – A More Advanced Float Example: Part 2 appeared first on Complete, Concrete, Concise.

CSS – A More Advanced Float Example: Part 1

richardsplanet — Tue, 08 Jan 2019 14:23:29 +0000

Taking what we know about float and creating a more sophisticated webpage layout.

Instead of creating our own layout, we will copy – more or less – an existing design.

It doesn’t have to be an exact copy.

The Objective
Simplifications
A Tease of What It Could Look Like

The Objective

Copy – more or less – the layout of the homepage of the website Engadget which can be done using float.
Don’t clone the whole page, just the part that you see in your web browser without scrolling. In my browser window, Engadget looks something like this (I eliminated the ads from the page for simplicity):It might look different in your browser.
Don’t make the webpage functional – just go for the look. Creating clickable article links, a working navigation menu, search and login functions are beyond the scope of this exercise. This exercise is just about layout.
Include a footer at the bottom.

Simplifications

To make things easier:

Assume the articles in the central column are the same size instead being a large item on top and two smaller items beneath.
Since the only fonts you know¹ are serif, sans-serif, and monospace don’t worry about trying to match the fonts.²

A Tease of What It Could Look Like

Over the next two tutorials, I will develop code to create a page that looks like this:

This page is similar, but not identical, to the Engadget homepage.

Depending on your browser display width, the Engadget homepage may appear differently. For displays 960 pixels or wider, it should look similar.

Fonts were covered in Nine More CSS Properties to Play With ↩
Future tutorials will cover how to specify other types of fonts, like: Times New Roman, Helvetica, Comic Sans, etc.↩

The post CSS – A More Advanced Float Example: Part 1 appeared first on Complete, Concrete, Concise.

CSS – A Simple Page Using Float

richardsplanet — Wed, 30 May 2018 06:58:32 +0000

The previous exercise asked to create a page with the following layout:

Header section

Large image goes here.

Smaller image

Footer section

The purpose being to try and use floating elements in a design.

An Example Using float
Source Code
Notes
Image Credits

An Example Using float

You can see how the page I styled and structured using float looks here.

Source Code

HTML>

  
    </span>Floating on Dreams<span class="kw">
     charset="utf-8"  />

    

  
  

     class="main">
       class="header">
         id="title">Floating on Dreams
         id="subtitle">A simple page using floats



       class="images">
         class="large-image">
           src="28-big-image.jpg">
        

         class="small-image-container clearfix">
           class="small-image">
             src="28-small-1.jpg">
          
           class="small-image">
             src="28-small-2.jpg">
          
           class="small-image">
             src="28-small-3.jpg">
          
        
      

       class="footer">
        Copyright 2018

Notes

The first thing that needs to be done is to divide the document into nesting and stacking HTML blocks.
This is one possible way to section the document:
There is always a Main container which contains all the content. It was set to have a width of 960 pixels.
The Header and Footer blocks are nested inside the main container.
Between the header and footer there is some content. The content (in this case) is images and is contained within an Images container.
Nested inside the images container is a stacking of large and small images.
The large image has its own container
The small floating images are wrapped in their own container so they act like a single block. The small images block has .clearfix applied to it.
Not all the sectioning divs have styling applied since their sole purpose is to provide structure.
While styling could have been applied directly to the img tags, I chose to wrap them in a div because it allows for greater flexibility in the future.
- Imagine turning those small floating images into a “card”:
  
  A Pensive Cat

Image Credits

The images I used are courtesy of:

charloisporto : Tranquil nature scene
silviarita : Fruit salad
Ataner007 : Woman meditating
susannp4 : Cat

The post CSS – A Simple Page Using Float appeared first on Complete, Concrete, Concise.

A Page <div>ided

richardsplanet — Mon, 30 Apr 2018 04:45:00 +0000

The previous exercise was an attempt to structure and (roughly) centre webpage content.
In this example we use div for sectioning the content on the page and margin:auto to centre it.

An Example Using divs
div Source Code
Notes
span Challenges

An Example Using divs

You can see how the page I styled and structured using divs looks here.

div Source Code

HTML>

  
    </span>A  Page <span class="dv"><</span>Div<span class="dv">></span>ided<span class="kw">
     charset="utf-8"  />

    

  
  

     class="main">
       class="header">
         id="title">A Page <Div>ided
         id="subtitle">
          Handling HTML one <div> at a time



       class="content">
        
          Quam stultum est aetatem disponere ne crastini
          quidem dominum! o quanta dementia est spes
          longas inchoantium: emam, aedificabo, credam,
          exigam, honores geram, tum deinde lassam et
          plenam senectutem in otium referam.
        
        Omnia, mihi crede, etiam
          felicibus dubia sunt; nihil sibi quisquam de
          futuro debet promittere; id quoque quod
          tenetur per manus exit et ipsam quam premimus
          horam casus incidit. Volvitur tempus rata
          quidem lege, sed per obscurum: quid autem ad
          me an naturae certum sit quod mihi incertumest?
        
        
          Stat quidem terminusnobis ubi illum
            inexorabilis fatorum necessitas fixit, sed
            nemo scit nostrumquam prope versetur a
            termino; sic itaque formemus animum tamquam
            ad extremaventum sit.
          
          Nihil differamus; cotidie cum vita paria
            faciamus.
          
          Maximum vitae vitium est quod inperfecta
            semper est, quod [in] aliquid ex illa
            differtur.
          
          Qui cotidie vitae suae summam manum
            inposuit non indiget tempore;ex hac autem
            indigentia timor nascitur et cupiditas futuri
            exedens animum. Nihil est miserius dubitatione
            venientium quorsus evadant; quantum sit illud
            quod restat aut quale sollicita mens
            inexplicabili formidine agitatur.
          
        
      

       class="footer">
        Copyright 2018

Notes

Most of the content is the same as the previous example.
The webpage is sectioned into 4 parts:
1. a main div] which is used to contain and centre everything else on the page.
2. A header div which contains heading content that is common across all pages.
3. A content div which contains the page content.
4. A footer div which contains common content that would be common across all pages.
While classes were used for the main. header, content, and footer sections, IDs would have been a better option. Since there should only be one of each on the page.
The content is justified.
Common styling for the .header and .footer were gathered together. Individual .header and .footer styling were applied later. This could also have been done using addition classes. There are always many ways to do things, but the general guideline should be to try and minimize:
1. the number of duplications – if you find yourself creating lots of classes with the same styling information, perhaps you should consider gathering the styling information together. You could extract it into a common class, or into a common wrapper.
2. the number of specific styling classes you apply to each HTML element. While you can have a long chain of styling classes for an HTML element you should ensure that it is necessary.
The general goal is to make your pages easier to create and easy to maintain. Always ask yourself, “How much code would I have to change if all the styling is changed?” It is always a balance and something that comes with experience.

span Challenges

You were also asked how would you create the following span styles:

Underline a mistake in red?
Create a space for people to in?

It could be done with these classes:

.red-underline {
  border-bottom: 2px solid red;
}

.four-char-space {
  border-bottom: 2px solid black;
  width: 64px;
  display: inline-block;

}

The red underline should be obvious – simply apply a red border to the bottom of the span.
The space for 4 characters is probably not so obvious:

The width is set to 64px based on the assumption that the font size is 16px (I could have set it explicitly just to be sure). Perhaps it should have been made 96px to have additional padding on either side.
The display is set to inline-block because inline elements ignore any applied width or height values.
The width has to be set because you can’t insert a bunch of spaces. Remember that HTML automatically collapses all white space into a single whitespace character.

The post A Page <div>ided appeared first on Complete, Concrete, Concise.

Example Page Where the Content is not Flush with the Left Side

richardsplanet — Fri, 27 Apr 2018 05:05:28 +0000

There is no single right way to do the previous example webpage, so I will show you 3 different ways it could be done.

At the end of the previous tutorial, you were asked to code a page using HTML5 and CSS3 to create a page that looks something like this:

Header / Title

A whole bunch of content. You don’t need to go overboard. The goal is to practice and reinforce your knowledge, not get bored.

Design Assumptions
Method 1
1. Notes 1
Method 2
1. Notes 2
Method 3
1. Notes 3

Design Assumptions

This page is not responsive¹ and is coded for a specific resolution:

The examples are coded for a screen resolution of 1366×768 pixels.²
- If your browser window resolution is lower, the example content will appear right of centre. It may even be off the display and require scrolling to the right.
- If your browser window resolution is higher, the example content will appear left of centre.
- If your browser window resolution is 1366×768, then the example content will appear centred.
The content width is 566 pixels.³
- This leaves 800 pixels to be split between the left and right margin or 400px for the left and 400px for the right.
The font-size is set to 16px
The font-family is sans-serif.

Method 1

You can see this code in action here.

HTML>

  
    </span>Web Page 1<span class="kw">
     charset="utf-8"  />

    

  
  

     id="title" class="centre content">Web Page Sample #1

     class="content">
      Quam stultum est aetatem disponere ne crastini
      quidem dominum! o quanta dementia est spes
      longas inchoantium: emam, aedificabo, credam,
      exigam, honores geram, tum deinde lassam et
      plenam senectutem in otium referam.
    
     class="content">Omnia, mihi crede, etiam
      felicibus dubia sunt; nihil sibi quisquam de
      futuro debet promittere; id quoque quod
      tenetur per manus exit et ipsam quam premimus
      horam casus incidit. Volvitur tempus rata
      quidem lege, sed per obscurum: quid autem ad
      me an naturae certum sit quod mihi incertumest?
    
     class="content">
      Stat quidem terminusnobis ubi illum
        inexorabilis fatorum necessitas fixit, sed
        nemo scit nostrumquam prope versetur a
        termino; sic itaque formemus animum tamquam
        ad extremaventum sit.
      
      Nihil differamus; cotidie cum vita paria
        faciamus.
      
      Maximum vitae vitium est quod inperfecta
        semper est, quod [in] aliquid ex illa
        differtur.
      
      Qui cotidie vitae suae summam manum
        inposuit non indiget tempore;ex hac autem
        indigentia timor nascitur et cupiditas futuri
        exedens animum. Nihil est miserius dubitatione
        venientium quorsus evadant; quantum sit illud
        quod restat aut quale sollicita mens
        inexplicabili formidine agitatur.
    
  
   id="footer" class="content centre ">
    Copyright 2018

Notes 1

A .content class was created to apply the necessary left margin and content width to each HTML element that needs to be in the “content zone” on the page.
While this works, it is a bit clunky because the class has to be applied to every single HTML element that goes in that content zone.
A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
The #header and #footer were given some individual styling.
Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
The box-sizing property was set to border-box because ordered lists have padding on the left side (this is where the numbers go), which would make the width of the ol element as wide as width of the content + the width of any padding + the width of any border – which means it would be wider than the specified 566px. Of course, the ol element could be styled to have a narrower content width to compensate for the internal padding.⁴

Method 2

You can see this code in action here.

HTML>

  
    </span>Web Page 2<span class="kw">
     charset="utf-8"  />

    

  
  

     id="title" class="centre ">Web Page Sample #2

    
      Quam stultum est aetatem disponere ne crastini
      quidem dominum! o quanta dementia est spes
      longas inchoantium: emam, aedificabo, credam,
      exigam, honores geram, tum deinde lassam et
      plenam senectutem in otium referam.
    
    Omnia, mihi crede, etiam
      felicibus dubia sunt; nihil sibi quisquam de
      futuro debet promittere; id quoque quod
      tenetur per manus exit et ipsam quam premimus
      horam casus incidit. Volvitur tempus rata
      quidem lege, sed per obscurum: quid autem ad
      me an naturae certum sit quod mihi incertumest?
    
    
      Stat quidem terminusnobis ubi illum
        inexorabilis fatorum necessitas fixit, sed
        nemo scit nostrumquam prope versetur a
        termino; sic itaque formemus animum tamquam
        ad extremaventum sit.
      
      Nihil differamus; cotidie cum vita paria
        faciamus.
      
      Maximum vitae vitium est quod inperfecta
        semper est, quod [in] aliquid ex illa
        differtur.
      
      Qui cotidie vitae suae summam manum
        inposuit non indiget tempore;ex hac autem
        indigentia timor nascitur et cupiditas futuri
        exedens animum. Nihil est miserius dubitatione
        venientium quorsus evadant; quantum sit illud
        quod restat aut quale sollicita mens
        inexplicabili formidine agitatur.
    
  
   id="footer" class="centre ">
    Copyright 2018

Notes 2

This method avoids using a .content class and directly styles the HTML styles elements so they have the necessary offset (margin-left) and content width.
This saves applying a .content class to every element.
It has the disadvantage that if you try to nest one of the styled elements inside another (for example, a p inside the ol), you would need to apply a class to clear the margin-left property.
A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
The #header and #footer were given some individual styling.
Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
The box-sizing property was set to border-box because ordered lists have padding on the left side (this is where the numbers go), which would make the width of the ol element as wide as width of the content + the width of any padding + the width of any border – which means it would be wider than the specified 566px. Of course, the ol element could be styled to have a narrower content width to compensate for the internal padding.

Method 3

You can see this code in action here.

HTML>

  
    </span>Web Page 3<span class="kw">
     charset="utf-8"  />

    

  
  

     id="title" class="centre ">Web Page Sample #3

    
      Quam stultum est aetatem disponere ne crastini
      quidem dominum! o quanta dementia est spes
      longas inchoantium: emam, aedificabo, credam,
      exigam, honores geram, tum deinde lassam et
      plenam senectutem in otium referam.
    
    Omnia, mihi crede, etiam
      felicibus dubia sunt; nihil sibi quisquam de
      futuro debet promittere; id quoque quod
      tenetur per manus exit et ipsam quam premimus
      horam casus incidit. Volvitur tempus rata
      quidem lege, sed per obscurum: quid autem ad
      me an naturae certum sit quod mihi incertumest?
    
    
      Stat quidem terminusnobis ubi illum
        inexorabilis fatorum necessitas fixit, sed
        nemo scit nostrumquam prope versetur a
        termino; sic itaque formemus animum tamquam
        ad extremaventum sit.
      
      Nihil differamus; cotidie cum vita paria
        faciamus.
      
      Maximum vitae vitium est quod inperfecta
        semper est, quod [in] aliquid ex illa
        differtur.
      
      Qui cotidie vitae suae summam manum
        inposuit non indiget tempore;ex hac autem
        indigentia timor nascitur et cupiditas futuri
        exedens animum. Nihil est miserius dubitatione
        venientium quorsus evadant; quantum sit illud
        quod restat aut quale sollicita mens
        inexplicabili formidine agitatur.
    
  
   id="footer" class="centre ">
    Copyright 2018

Notes 3

This method styles the body element to have the appropriate left margin and necessary width.
Since the body element acts as a container for all the other elements, it is not necessary to style their width or left margin.
It avoids a lot of problems of the first two methods.
It is the preferred method of styling.⁵
A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
The #header and #footer were given some individual styling.
Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
The box-sizing property was set to border-box because I prefer to work with HTML element sizes rather than content sizes. Nevertheless, it wasn’t necessary. Unlike the previous two examples, the ol element would be constrained to the size of the body containing it.

A responsive page is one that adapts to different web browser sizes and resolutions. Thsi will be covered in future tutorials.↩
As of April 2018, this is the most common screen resolution of visitors to this site (~30%). A future tutorial will show how to get the reported screen resolution and browser window size. Be warned, User-Agents (browsers) may lie, so it is bad programming to trust what the browser tells you.↩
There is a lot fo debate as to what the optimal line length is. Guidelines recommend between 45 and 75 characters per line.↩
Consider the following example, in which the ol tag is given a background colour of orange and the li tags are given a background colour of yellow. You can see the orange padding to the left of the list items. in the content-box model, the padding is not part of the width of the element. The padding is there so the numbers have a space to go:
1. Item 1
2. Another item
↩
While the body can be styled, usually it is not. The next tutorial will look at various HTML container elements that are used for layout.↩

The post Example Page Where the Content is not Flush with the Left Side appeared first on Complete, Concrete, Concise.

Five Examples Using CSS Selectors

richardsplanet — Fri, 20 Apr 2018 14:08:40 +0000

Putting various CSS selectors to the test.

Alternating Paragraph Colours
Selectively Styling Ordered Lists
Selectively Styling Anchors
Experiments with Multiple Classes
Selecting with ID, Class, and Attribute

Alternating Paragraph Colours

You can see how my attempt looks here

HTML>

  
    </span>Alternating Paragraph Colours<span class="kw">
    
  
  
    Alternating Paragraph Colours
     class="bar1">Fac ergo, mi Lucili, quod
    aequitatem tuam decet, desine beneficium fortunae
    male interpretari: abstulit, sed dedit

     class="bar2">Ideo amicis avide fruamur quia
    quamdiu contingere hoc possit incertum est.
    Cogitemus quam saepe illos reliquerimus in aliquam
    peregrinationem longinquam exituri, quam saepe
    eodem morantes loco non viderimus: intellegemus
    plus nos temporis in vivis perdidisse.

     class="bar1">Feras autem hos qui
    neglegentissime amicos habent, miserrime lugent,
    nec amant quemquam nisi perdiderunt? ideoque
    tunc effusius maerent quia verentur ne dubium
    sit an amaverint; sera indicia affectus sui
    quaerunt.

     class="bar2">Si habemus alios amicos, male de
    iiset meremur et existimamus, qui parum valent in
    unius elati solacium; si non habemus, maiorem
    iniuriam ipsi nobis fecimus quam a fortuna
    accepimus: illa unum abstulit, nos quemcumque non
    fecimus.

     class="bar1">Deinde ne unum quidem nimis
    amavit qui plus quam unum amare non potuit. Si
    quis despoliatus amissa unica tunica complorare
    se malit quam circumspicere quomodo frigus
    effugiat et aliquid inveniat quo tegat scapulas,
    nonne tibi videatur stultissimus? Quem amabas
    extulisti: quaere quem ames. Satius est amicum
    reparare quam flere.

     class="bar2">Scio pertritum iam hoc esse quod
    adiecturus sum, non ideo tamen praetermittam
    quia ab omnibus dictum est: finem dolendi
    etiam qui consilio non fecerat tempore invenit.
    Turpissimum autem est in homine prudente
    remedium maeroris lassitudo maerendi: malo
    relinquas dolorem quam ab illo relinquaris;
    et quam primum id facere desiste quod, etiam
    si voles, diu facere non poteris.

     class="bar1">Annum feminis ad lugendum
    constituere maiores, non ut tam diu lugerent,
    sed ne diutius: viris nullum legitimum tempus
    est, quia nullum honestum. Quam tamen mihi ex
    illis mulierculis dabis vix retractis a rogo,
    vix a cadavere revulsis, cui lacrimae in totum
    mensem duraverint? Nulla res citius in odium
    venit quam dolor, qui recens consolatorem
    invenit et aliquos ad se adducit, inveteratus
    vero deridetur, nec immerito; aut enim
    simulatus aut stultus est.

     class="bar2">Haec tibi scribo, is qui Annaeum
    Serenum carissimum mihi tam immodice flevi ut,
    quod minime velim, inter exempla sim eorum quos
    dolor vicit. Hodie tamen factum meum damno et
    intellego maximam mihi causam sic lugendi
    fuisse quod numquam cogitaveram mori eum ante
    me posse. Hoc unum mihi occurrebat, minorem
    esse et multo minorem - tamquam ordinem fata
    servarent!

Notes

a style was applied to the body to give it a background colour;
two classes (called bar1 and bar2) were created to style the paragraphs;
the classes were alternately applied to the paragraphs.¹

As a reminder, you have previously seen that HTML collapses any extra white space between text, so breaking the paragraph content over several lines (so it comfortably fits on the page) doesn’t affect the way it appears when rendered.

Selectively Styling Ordered Lists

You can see how my attempt looks here

HTML>

  
    </span>Selectively Styling Lists<span class="kw">
     charset="utf-8" />

    

  
  
    Selectively Styling Lists

    Top 5 Reasons to Learn HTML & CSS
    
      It's fun!
      To be cool!
      Create your own webpages.
      Have a hobby.
      Indulge your curiosity.
    

    Counting Down 5 Reasons to Learn HTML & CSS
     reversed>
      It's fun!
      To be cool!
      Create your own webpages.
      Have a hobby.
      Indulge your curiosity.

Notes

a style was applied to the body to give it a background colour;
a style was applied to the list items to space them out a bit more
reverse ordered lists are selected for styling using an attribute selector. (It is also acceptable to style the reverse ordered list using a class.)

Selectively Styling Anchors

You can see how my attempt looks here

HTML>

  
    </span>Selectively Styling Anchors<span class="kw">
     charset="utf-8" />

    
  
  
    Selectively Styling Anchors
    You can choose to:

    
      View the
         href="/sample/18-styling-anchors.txt">
          source code.
        
      
      View the
         href="/sample/18-styling-anchors.txt"
           target="_blank">source code
        in a new tab.
      
      Download the
         href="/sample/18-styling-anchors.html"
          download>source code.

Notes

a style was applied to the body to give it a background colour;
the anchors were structured using an unordered list. There is no requirement to do this. I did it because it gave a bit of structure.
the list items were given a bit more margin. This was done after styling the links and deciding I needed more space.
the anchor tags were selected and styled based on their attributes. You could have applied a class to each anchor as well. But I think using the attribute is better since that information is already part of the anchor. If you use a class, you need to add additional information to the tag.
you will notice the source code for the first two points to a .txt file instead of an HTML file. This is because a browser will attempt to render HTML files as HTML (i.e. it will display it as an HTML page, not source code).
I use relative links rather than a full URL. Obviously, whatever links you use will need to be appropriate for your environment.

Experiments with Multiple Classes

You can see how my attempt looks here

HTML>

  
    </span>Multiple Class Interaction<span class="kw">
     charset="utf-8" />

    
  
  
    Multiple Class Interaction
     class="class-1 class-2">
      This paragraph is styled with class-1 and class-2.
    
     class="class-2 class-1">
      This pragraph is styled with class-2 and class-1.
    
     class="class-1 class-3">
      This paragraph is styled with class-1 and class-3.
    
     class="class-3 class-1">
      This paragraph is styled with class-3 and class-1.
    
     class="class-2 class-3">
      This paragraph is styled with class-2 and class-3.
    
     class="class-3 class-2">
      This paragraph is styled with class-3 and class-2.

Notes

a style was applied to the body to give it a background colour;
3 simple classes were defined. All of them define a different background colour;
the classes were mixed and matched on various paragraph elements;
the order of application of classes to an element doesn’t matter – i.e., class-1 class-2 gives the same result as class-2 class-1;
the order in which the classes are defined does matter. If you move the definition of class-1 after class-3, you will notice that the applied styles change. This is the cascading aspect of CSS. In general, the most recently seen attribute value is the one that is applied. It is a bit more complicated than that. We will explore this more in a future tutorial.

Selecting with ID, Class, and Attribute

You’ve seen that you can apply multiple styles to an element by using multiple classes. You can also apply multiple styles by using a variety of selectors.
You can see how my attempt looks here

HTML>

  
    </span>Multiple Attribute Styling<span class="kw">
     charset="utf-8" />

    
  
  
    Multiple Attribute Styling
    Any styling selectors you define are applied
      to any and all elements that match the selector.
      So you can have multiple styles applied by
      multiple different selectors.
    
    The following element receives 4 different
      styles applied by 4 different selectors:
    
     id="id" class="class"
       href="http://example.com" target=_blank>
      I wonder where this link goes?

Notes

a style was applied to the body to give it a background colour;
4 different styles are defined. Each style uses a different selector;
all of the styles combine on the anchor tag
while classes are the main way to define styles, remember that there are other selectors as well. In a future, tutorial we will explore how the different styles combine when they overlap – i.e., two or more selectors style the same property differently.

In a future tutorial, you will see how you can selectively style alternating paragraphs without needing to explicitly apply a class to each one.↩

The post Five Examples Using CSS Selectors appeared first on Complete, Concrete, Concise.

A CSS Example with Boxes

richardsplanet — Mon, 16 Apr 2018 05:06:28 +0000

Using borders and margins to show off the CSS Box Model.

A Block Styled Page
The Source Code
Notes

A Block Styled Page

You can see how the page looks here.

The Source Code

HTML>

  
    </span>Hello World<span class="kw">
     charset="utf-8"  />

    

  
  
    This is a heading (for testing purposes)

    Paragraphs are the bread and butter of HTML.

    They can include strong tags.
    

    
      Lists are cool!
      The list things.
      This one has an i inside.
      This one contains a <ul>:
        
          Item 1
          Marked item
          Final item
        
        
What happens with an h2?
      Final order
    

    A final paragraph with a dummy
       href="#">link inside it.

Notes

Using the border property (and a bit of extra spacing from the margin property) how the HTML elements stack and nest is much clearer.
Some elements, like em, i, mark, and a, don’t seem to respect the margin at the top and bottom.
Some boxes stretch to fit the box they are in and others do not.

The post A CSS Example with Boxes appeared first on Complete, Concrete, Concise.

A Basic CSS Example

richardsplanet — Mon, 09 Apr 2018 15:17:38 +0000

A very colourful webpage.

A Colourfully Styled Page
The Source Code
Notes

A Colourfully Styled Page

You can see how the page looks here.

The Source Code

HTML>

  
    </span>Hello World<span class="kw">
     charset="utf-8"  />

    

  
  
    This is a heading (for testing purposes)

    Paragraphs are the bread and butter of HTML.

    They can include strong tags.
    

    
      Lists are cool!
      The list things.
      This one has an i inside.
      This one contains a <ul>:
        
          Item 1
          Marked item
          Final item
        
        
What happens with an h2?
      Final order
    

    A final paragraph with a dummy
       href="#">link inside it.

Notes

Notice that some items are nested inside other items.
Notice that there seems to be some sort of border or margin around nested elements (they don’t go all the way from one edge of the display to the other)
Notice that some elements (like strong) only have a limited effect, but other elements seem to stretch almost across the entire display.

The post A Basic CSS Example appeared first on Complete, Concrete, Concise.

A Recipe Example with an Image

richardsplanet — Fri, 30 Mar 2018 07:34:40 +0000

The previous sample recipe¹ page updated to include an image.

A Sample Recipe Page
The Source Code
Notes

A Sample Recipe Page

You can see how the page looks here.

The Source Code

HTML>

  
    </span>Roasted Swordfish<span class="kw">
     charset="utf-8"  />
  
  

    Roasted Swordfish with Manzanilla Olives, Cherry
       Tomatoes, and Capers

     src="roasted-swordfish.jpg"
      alt="Image of roasted swordfish with olives.">
    Ingredients

    
      4 six-ounce portions of swordfish, each about
        one inch thick
      1 cup Manzanilla olives
      4 cups of peeled cherry tomatoes in juice
      4 teaspoons capers, rinsed
      2 cloves garlic, sliced
      2 lemons juiced
      1 cup loosely packed parsley leaves
      Olive oil
      Salt and pepper
    

    Preparation

    The Sauce
    
      Heat ¼ cup olive oil in a high sided pot over
        medium heat.
      Peel and slice the garlic and add it to the
        warm oil.
      Sauté until the garlic is tender, not browned,
        then add the tomatoes and cook until the tomato
        liquid has reduce by half, about 20 minutes.
      Add the Manzanilla olives, capers, the juice of
        one lemon, parsley, and salt and pepper if needed.
      
      Set aside and keep warm until the swordfish is
        cooked.
    


    The Swordfish
     start="6">
    Season the swordfish with salt and pepper.
    Heat a large sauté pan over medium high heat
      and add about 1/4 cup olive oil.
    When very hot add the swordfish and cook until
      both sides are golden brown, about 3-4 minutes
      per side.
    Set aside on paper towels to absorb any excess
      oil.
    

    To complete
     start="10">
    As the swordfish comes out of the sauté pan,
      divide the sauce between four warm dinner plates.
    
    Place one piece of fish on each plate.
    Squeeze some lemon on each piece of fish and
      serve while hot.

Notes

An h1 tag was used for the title on the page.
The content of the document was divided into two sections: Ingredients and Preparation using h2 tags.
The preparation section was divided into three sections using h3 tags.
The ingredients were listed using an unordered list.
The directions were listed using an ordered list.
For numbering continuity, the start attribute was used.
An image with alt text was inserted below the main title.
You can see from the src that the image is located in the same directory as the html file.

Not all the tags we have seen in earlier tutorials were used because they were not needed – just because there are tags doesn’t mean you have to use them.

Recipe and image courtesy of Foodista and licensed CC By 3.0 ↩

The post A Recipe Example with an Image appeared first on Complete, Concrete, Concise.

example Archives - Complete, Concrete, Concise

CSS – A More Advanced Float Example: Part 3

Contents

The Final Page

Source Code

Detailed Code Walkthrough

Setting Some Page Level Defaults

The Highest Level Structure

The Wrapper

The Title

The Navigation Bar

The Dark Box

The Content

The column-left

The column-middle

The column-right

The card

The footer

Final Thoughts

Image Credits

CSS – A More Advanced Float Example: Part 2

Contents

Deciding on the Overall Structure

A Skeleton to Work With

ID Styles in More Detail

#wrapper

#title

#navbar

#content

#footer

Class Styles in More Detail

.column

.clearfix

The HTML in More Detail

Cards

CSS – A More Advanced Float Example: Part 1

Contents

The Objective

Simplifications

A Tease of What It Could Look Like

CSS – A Simple Page Using Float

Contents

An Example Using float

Source Code

Notes

Image Credits

A Page <div>ided

Contents

An Example Using divs

div Source Code

Notes

span Challenges

Example Page Where the Content is not Flush with the Left Side

Contents

Design Assumptions

Method 1

Notes 1

Method 2

Notes 2

Method 3

Notes 3

Five Examples Using CSS Selectors

Contents

Alternating Paragraph Colours

Alternating Paragraph Colours

Notes

Selectively Styling Ordered Lists

Selectively Styling Lists

Top 5 Reasons to Learn HTML & CSS

Counting Down 5 Reasons to Learn HTML & CSS

Notes

Selectively Styling Anchors

Selectively Styling Anchors

Notes

Experiments with Multiple Classes

Multiple Class Interaction

Notes

Selecting with ID, Class, and Attribute

Multiple Attribute Styling

Notes