HTML & CSS Basic Concepts and Terminologies

HTML AND CSS

  •  HTML and CSS are programming languages for the web. Wait! Don’t get scared off yet! They’re not like complicated programming languages.
  • They are separate languages that work together. HTML + CSS = BFFs if you know what I mean.
  • HTML stands for Hypertext Markup Language which, at it’s most basic definition, means Interactive Text. It is the code that’s used to build the structure of a web page.
  • CSS stands for Cascading Style Sheet, which is used to define the styles that format the web page.

HOW HTML AND CSS AND WORK TOGETHER:

  • You can have HTML without CSS (that would be really ugly!), but you can’t have CSS without HTML.
  • CSS is applied to the HTML.
  • HTML is the content of a webpage. So think of it like a Word document where you have all of your content (headings, subheadings, paragraphs, bullet points, etc).
  • CSS is the style or appearance of that content. So CSS is kind of like the editor that tells what color, font and size each bit of text should be and also where to place it. We can also use CSS to actually place things around the page.
  • HTML and CSS should always be kept in separate files. While there are ways to include CSS in an HTML document, the best practice is to keep it in its own separate document that the HTML document links to.

Understanding Common HTML Terms

Elements

Elements are designators that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.

Tags

The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.

An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.

A closing tag marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.

Attributes

Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource.


Understanding Common CSS Terms

Selectors

As elements are added to a web page, they may be styled using CSS. A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to. Selectors may include a combination of different qualifiers to select unique elements, all depending on how specific we wish to be. For example, we may want to select every paragraph on a page, or we may want to select only one specific paragraph on a page.

Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as <h1> or <p>.

Properties

Once an element is selected, a property determines the styles that will be applied to that element. Property names fall after a selector, within the curly brackets, {}, and immediately preceding a colon, :. There are numerous properties we can use, such as background, color, font-size, height, and width, and new properties are often added. In the following code, we are defining the color and font-size properties to be applied to all <p> elements.

Values

So far we’ve selected an element with a selector and determined what style we’d like to apply with a property. Now we can determine the behavior of that property with a value. Values can be identified as the text between the colon, :, and semicolon, ;. Here we are selecting all <p> elements and setting the value of the color property to be orange and the value of the font-size property to be 16 pixels.

Working with Selectors

Type Selectors

Type selectors target elements by their element type. For example, should we wish to target all division elements, <div>, we would use a type selector of div. The following code shows a type selector for division elements as well as the corresponding HTML it selects.

Class Selectors

Class selectors allow us to select an element based on the element’s class attribute value. Class selectors are a little more specific than type selectors, as they select a particular group of elements rather than all elements of one type.

Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value across multiple elements.

ID Selectors

ID selectors are even more precise than class selectors, as they target only one unique element at a time. Just as class selectors use an element’s class attribute value as the selector, ID selectors use an element’s id attribute value as a selector.

Regardless of which type of element they appear on, id attribute values can only be used once per page. If used they should be reserved for significant elements.

Additional Selectors

Selectors are extremely powerful, and the selectors outlined here are the most common selectors we’ll come across. These selectors are also only the beginning. Many more advanced selectors exist and are readily available. When you feel comfortable with these selectors, don’t be afraid to look into some of the more advanced selectors.

Other Options for Adding CSS

Other options for referencing CSS include using internal and inline styles. You may come across these options in the wild, but they are generally frowned upon, as they make updating websites cumbersome and unwieldy.









Comments

Post a Comment

Popular posts from this blog

CSS Advanced #2

  CSS  The object-fit Property: The CSS   object-fit   property is used to specify how an <img> or <video> should be resized to fit its container. Example :  img  {   width :  200px ;   height :  400px ;   object-fit :  cover ; } All Values of The CSS object-fit Property The  object-fit  property can have the following values: fill  - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit contain  - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box cover  - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit none  - The replaced content is not resized scale-down  - The content is sized as if none or contain were specified (would result in a smaller co...
Read more

Java Basics #4

  Java  Math The Java Math class has many methods that allows you to perform mathematical tasks on numbers. Math.max( x,y ) The  Math.max( x , y )  method can be used to find the highest value of  x  and  y. Example: Math.max(5, 10); Math.min( x,y ) The  Math.min( x , y )  method can be used to find the lowest value of  x  and  y. Example: Math.min(5, 10); Math.sqrt( x ) The  Math.sqrt( x )  method returns the square root of  x. Example: Math.sqrt(64); Math.abs( x ) The  Math.abs( x )  method returns the absolute (positive) value of  x. Example: Math.abs(-4.7); Random Numbers Math.random()  returns a random number between 0.0 (inclusive), and 1.0 (exclusive). Example: Math.random(); To get more control over the random number, e.g. you only want a random number between 0 and 100, you can use the following formula. Example: int randomNum = (int)(Math.random() * 101);  // 0 to 100 More Math ...
Read more

Java Basics #1

Simple Java program: public class Main {   public static void main(String[] args) {     System.out.println("Hello World");   } } Every line of code that runs in Java must be inside a  class . In our example, we named the class  Main . A class should always start with an uppercase first letter. The main Method The  main()  method is required and you will see it in every Java program. Any code inside the  main()  method will be executed. You don't have to understand the keywords before and after main. System.out.println() Inside the  main()  method, we can use the  println()  method to print a line of text to the screen. Java Comments Comments can be used to explain Java code, and to make it more readable. It can also be used to prevent execution when testing alternative code. Single-line comments start with two forward slashes ( // ). Java Variables Variables are containers for storing data values. In Java, there are d...
Read more