HTML stands for Hypertext Markup Language.
It is use to provide structure to the content on a webpage. Also called a declarative language because its code declare what the browser should do to each part of the program.
CSS, Cascading Style Sheet, is use to provide styling to a web page.
It is use to give color, typography and some animation to the page.
HTML is made up of tags like this <p>, the paragraph tag.
The syntax usually have an opening and closing tag like <p> to open, </p> to close.
<p> This is a paragraph </p>
Is a complete HTML syntax.
Class <p class = “hello”> Hello World </p>
Id <p id = “ hello”> Hello World </p>
Lang <p lang = “ en-GB”> Hello World </p>
Dir <p dir = “ ltr”> Hello World </p>
CSS Essential Training
While HTML is use to give structure to a page.
CSS is use to style HTML and beautify the appearance of the page.
There are 4 ways you can reference CSS in your work.
External, Internal, Inline and @import
External – have a separate file for the CSS.
<link rel = “stylesheet” href = “css/style.css”>
Internal – placed in the HEAD section of the HTNL document.
Inline – place inline along with an HTML element.
< p style = “color: green;”> Hello Nigeria </p>
@import – this is mostly use with CSS pre-processors
Project Overview and Setup
The first thing to keep in mind is that the HTML part of your webpage should be in place before you plan to add the styling.
Optimizing Images for Modern Screens
It is important to put modern screens in the back of your mind.
In places where you need an image with 300px width, you should use 600px width image and resize it with CSS.
CSS Specification and W3C
It is next to impossible to know all the commands in CSS and there is constant minor upgrades in most programming languages.
So a way to keep updated and learn whatever you need anytime is using the World Wide Web Consortium W3C guide on CSS.
You can access the documentation on W3C website however, the Mozilla developer CSS documentation is recommended by Mrs. Truong.
CSS syntax consist of two parts. The selector and the declaration box.
The selector can be HTML tag like img, h1, etc or class, id and so on.
The declaration box is made up of CSS property and value, and enclosed in two curly braces.
Color and Property Value
Color is one of the commonly used property in CSS and there are several ways to give it a value.
The basic value can be naming the color like color: green; or color : blue;
There are other ways of naming the value e.g. using rgb, rgba, hsl, hsla.
Universal selector: use to select all the elements on the webpage.
Type selector: use to select specific element.
Class selector: in cases where you need to be more specific that just using the element tag, you can use the class selector. It is places in the HTML tag as an attribute to the tag. It can be used many times on the page.
<p class = “intro”> My name is Ganiyu Sidiq </p>
ID selector: this is similar to class selector but id class can only be used ones on the page. It is use to link to a section on the HTML page too, so some people prefer to use it just for link and not as CSS selector.
<h3 id = “intro”> My name is Ganiyu Sidiq </h3>
Inheritance and Specificity
CSS has an order of respecting inheritance or selector organization.
id -> class -> type -> universal
CSS gives more recognition to id then class then type then universal selector.
Note down the color you want to use beforehand: you can look at similar website on behance/dribble to get idea of what to create. Sketch your own creation. Get d color y’d like.
Every section in your code must have comment that indicates the section. Both while writing the HTML and the CSS.
The color property gives text color in CSS.
a:focus when tab is use to move around link
a:hover when the mouse icon moves over the link
a:active just when clicked before dropping
How Element Occupy Space in HTML
Inline and Block
Takes up space that their content needs.
Elements are arranged in line from the left.
Elements will only wrap when item cannot fit.
Common examples of inline elements: <a> <span> <strong>
Same height as content but width extends to the whole screen with.
Each of this elements stays on its own block by default.
Most HTML elements are block.
Common examples are: <p> <h1> <article> <section>
The display property
This is what is use to modify the display property of HTML element.
You can use it to change an inline element to block element and vice versa.
You can assign the two properties to an element.
This consist of …
Content: the stuff in the HTML element like text, image, link etc.
Padding: the space area immediately after the content.
Border: the space between the padding and margin, usually after the padding.
Margin: the space outside the whole box
How to Center a Content
margin: 0 auto;