CSS – Selectors

CSS – Selectors

Below is a common list of selectors. Selector is a pattern that is used to select an element or elements Selector Description Example * Select all the elements * ELEMENT Select all ELEMENT elements div ELEMENT1 ELEMENT2 Select any ELEMENT2 element that is descendant of ELEMENT1 div p ELEMENT1,ELEMENT2 Select all ELEMENT1 and ELEMENT2 elements div, p ELEMENT1>ELEMENT2 Select any ELEMENT2 that is a child of ELEMENT1 div > p ELEMENT1 + ELEMENT2 Select any ELEMENT2 that is immediately after ELEMENT1 div + p #ID Select the element that has…

CSS – Selectors Read More

HMTL & CSS – lists styling

HMTL & CSS – lists styling

Let’s see a few properties that you can style lists. An unordered list. list-style-type – specifies the appearance of the list item marker. Values can take disc | circle | square | none | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none  An ordered list list-style-position – specifies the position of the marker box. Values can take are: inside | outside. Default is outside. list-style-image – sets the image that will be used as the…

HMTL & CSS – lists styling Read More

CSS – length units

CSS – length units

CSS has many different units and there are two types: absolute and relative length units. common relative units: em – relative to the font-size in the parent element. 2em; means 2 times bigger than the font in the parent element rem – the same as em but this is relative to the root element. Both are used for font-size . 2rem; % – relative to its parent element dimension vh & vw – viewport height & viewport width (viewport = browser window). It is like % but it is relative…

CSS – length units Read More

HTML – Images and hyperlinks

HTML – Images and hyperlinks

img This element represents an image common properties: src – Path to the image, it can be on your server or on the web alt – alternate text which is a short description for the image. It is recommended because it provides information to the search engines. title – It is a tooltip, it appear when you hover the image with the mouse width & height – horizontal and vertical dimension. You need to adjust one of the two properties because the web browsers maintain the aspect ratio for the…

HTML – Images and hyperlinks Read More

HTML – Semantic Elements PART 2

HTML – Semantic Elements PART 2

Here you can read part 1 figure – contains an image and used to group it with its caption figcaption figcaption – provides information about the image and it must be child of the figure element mark – The mark element represents a run of text in one document marked or highlighted. You can change its style in CSS code – The code element represents a fragment of computer code. abbr – The abbr element represents an abbreviation or acronym, optionally with its expansion. br – represents a line break…

HTML – Semantic Elements PART 2 Read More