Become the Perfect Front End Developer with HTML5/CSS3/JS

With Web development we intend the software development of applications which are retrieving and sendind information through the world wide web

The Web development is characterized of 2 main areas:

• The back end: the functions and data structure which will reside on the server side and will be then used by the user through a web browser to retrieve and show information on the monitor of a device e.g. Laptop, tablet and smartphone

• The front end: the functions and data structure to be used to display the requested information on the users‘ monitor

In this course we will concentrate on the front end development

Front end development is done with HTML, CSS and Javascript

We will start understanding what HTML is

We will go through the main functions and characteristics of HTML5

We will have an understanding of CSS (focusing on the latest version CSS3)

We will have an overview of Javascript so that you will be able to add some basic functions to make the users interact with the browser

In This video you will understand the structure of a basic HTML file and its components.

We will see the structure of an HTML 4.1 file and the structure of an HTML 5 file.

You will see the concepts of tabs, body, head and title.

You will understand how to input content into an HTML structure.

You will see the difference between the 2 versions: 4.1 and 5

Today if you want to follow the right rules while programming in HTML you need to know what XHTML is and consider your HTML file more as an XHTML file.

Extensible Hypertext Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used Hypertext Markup Language (HTML), the language in which Web pages are formulated.

While HTML, prior to HTML5, was defined as an application of Standard Generalized Markup Language (SGML), a flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. XHTML documents are well-formed and may therefore be parsed using standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser.

In this lesson we will understand the concept of HTML tags and elements.

We will compare the structure of an HTML document to that of an XML document.

We will see how to nest elements within other elements and how to define attributes of elements

The HEAD is the section of an HTML file where you define the inputs for your document, e.g. scripts, styles, parameters and the links to the external files to implement the styles and the scripts to your document elements,

In this lecture we will see how to set a "relative" reference to an external javascript file contained in a separate folder in our structure

We will see how to refer to an external stylesheet saved in a separate folder and how to format HTML elements using this external file.

We will see how to define an external stylesheet

We will see the concept of external style class and how to reference to it to format HTML elements.

We will see what META tags are and how to define them.

We will use META tags to define the content of the web page, the author, the keywors and much more.

You may include a brand of you on your web page which will be displayed in the tab of the browser next to the page title.

We will see how to do this in the HEAD section.

We will see other META elements import for SEO e.g.:

• Http-equiv
• robots
• google-site-verification

This is an overview of the BODY part of an HTML file.

The body is the part which contains the content of an HTML document and therefore contains the HTML elements.

We will have a summary of the main HTML elements, how to place them in the body and where to find documentation about them and their characteristics and where to find all the defined HTML elements as they are defined by the W3 Consortium.

The HEADER element is a container used to present an introduction of the BODY content, including also navigation links.

A HEADER element typically contains:

• one or more heading elements (<h1> - <h6>)
• the logo of the page or business
• information about the author

The HEADER element is not unique, i.e. you can have several HEADER elements in one document.

A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

We will see how to create Article structure including headers.

We will see also how to include images into headers as part of headlines and of articles.

The Footer is a new element of the HTML5 version.

We will see how to define the footer of a web page.

Please do the following:

• create an HTML document will all the elements for an HTML skeleton (HEAD, BODY and elements and information within the HEAD area

• add an article in the HTML document

• add a title in the article "my article" and a paragraph "this is my article content"

The result is available in result_01.html (see in the attached resources)

In this lecture we will setup our HTML document to be ready for the next examples/explanations.

We will setup a header with a logo and a headline.

We will define the block for the content between header and footer.

We will align the content area and the footer.

We well see what an HTML table is and how to define it.

We will see the following:

• THEAD: the table header and we will define the columns of the table header
• TBODY: the table content and we will define table rows and table columns

We will start to understand also comments in HTML

We will see how to define the border of a table.

External table border and internal grids must be formatted separately in modern browser.

We will see how to do this.

We will format the text in the cells of an HTML table.

We will then center the table in a DIV block.

We will see how to set a text in bold or italic or in bold and italic.

We will see how to nest elements within other elements

In an HTML table you can merge cells horizontally and vertically using the attributes colspan and rowspan

BR is the element which allows you to add a line break.

A good way to divide areas with a line is using the HR element.

Like the BR element the HR is an HTML element as well without content.

As an element can also be formatted, e.g. we can change the line style and the size.

iFrame is the HTML element used to include external content to your web pages.

We will display an external website in our wb page using iFrame and then we will embed a Youtube video

We weill see how to express symbols e.g.

• currencies
• math formuals
• special chars
• copyright, trade marks and properties
• icons

etc.

This have their own HTML code and also decimal (DEC) and hexadecimal (HEX) expression.

Text elements in HTMl are headlines, paragraphs and normal texts.

In this lecture we will see the characteristics of each of these types of text elements

The DIV element is one of the standard elements in HTML.

With DIV you can express any other element, e,g, buttons, texts and tables.

We will see how to define DIV elements, how to position them, how to size and resize them and how to include content.

We will see what are the default settings of the size and position of a DIV and how to modify them.

We will see how the size of a DIV element is affected or affects that of its children or elements contained inside the DIV.

The span element is a container which has the characteristics to be displayed inline.

You will see the difference between a span block and a div block and decide which you want to use according to your needs: display block or display inline.

You will see the difference between displaying inline and displaying as block.

Sections are similar to DIVs and may be used to organize your work and recognize every piece as a separate section.

It is good for content rich web pages, e.g. to organize articles and other text according to categories.

The Navigation element is used to define the main navigation area, e.g. the one containing the links to the main pages to a web site (login, help, about,...).

It is used to contains links but it is basically very similar to a div element.

Like for the sections it is more an organizational element.

Menu and MenuItems are elements available in Firefox to be used on the dialog manu appearing on mouse right-click.

You can add other menu items to the menu other than the default ones, e.g. to open new links, send emails or share to social media.

The IMG element is used in HTML to display images on web pages.

It is basically an element without content but with the information about the path of the image to display in one of its attribute.

We will see how to refer relatively to images or with the absolute URL.

Imgaes can also be easily formatted and scaled. We will see how.

Text in an HTML document can contains lists.

List can be ordered (numbered) and unordered (with bullets) and with indented elements (e.g. using the dd, dt elements).

We will see how to define the list we want ion our text and how to format it.

Links are the gateway to other web sites and other web pages.

With links you can redirect to another web site or to another of your web pages.

We will see how to build absolute and relative URI for our links and how to display links on a web page.

With HTML links you can redirect to another page in the same container or in a new tab or even above the page like when you send an email.

We will see which attribute to use to do this and we will see some examples.

In HTML you can also assign links to images.

I.e. you can not only use text as content of your link element but also images, e.g. logos.

In HTML links can be used not only to redirect to other web pages or web sites but also to other parts of content in the same page.

This is very useful if you have a lot of long content in the same page (e.g. articles) and you want to create internal reference between the parts (jumping, e.g. going to top, going to article,...).

We will see how to define the links for this and how to anchor the texts to reference to links.

In this lecture we will have an overview of what an HTML Form is and how it is structured.

We will see the attributes of a Form:

- name: to identify is an element (e.g. for javascript use)

- action: to implement the needed routines/actions

- method: which is the HTTP method to query the server to get information - GET - or to update information - POST)

- role: to distinguish forms on a document according to their purposes

We will see some examples on populare web sites.

We will start building our first form based on the instructions we learned so far.

We will use the FIELDSET elements as a container of all the elements/inputs of our form.

We will use the LEGEND element to give a caption to our form.

We will start understanding how to style a form and even to set in in the center or to another position.

In this lecture we will have an overview of the Input of the type Text.

This Input Box is used to input and submit text (e.g. user information - name, first name, last name, etc.) composed of a string in one line.

If you have more text input boxes first of all you need to identify with a label.

We will see the Label object which may be assigned to every input box in a form.

We will also learn how to distribute text input boxes, how to align them and how to style them.

Sometimes you may input a default value in a text box when the page is displayed, e.g. to reduce the time of the user to input data or to prevent errors. For example you may have a form with a text where to specify the name of a city. If you know that quite often the name is e.g. New York then there is a way to do this.

You will see this in this lecture.

You will also see how to include Placeholders e.g. help text to be used as guidelines but will not affect the final input and output, e.g. when you need to specify that in a text box the user should input the email address.

Dropdowns or combobox menus are created using the Select objet in HTML.

Just speciying the object as Select, automatically the browser will render it in form of dropdown.

To specify the elements or items of a dropdown box you need to use the option objects.

These objects exist only within the select object. The content or displayed text of an option element is the internal text included between the 2 tags <option> and </option> but the value is stored in the attribute "value".

In this lecture you will have an overview of the select and option objects.

The best why to verify the values selected in a select object is using javascript.

We will use Javascript to display the select values in a select element.

There are options that can be defined as dummy of informational (e.g. the title of a category or a specification on how to use the select - "please select a product") and their value must not be consider as valid. At this scope you need to use Javascript to avoid that their "dummy" value is considered as valid to be submitted.

You can also specify one as the default item in a select element and this will be displayed by default as selected every time the web page with that form is loaded.

We will see how to do this with the attribubute "selected".

Radio buttons are HTML elements used in a form for the user to choose among a limited number of options where only one has to be selected. You can do this with a select element but if the number of options is limited and you want to make them very clear then you should use the radio buttons.

To make radio buttons depend one another you need to give them the same name but different values. the value of the selected one will be chosen when submitting the form.

In this lesson we will talk about checkboxes which are used as an option with 2 values.

If the element is checked one value is selected, otherwise the other one is selected.

The default one is defined by the status of the checkbox when the page is loaded that cen be checked or not checked.

YOu can by default set a checkbox as checked on page load. The same is valid for radio buttons. You can by default set one of them to the status of "checked" when the page is load and its value is the default value.

Checkboxes can also be displayed as disabled. That means the user cannot check them (cannot change the value). This is used to show for example an option whose value is fixed but you want the user to be aware of it.

YOu can also disable other input elements (e.g. text elements). For example when the value of a text box is needed but cannot be changed.

Text Areas are special elements in HTML forms.

They are a bit different than the other input elements and contain text which is recognized as rich text.

So they are like text editors where carriage returns are recognized as line breaks.

You can also format them and disable them.

Buttons are elements in HTML used to trigger events. They are used to submit forms (although the SUBMIT object is defined to do this) or to trigger other actions with Javascript.

We will see an example of actions triggered when a button is clicked.

As any other input object a button can be formatted or customized as any other Form input element.

Submit buttons are special buttons in HTML forms.

They are used to submit forms and you do not need to specify any action or event. The submit event is already consider per default.

As any other input element a submit button can be formatted and customized.

Multimedia elements are native elements in HTML5 and with a few instructions you can embed audio, video, images and animations to your web pages.

In this lecture we will have an overview of the AUDIO element.

An audio element is characterized by properties e.g. controls, to display the console to control the playback of an audio file, and autoplay, to let the audio playback on page load.

You just need to specify the URL of your audio file to have it embeded on your web pages.

In this lecture we will have an overview of the VIDEO element.

Like for the audio a video element is characterized by properties e.g. controls, to display the console to control the playback of an video file, and autoplay, to let the video playback on page load.

You may have also different video formats, e.g. mp4, ogg, etc. and you should refer to any of them to be sure that if your browser does not support one of your format, it may support another one.

In video objects you can also specify the url of a an image to be used as a splash image, i.e. the image which is displayed on the video canvas on page load as video presentation.

OBJECT is an element known also as HTML plugin or HTML helper.

Object is used to embed any kind of media and also other web pages.

We will see how to embed a video, a flash file and another HTML page.

The Embed element is similar to the Object element.

It is not available on Firefox.

You just can embed any kind of media and HTML file to your web page using the Embed object and specifying the media URL in the src attribute.

In this lecture I will show you some tips and tricks to use when you want to embed a flash file in your web page.

To prevent issue due to the different settings of the different browser you should combine the 2 solutions with the Object element and the Embed element.

You will see how to do this so that if a user ignores one configuration, can render the other one.

You may already know that you can embed a Youtube video into your web pages.

Youtube helps you in doing this, but you may not be aware that you can set some parameters to configure your video.

For example you can:

1. disable the display of suggested videos at the end of the playback
2. hide video information
3. enable autoplay
4. enable full screen view

etc.

In this lecture I will show you how.

With the object element you can also embed files e.g. Pdf and SVG.

When you embed a pdf file the browser will render also the standard pdf viewer with zoom and paging functions.

SVG are files which reproduce an image where the geographical information is provided in XML formal.

Just parsing the file the browser will render the graphics.

Canvas are new elements in HTML5.

They are like a board where you can draw geometric objects e.g. lines, rectangles, circles and even text.

By the way you need to use Javascript to actually draw objects on a canvas and I will show you how.

If you do not want to use Javascript to draw objects into Canvas elements you may use the SVG element to embed geometrical shapes.

With SVG, setting the values of some parameters you can statically draw geometrical shapes.

CSS is the styling language or set of instructions to define styles of HTML elements.

With CSS you can format the border and background of the elements, set their colors and size.

You can even modify the styles of texts, fonts and paragraphs.

CSS instructions can be specified in an external stylesheet which you need to refer to in your HTML file providing the link in the HEAD part.

But CSS can also be defined inline for each element assigning the settings in form of string as the value of the style attribute.

You may also include the definition of styles (i.e. classes) in the HEAD part of your HTML file.

Classes are the fundamental structures of information when you want to style HTML elements.

CSS styles can be defined in an external stylesheet file, as well as in the HEAD part of an HTML file.

You need to pay attention if you use both settings, i.e. part of your styles are in an external stylesheet and part is in your HTML file.

In fact if you have classes having the same name in the 2 situations the browser will not generate any error. Instead it will consider as valid the one which the browser parses as the last.

You may use this behavior to override classes (extend styles).

In CSS you can define the same class many times in the same stylesheet or also in the HTML head.

If you define different settings for every definition of the same class, all will be considered by the browser as they were defined in the same place.

If the same property is defined in many places in different ways (e.g. border-style: solid and then border-style:dashed) the last one will be consider by the browser (in our example: style: dashed).

This phenomenon is known as Class Override.

You can also deefine the settings for more classes together.

In HTML you can assign style to an HTML element with the attribute style or the attribute class.

The attribute style is used to do inline styling.

With the attribute class you refer to a style defined somewhere else (in the head part of the HTML file or in an external stylesheet).

The settings specified in the attribute style have the higher priority. So if you define the same style in the class and in the inline style, that defined in the inline style will be considered by the browser and the class definition will be ignored.

The co-existence of inline style and class in an HTML element sometimes is an advantage.

In fact, you may have defined a style class which you will assign to several HTML elements but then for some of these elements you may need to modify partially the style setting, e.g. you want a different border or background.

In this case you just assign the same class to these elements and apply the small changes using the inline style definition.

You can so avoid to define many similar classes.

In fact the advantage of definining a class is to concentrate the style settings for similar elements in the same place, so that if you need to do some changes you will do them in only one place.

If you define many several classes you will need to check all of them if you need to do the changes.

Using one class means you will change only once. The definition in the inline styles for these "special" elements will not be affected. If needed you just modify the settings in the style attribute of those elements.

With CSS you can also modify the default style of the "native" HTML elements e.g. body, html, h1, table, p, etc,

That means that you can change the default font family of the HTML file modifying the definition of the settings of the body elements.

Bear in mind that these settings will be overriden if you assign a class to an element whose default settings have been modified.

The priority strenght is so: style > class > native.

You can change the style of an HTML element of a type (e.g. body, p, h1,...) in an external stylesheet file or in the head part of the HTML file

You can define the style common to all the elements in an HTML file using the * symbol and defining the style for this "*" universal element.

This can be done in an external stylesheet or in the head part of the HTML file

You can also define the style of an element identified by an id.

This is useful if you have an element which is unique in your HTML document and has to be referred to in a Javascript file.

If you need to set the style to this element to be valid only for it then this is a good way to go.

By the way you can assign also a class or an inline style to it and all will be considered by the browser.

You can assign more than one class to an HTML element.

You just specify as the value of the class a string containing the name of all the classes separated by a space char each.

If a property is specified in more than one class in the list the value defined in the last one in the list will be considered by the browser.

If you want that a property defined in a class will be always taken as valid by the browser you need to make the value in the class follow by the expression !important.

If you decide to use another font family for your web pages and this is not available as default at the browsers you may search it on the Internet e.g. at fonts.com or even at Google Fonts.

Once you purchase and download your font package, you have to be sure to have all the following files:

• eot
• woff
• woff2
• ttf
• svg

If not, go to fontsquirrel.com and upload your purchased/downloaded package and download the new generated package which includes the file in the extensions listed above.

Use then the @face-font function to specify the name of the family and the src to the font files.

Then, if you named your new font-family 'my_new_family', set this value e.g. to the definition of the style of the body element:

body {font-family: 'my_new_family'}

or in any class or definition of style you want in your stylesheet.

The Box Model is the most important concept in CSS.

If you understand this you are a step ahead in becoming an expert in CSS.

Basically, every HTML object ist a rectangular box with the following characteristics:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The border property is used in CSS to define the style of the border of every HTML element.

You can define the width, style and color of a border.

You can also define the border not only for the entire box or element but also for the single parts: left, right, top and bottom.

You can set the border corner as rounded with the border radius property.

You can do this for every corner/angle of an element. So some corners can be rounded and other rectangular.

If the value of the property is 0 then the corner will be rectangular.

In CSS you can define the shadow for every HTML element.

As we already said, every HTML document is basically a rectangle.

You can define the bi-dimensional shadow of a box setting the effects vertically and horizontally, i.e. you can shift the shadow on the right and on the bottom.

You can define also the blur effect and the color of the shadow. The color can also contain some opacity.

In CSS you can also set an image as a border of an HTML element.

You can define which portion of the image to display and if to repeat it.

Border collapse and border spacing are very useful when using HTML tables.

In the previous version of HTML you were familiar with the attributes cellspacing and cellpadding of the HTML Table element.

The W3C reccommends to use CSS to style elements, even the tables.

Border collapse will decide if to remove the space between the border of the table and the border of its cells.

With border spacing you define the distance between the internal cells of a table.

You can set the style of the border of any HTML element using the border-style property.

The most popular and used styles are:

• solid
• double
• dashed
• dotted

Using the background-color property you can define the background color of any HTML element.

The color can be define in different formats.

The most popular are:

- Hexadecimal (e.g. #000000 for black)

- RGB (Red Green Blue: e.g. black = RGB(0, 0, 0) - you set different levels of Red, Green and Blue to define different colors)

- RGBA: similar to RGB but you define also as 4th parameter the opacity

- The name of the color, e.g. "green", blue",...

With the background-image property you can set an image as background to any HTML element.

You h´just need to specify the URL of the image, paying attention of the folder structure of your web site.

In fact you may refer to images in a folder which is at the same level hierarchically of the folder where you have your stylesheets.

Once you set an image as background of an HTML element you can also do the following:

• set the size of the image

• set the position of the imagine from the top and the left corner

• decide if to repeat the image for the entire background, or only horizontally or only vertically or even do not repeat

In CSS you can set a certain level of transparency to backgrounds and borders setting the values of the opacity of the given color.

Using the RGBA function you can define the 3 colors, base for the definition of any color, and the opacity which is a fractional value between 0 and 1. For example black with 60% of transparency is defined by RGBA(0 ,0 ,0, 0.6): Red=0, Green=0, Blue=0, Opacity=0.6

If you express the background or border color not in RGB but e.g. as HEX or text, you can set the transparency with the property opacity, which has a decimal value between 0 and 1,

In CSS you can set the margin of an HTML element using the margin property.

You can define the property for every side of your box: top, bottom, left and right.

You can do this for all together, or separately inline or with the instructions margin-<direction> (e.g. margin-top).

You can inline group the setting for top-bottom and left-right or even top left-right and bottom.

In CSS you can set the internal padding of elements as you do with the margins. You just use the padding property.

You can define the property for every side of your box: top, bottom, left and right.

You can do this for all together, or separately inline or with the instructions padding-<direction> (e.g. padding-top).

With outline CSS defines a line drawn around an element, outside the border.

This can be use to make an element "stand out".

The outline property specifies the style, color, and width of an outline.

If an image is larger than its containing element you can use the clip property to specify a rectangle to clip it. But you need to absolutely position the image inside it. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.

The element containing the image has to be positioned relatively.

given a basic HTML file (basic.html - see in the attached resources)

Please do the following:

• add an HTML table with a header and a body part composed of 3 rows and 4 columns

• the height of the rows is 20px

• the header of the table have to have the following style: middle-dark-gray background, thin and black border: the text has to be bold and centered

• the body cells must have the following: light-gray background, thin and black border: the text has to be centered and the font size has to be 2px less than the text in the header of the table

• the table has to be centered and the content in the cells has to centered vertically

• specify the styles in the HEAD of the HTML file

The result is available in result_02.html (see in the attached resources)

Using CSS you can format any text within HTML elements or of elements e.g. headlines (h1, h2,...) and paragraphs.

You can set the following properties:

• font-family: the name of the font (e.g. "Times", "Verdana", ...)
• font-size: in px or other units accepted in CSS
• color: the color of the font
• font-wight: the weight of the font (max: bold, min: normal)
• font-style: bold, italic or normal

In CSS you can format paragraphs.

You can specify the vertical space between line of text with the prioperty line-height.

You can set the horizontal alignment of the text with the property text-align (whose values can be left, right, center and justify)

Text can be aligned vertically with respects of its container with the property vertical-align.

With letter-spacing you can define the space between letters in a string.

• text-transform: with this property you can set the entire text to uppercase or lowercase or capitalize the starting letter of a string;
• text-overflow: if you have a block containing a long text and this text cannot be contained entirely in the block, unless you specify the overflow property as scroll or auto, you may decide to set the text-overflow property to ellipsis to break the display text or to clip to continue displaying the text.

You can add a shadow to a text in an HTML document to give some nice effect.

This is done with the property text-shadow. You need to specify the horizontal and vertical spread of the shadow (in px or oder accepted unit) and the color.

Links can be formatted as any other element in an HTML file.

You have to consider that a link can be in one of the following statuses: link, active, visited and hover.

So you need to define the format for each of these statuses. To do this you need to use the selectors :link, :active, :visited and :hover (e.g. a:link {}).

You can format the text of a link as you do with a normal text.

You can also remove or customize the underline effect with the text-decoration property. If set to none the underline effect is removed.

You can also have different styles for different links on your pages.

To differentiate the styles of links you use CSS classes. For example if you have defined the class "mylink" you will define the following styles:

• a.mylink:link {}
• a.mylink:visited {}
• a.mylink:active {}
• a.mylink:hover {}

You may also decide to define some properties common to all the links in your web pages and then you just need to set them in the definition a {} or for a class a.mylink {}. For example a {font-size:10px;} means that all the links will contain text of 10px; a.mylink {font-size:10px;} means that all the links of the class "mylink" will contain text of 10px. This is valid no matter which status the link is (link, active, visited, hover).

As any other HTML element a link is basically a box which can be formatted e.g. in the border, background, text, shadows, etc.

So you can render a link to be a button. The difference is that a button is an input element. But from the Look & Feel point of view the 2 objects can be the same.

In CSS you can set the style to ordered and unordered lists (ol, ul).

You can also define the style for the list items (li) of both ol and ul. You can define the style for list items in both ul and ol (li {}) or separately for ul and ol (ol li{} and ul li {}).

In this lecture you will see the difference of setting the padding internally to an li element and internally to an ol or ul element.

We will see also how to format the background and the border of ol, ul and li elements.

You can customize the default list style of an unordered (ul) or ordered (ol) list in CSS using the property list-style. You can set the value to one of the standards one, e.g. circle and square for ul and upper-roman, lower-alpha for ol.

But you can also set an image as style for the li of an unordered list.

You can find many applications on the Inernet of ol or ul lists.

Many of them are dropdown menus and image galleries or carousels.

You can also define ad hoc classes for ul and ol elements and even for li elements.

In CSS you can define classes only for particular types of elements. For example if you want to use the class "mystyle" only for tables then you need to define it as table.mystyle {}.

If you want to define the class of an element which is hierarchically contained in another one per default, eg. td, tr and tbody elements which are always contained in table elements, you can first define the class for the anchor or parent elements and then use the following for the child element: e. class "mystyle" for tables: table.mystyle td {}.

You may decide to define for td or tr elements separated classes but then you need to specify the class to every element. If you use the inheritance class definition then you do not need to assign the class to the children elements but only to the parent.

Starting from what we learnt in the previous lecture we can also define the style not only to classes of tables and their sub-elements but also to the default tables and instructions using the following instructions:

table {}

td {}

tr {}

...

Once you define a class valid only for a type of element e.g. DIV, you can define the style for the child elements of a defined type.

For example if you define the class "mystyle" for DIV elements you can decide which style must have all the DIV elements contained in those parent elements. And you will do like this:

If the class of the parent is div.mystyle {}

then the style of all the div children will be so defined: div.mystyle div {}.

You can define classes which are valid only for elements within other elements of a specified class.

For example if you have a DIV element which is of the CSS class "my-parent-style" and you have inside other DIV elements which are of class "my-child-style" you can make this class valid only withing the "my-parent-class" in this way:

.my-parent-style .my-child-style {}

If you define also the class .my-child-style {}, this will be different from the class .my-parent-style .my-child-style {}

You can also assign the style to the default element to be valid in the child class. You do this in this way, e.g. for SPAN elements: .my-parent-style .my-child-style span {}

To make a class (e.g. "mystyle") valid only for a type of element e.g. for DIV elements only then you need to specify as follows:

div.mystyle {}

So if you define a class .mystyle this will be different than the class div.mystyle. The DIV elements will be get the style of the class div.mystyle of course.

If you want e.g. all the paragraph (P) elements within DIV elements in an HTML document to have a certain style, you have to define the style in CSS as follows:

div > p {}

If, instead you want e.g. all the paragraph (P) elements positioned after DIV elements in an HTML document to have a certain style, you have to define the style in CSS as follows:

div + p {}

given a basic HTML file (basic.html - see in the attached resources)

Please do the following:

• add an article at the top with the text in article1.txt (see in the attached resources)

• add a list of links (3) in an unordered list below the article at the top

• add a div below this list of links which contains 3 spans

• the div is 800px wide and the 3 spans are separated by 10 px in each direction and equally distributed horizontally

• inside each span put the text in article2.txt (see in the attached resources)

• inside the spans the text has a space around of 5 px

• the first link get at the top of the page, the second will go to google.com in a new tab and the third link will redirect the first span below

• the text of the links is bold

• the list should not have any bullet

• the links are not underlined and active link is blue, visited is red, hover is green and link is black

• the text in the link has to have a shadow 31px deep and of the same color of the link (pay attention to the 4 statuses)

• specify the styles in the HEAD of the HTML file

The result is available in result_03.html (see in the attached resources)

The only way to center an HTML element horizontally is to set the margin left and right to auto. So basically:

margin-left: auto;

margin-right:auto;

Or you can also do the following: margin: 0 auto or margin: 10px auto ... so any value for margin-top and margin-bottom but for left and right margins always specify auto.

To distribute 2 or more HTML elements within a container you need to display the container inline-block or block. That means that the internal elements will be displayed block and the container can be aligned horizontally to other external elements.

Then the internal elements must be displayed inline-block, so that they are distributed horizontally and not vertically as per default.

Or you can float the elements (left, center or right).

But to center them horizontally you then need to set the property text-align of the parent element to center. In fact the text-align property refers to any type of content and not only text elements.

To prevent next element to continue to float you need to include a DIV block after the last floatting element with the style: clear:both or clear:all, which means it will clear left and right or all and reset the block value to the display property.

Elements in a DIV are automatically distributed vertically in it if they are displayed as block.

If you want that they are aligned in the center horizontally than you need to set the text-align property of the parent to center and the children have to have the margin left and right set to auto.

To distribute the children as columns you need to display the parent as table and the children as table-cell.

To display the children as rows you need to set the property display to table-row.

To display the children aligned vertically, i.e. equally distributed vertically, you need to set the display property of the parent as table, those of the children as table-cell and in both you have to set the property vertical-align to middle.

If you want to center a text inside a child element vertically, you need to insert another div in the child which contains the text and is displayed also as table-cell and the property vertical-align is set as well to middle.

A bit tedious but if you follow carefully this video you can make it!

The position is an important property of the HTML elements.

The default value is static and all the proprieties defined so far (e,g, margins) are valid as long as the position of the element is static.

If you change this value then the propriety margin: auto is no longer valid. You need to consider the properties top, left and eventually right and bottom.

To have an element in a fixed position you need to set position to fixed and set the value of the coordinates top and left where you want you element to start from.

An element in fixed position is positioned vertically above all the other elements by default.

Setting the position property of an HTML element to relative is similar to static.

You will see the effect when you set the values also for the properties top and left.

These are the coordinates of the element relatively to its predecessor.

Setting the position property of an HTML element to absolute is similar to fixed.

You will see the effect when you set the values also for the properties top and left.

If you have elements with position: absolute the last one listed in your HTML document will be displayed above all the others. If you want to customize the layout and position one of these elements above all the other or above some of them you need to set the value of the z-index property to be greater than 0 and for sure greater than the z-index value eventually set for the others.

This has a great applications when you want to use different layers on your page where the one at the lowest level is your web page, the one at the highest level is a block which embeds e.g. a video (video layer) and between the 2 you set another layer (for example which occupies the entire viewport) which has a certain value of opacity (<1) so that you just set the background a bit darker but do not hide completely your page (cinema effect).

This layer (or background layer) has to have a z-index value lower than that of the video layer.

You need, of course to have the background layer and the video layer positioned absolutely.

When an HTML element (especially for DIVs and SPANs) contains other elements and those may not be entirely contained in it you can use the overflow property to avoid that these elements will be partially displayed outside of their anchor.

To do this you will use the overflow property for the anchor element.

The overflow can have the following values:

overflow: none - the overflow is by default disabled, but if you set it to none for sure the property will have no value and the child elements, if it is the case, will be partially displayed outside the anchor element

overflow: scroll - the anchor elements will be displayed with the horizontal and vertical scrollbars and to see the internal children entirely you need to scroll up and down or left and right

overflow: auto - the browser will set the scrollbars if it is needed, i.e. there are elements which cannot be entirely contained within the anchor element

You may also specify this property only for one direction (horizontal x, or vertical y), for example overflow-y: scroll and overflow-x: none -> means that you want only to set a vertical scrollbar.

In an HTML file the elements are displayed as they are poer default defined. E.g. DIVs are displayed block, i.e. the are always displayed in a new line (it is like they have a line break before and after), like the paragraphs: but SPANs are displayed inline, i.e. they are displayed just after the previous element in the same line horizontally and the next element will be displayed inline after it (unless the next element requires a line break like a DIV).

You may change the default settings with the CSS property display.

In this lecture we will see the following value for the display property:

• display: block - the element is displayed vertically below its predecessor and after the successor (e.g. DIVs). This will be valid also for eventual internal child elements (unless otherwise specified).

• display: inline - the element is displayed horizontally in the same line of its predecessor and successor (if they allow this, i.e. they are not displayed as block). This will be valid also for eventual internal child elements (unless otherwise specified).

• display: inline-block - the element is displayed inline but if it contains other elements inside (child elements) these will be displayed as block.

If you set the display property of a DIV element to table, then the element will behave as a table.

It depends on how you specify the display property of its children to see if the final layout will be that of a table.

To display the table having columns the children must be displayed as table-cell. You will set the property to table-row to see the children as row.

In this lecture we will play with some children giving them different display values to see what the final layout will look like.

The display property in CSS may have different values, which will modify the aspect of the HTML elements.

The following are the values that the display property may have:

inline: default value, displays an element as an inline element (like <span>)
block: displays an element as a block element (like <p>)
flex: displays an element as an block-level flex container. New in CSS3  
inline-block: displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box  
inline-flex: displays an element as an inline-level flex container. New in CSS3  
inline-table: the element is displayed as an inline-level table   
list-item : lets the element behave like a <li> element
run-in: displays an element as either block or inline, depending on context    
table: lets the element behave like a <table> element  
table-caption: lets the element behave like a <caption> element  
table-column-group: lets the element behave like a <colgroup> element  
table-header-group: lets the element behave like a <thead> element  
table-footer-group: lets the element behave like a <tfoot> element  
table-row-group: lets the element behave like a <tbody> element  
table-cell: lets the element behave like a <td> element  
table-column: lets the element behave like a <col> element  
table-row: lets the element behave like a <tr> element  
none: The element will not be displayed at all (has no effect on layout)
initial: sets this property to its default value
inherit: inherits this property from its parent element

If you want to hide an HTML element you need to set the property display to none.

To show it again you need to set display: ''; or any other value we saw so far.

This may have no sense in a static environment but if you want the user to interact with your page you can use javascript to hide and show elements according to the action performed by the user, e.g. display offers or optin forms after a few seconds, or display a login form after clicking on a login button, etc.

You can also set the background and background image of the entire body of an HTML document.

If you want that the background image stays in a specific position or if you want that the image moves when scrolling the page then you need to use the background-attachment property.

In this lecture I will show you how to do this.

In CSS you can transform elements without the need of Javascript.

You can move, rotate, scale and skew elements. You need to use the property transform and its functions:

• translate: to move elements horizontally and vertically

• rotate: to rotate an element of a certain degree clockweise

• scale: to increase the size or reduce the size of an element

• skew: to skew elements

When you set the height property of an element to 100% this mean that it will be 100% of its anchor element. So if a DIV has the value of its height equal to 200px, a child element having the height equal to 100%, means that its height is 200px as well.

If an element has a height set to 100% and has no anchors then its height will refer to the height of the BODY element.

You want to set the height of an element to auto if this element has childern and you set the height of these children to some values. The auto means that the anchor element will have the height equal to the height of the child element having the highest value. For example if a DIV contains 2 SPANs elements, one has height:100px and the second has height:200px then the anchor will have height:200px.

When you define the style of an HTML element you can not necessarely define the size (width, height) but you may need to define the max or min values of the width or height.

For example if the content inside will resize the element, you may notice that resizing the page or displaying the page with different viewports (different resolutions or devices) you have to set some constraints when resizing, e.g. set a min width or a max width (the same is valid for the height) to avoid eccessive reduction in the size or eccessive enlargement of the size.

In these cases you have to set values to the min-width, min-height, max-width and max-height properties.

The box-sizing property says if the size of an HTML element includes only the content or also the border. If you remember the Box Model concept you already know that every HTML element is a box which the content inside and the padding and the border outside.

If you want that in the size of your HTML elements you include also the border and the padding you need to set the value of the property box-sizing to border-box.

If you want that only the internal content is considered to determine the size of an element (width and height) then you need to set the value of the property box-sizing to content-box (this is also the default value of the box-sizing property)

given a basic HTML file (basic.html - see in the attached resources).

Please do the following:

• add a DIV element which has a white background and is positioned 100px from the top and 150px from the left

• the DIV element has a white border, rounded (radius is 10px) and a shadow which is 7px deep, 5px blur and the color of the shadow is #333

• inside this DIV, display 3 divs equally distributed horizontally

• the distance between the divs is 10px

• specify the styles in the HEAD of the HTML file

The result is available in result_05.html (see in the attached resources)

given a basic HTML file (basic.html - see in the attached resources.

Please do the following:

• Add an optin form with the field email and password and the submit button

• Make the form invisible and show it on click on a button which you will show on the home page with caption "login"

• When you make the form visible display it on overlay over the home page and between the form and the home page display a transparent background

The result is available in result_06.html (see in the attached resources)

Since the release of CSS3 it is possible to use gradients to display smooth transitions between two or more specified colors when you set the background of HTML elements.

In the previous versions, you had to use images to generate these effects. The advantage of using properties and functions in CSS3 (gradients) rather than images will reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

In this lecture we will have an overview of the linear gradient.

The linear gradient is define by the function/property linear-gradient, and it is characterized by the direction (to top, to bottom . the default one -, to right and to left).

Then you need to specify at least 2 colors and optionally the percentage which says up to which point of the element in % they will be displayed.

In this lecture we will have an overview of all the possible special effects that can be generated using the linear and radial gradients.

We will see also that it is possible to use only one color and just vary the transparency from the beginning to the end.

Since CSS3 you can generate animations.

For example you can move HTML elements from one point to another or change the background color with a certain frequency.

You just need to use the @keyframe function and the animation property.

The animation properties has other components, e.g. the name of the animation and the duration of the animation.

The combination of the background-size property and the linear-gradient function/property has a great application in creating powerful backgrounds in CSS3 e.g. stripes or checkered patterns.

The trick is in using multiple color-stops having the same position when defining linear gradients. In fact, they produce an infinitesimal transition from the one specified first in the rule to the one specified last. In effect, the color suddenly changes at that position rather than smoothly transitioning.

Using the CSS hover selector you can create tooltip effects. Tooltip texts are string displayed on overlays to show more information about something when you go over that object/element with the mouse.

You can hide elements at page load and make them visible when the mouse is over its connected object.

In this lecture you will learn how to do it.

The ABBR object is a new element in HTML5 and is used to display an acronym whose detailed meaning is displayed on mouse over.

So you do not need like in the previous example to define the style for the hover status in order to create the tooltip effect. This effect is by default generated,; what you can do in CSS is to customize the style of the hover effect.

In this lecture you will see how.

Since version CSS3 it is possible to add filters to images to generate some special effects, e.g.:

- turn the image to grey at a certain percentage (using the greyscale function)

- sepia

- blur

- add transparency (with the opacity function)

Using some tricks you can create arrows or triangles with CSS.

For example if you want to create a black arrow towards the upper position (to up) you need to set the following:

- margin-left: 5px transparent

- margin-right: 5px transparent

- margin-bottom: 5px #000;

HTML elements are rectangles, but if we want to have a triangle to a direction we have to set the side elements (in our case right and left) to be transparent, and the opposite element to solid. All have to have a margin width equal to the size of your desired triangle.

In this lecture, using the arrow up class that we created in the previous example to generate an arrow to the top (triangle) and a rounded rectangle we will generate a tooltip block of baloon which has a nice effect (like the baloon in cartoons) to display additional information on mouse over.

given a basic HTML file (basic.html - see in the attached resources.

Please do the following:

• add a DIV element which has a background starting with #660000 and finishing with #990000

• the DIV element has a white border, rounded (radius is 10px) and a shadow which is 5px deep, 5px blur and the color of the shadow is #333

• inside this DIV, display 3 white divs aligned horizontally. The first one is 10px from the top and 20px from the left

• the distance between the divs is 10px

• specify the styles in the HEAD of the HTML file

The result is available in result_04.html (see in the attached resources)