CSS From Zero to Advanced Part 1: Getting Started
Let’s learn CSS, let’s learn the basics.
4. CSS application on attribute class and id
CSS CASCADING STYLE SHEETS
Its role is to manage the layout of your site.
What is CSS for?
→ allows you to select the font used on your site
→ defines the size of the text, the borders, the background …
→ makes the layout of your site
→ You will be able to say : I want my menu to be on the left and occupy such a width, that the header of my site is wedged at the top and that it is always visible, etc.
CSS and browsers compatibility
There are 4 important versions of CSS : CSS 1 → CSS 2.0 → CSS 2.1 → CSS 3
Browsers do not know all the CSS properties that exist. The older the browser, the less CSS functionality it knows.
I strongly recommend that you put the www.caniuse.com website in your favorites, which offers HTML and CSS functionality compatibility tables on different browsers (and on their different versions).
Where are we writing CSS?
You can write code in CSS language in three different places:
Here just the tag where you put the attribute style gonna be modified.
CSS tag selection
li → name of tags to modify
color → css property to modify
blue → the value
So here this code means : “i want all the li tags to be in blue”.
Multi tags selection:
CSS application on attribute class and id
How to select precisely tags to modify? Using class and Id attributes.
Class attribute:
→ it can be on every tags with same name of value
→ try to find a relevant name to your class.
Id attribute:
It can be on every tag but the value has to be unique so try to find a relevant name for your id.
Using HTML tags
Sometimes you will need to highlight words and you will not be able to do that with attributes id or class. Then you will have to use universal html tags:
<span> </span> : inline tag, it means that you can insert this tag in text blocks . <p> for example.
<div> </div> : block tag , it will surround a text block like <h1> or <p>. We call a text block every tags which create a jump line before and after him. It’s very useful for design.
Advanced Selectors
- * → universal selector
- A B → select tags B which are in tags A — example :
<A>Title with <B>text</B></A>
- A + B → select tags B which are following a tag A — example :
<A> Title </A>
<B> Subtitle </B> → this one gonna be modified.
- A[Attribute=”Value”] → select A tags with this specified attribute which contains the word “value”
HTML and CSS
<A title=”My super title”> Title</A> → A[title*=”super”]
<B title=”super subtitle”> Title</B>
<A title=”My story”> Title</A>
Note : https://www.w3.org/TR/selectors-3/#context
CSS selectors priority
CSS Text formats
Size → font-size
— Absolute : pixels, centimeters, millimeters
- Be careful with this one because sometimes the size could be too small for readers
- Example : font-size: 16px;
— Relative : in pourcentage with em ou ex
- More easy to use because of the adaptation of readers preferences
- xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large ;
- Examples : font-size: small;
- Best method is to use em
- Example : font-size : 1.3em; (be careful to use dot instead of coma)
Font → font-family
- font-family : font1, font2, font3, serif;
- List of font with good integration in browsers : Arial ; Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana
- Example : font-family: Impact, “Arial Black”, Arial, Verdana, sans-serif;
Add font-family in CSS3 : @font-face
- https://fonts.google.com or https://www.fontsquirrel.com
- User browser has to download the font
Format types :
- .ttf: TrueType Font. Ok for IE9 and others browsers
- .eot: Embedded OpenType. Ok for IE only. Product of Microsoft.
- .otf: OpenType Font. Not OK for IE
- .svg: SVG Font. Only format for Apple and Ipads
- .woff: Web Open Font Format. New web format OK for IE9 and all others browsers.
- font-style: italic, oblique, normal (default)
- font-weight: bold, normal (default)
- text-decoration: underline, line-through, overline, none (default)
- Text-align : left, center, right, justify
You cannot modify the text-alignment of a inline tag as <span> <a> <em> ….Only on block tags as <p> <div> <h1> <h2>
- float : left, right
- we can use float on inline and block tags
- How to stop a float? Clear property : clear : both;
Color
3 ways to define colors:
Directly with the name of the colors.
Using hexadecimal notation:
- Begin with # followed by 6 letters or numbers
- From #000000 (black) to #FFFFFF (white)
- Use Gimp, paint or photoshop
Using RGB or RGBA colors:
- Combinaison of quantity of Red Green Blue
- rbg(240,96,204) → pink
- Values always between 0 to 255
- Can use paint or colorpicker
- For RGBA — A → Alpha is using to define the opacity
- From 0 (fully transparent) to 1 (fully opaque) as 0% to 100%
For background-color
Background-image : background-image(‘image_url.jpg’)
Background-attachment:
- Fixed : background image stay fixed
- Scrolled : background image scroll with the text (default value)
Background-repeat
- no-repeat image not gonna be repeated as a mosaic
- repeat-x image repetition on X-axe
- repeat-y image repetition on Y-axe
- repeat image repetition (by default)
Background-position
- Only have interest with the combination of background-repeat : no-repeat;
- You have to give two values in pixels to define the position or using:
— Top, bottom, left, right, center
— You can combine these values. Example:
Multi images background in CSS3:
- First image on the 2nd one etc…
- Ok on every browsers (KO before IE9)
Opacity:
- Same as a in RGBA
- Value from 0(transparent) to 1(opaque) as 0% to 100%
CSS border
A lot of properties allow you to modify borders : border-width, border-color, border-style. We will use directly the super property border with these values :
- width
- color
- border type
Choosing the border side using:
- border-top , border-left, border-right, border-bottom
Border-radius CSS3 property:
- allow us to easily round the angles of any element
- Indicate as value the importance of the radius in pixels as:
You can indicate for each corner the radius following this exactly order:
- Top left
- Top right
- Bottom right
- Bottom left
You can refine the roundness of our angles by creating elliptic curves.
CSS outline
Outline-color:
Outline-width:
Shorthand property:
Outline-offset:
CSS shadow
There are 2 types: box-shadow and text-shadow. Box-shadow CSS3 property is applicable on a block, with values following the next order:
- Horizontal shift of the shadow
- Vertical shift of the shadow
- Gradient smoothing
- Shadow color
- Inset (optional value) : the shadow gonna be inside the box
Text-shadow
CSS3 property applicable on text, with same values as box-shadow (without inset).
CSS Dynamic appearances
Shape of elements can be changed once the page is loaded. There are type of events.
Hover : mouse hover
Active: mouse click event
Focus: link selection
Visited : link already visited
- You can’t modify a lot just the color.
If you find my content helpful please consider making a donation at:
https://ko-fi.com/devondeveloper
This content it’s free but believe me, if you take a coding bootcamp or web development course there is no real difference with the information you just read. By making a donation You are helping to keep creating Great Quality content for You, so you can become the Best web developer you can be.
