Hi Guys Assalamu Alaikum Warahmatullah How are you I hope you love me so much I have come before you today with Avery important issue: Learn CSS
Hello everybody in this article I'm going to teach you
everything you need to know about CSS so you can turn your blind HTML into
something beautiful if you do not already know HTML then check out my
introduction to the HTML series where I walk you through everything we need to
know about HTML I will not be covering every property or option s CSS has to
offer because there are hundreds but I will be covering all of the concepts you
need to know to get started with CSS what's first get started with what CSS is
a common misconception is that CSS is a programming
language but that is incorrect CSS is actually a styling
language that is used for modifying the appearance of the content of webpages
just as HTML is used for the content of webpages CSS is used for the
presentation of that content because CSS is used for presentation and design
there are many ways to do the same thing HTML, on the other hand, has set
elements for most things which means that there is usually only one correct way
to do things in HTML the ability to do things in many different ways is the
reason most people either love or hate CSS I love it since it lets you express
your creativity and gives you the freedom to do things how you want now that we
understand what CSS is let's dive into the details of how to use CSS
first, we need to discuss the syntax of CSS luckily the syntax is straightforward to understand the first part of the syntax is the selector there are many different types and combinations of selectors which we'll talk about later but for now, all you need to know is that a CSS style starts with a selector to apply the style to next comes an opening and closing curly bracket that is used to denote the start and end of the styles that apply to the selector everything in between these curly brackets will be styles that are applied to the HTML elements that match the selector lastly inside the curly brackets is one or more property-value pairs each of these pairs defines a property such as color font size width, etc and a value for that property a basic example of the CSS syntax will be setting the text color
of all h1 elements to blue now that we have the syntax out
of the way let's focus on the various selectors CSS contains many different
types of selectors but the main selectors are class and ID selectors we've
already seen the element selector in the previous example of turning all age
ones blue any HTML element can be used as a selector and the style is defined
for that selector will apply to all HTML elements of that type by far the most
common and useful selector is the class selector
the class selector lets you select HTML mints based on their class attribute if you remember from my HTML series all HTML elements can have attributes assigned to them such as the href for an anchor tag a class is just an attribute that all HTML elements can have and is used with CSS to distinguish elements for specific styling the class
the attribute can
also have multiple different classes in the same attribute as long as they're
separated by a space to select an element by class we need to use a period
before the class name as the CSS selector this period tells CSS that whatever
follows is a class name and not an HTML element name classes are the most
common selector used because they are amazing for creating reusable components
for example if you have a site with 3 different types of buttons that all share
the same basic styling but have a different color you can use one base class of
button to define all the styles shared between all buttons you can then have
three other classes that define the specific color for the button then all you
need to do is add both the base button class and your color
specific class to your HTML button element and I'll have all the styles defined in the base button class and the color-specific class the last common selector is the ID selector is very similar to the class selector in that it is an HTML attribute but an element can only have one ID while it can have multiple classes an ID also should be unique across the entire web page but HTML does not actually enforce this to use an ID as a selector you simply need to use a pound sign
followed by the ID name much like how classes use a period
followed by the clasp in our previous example is impossible to do with IDs
since IDs are supposed to be unique across the webpage and each element can
only have one ID because of this I very rarely use IDs in 99% of all my CSS I
use class selectors and avoid using HTML and ID selectors as much as possible
on top of having many different selectors CSS has multiple different ways to
combine selectors together to make your selectors more specific the first way
to combine selectors is to specify multiple selectors that an element must have
to be styled to do this you need to write the various selectors together with
no spacing between them for example if you wanted to select all h1 elements
with the class large heading then you would write the following selector if you
wanted to select an
element with the ID big blue and both the class large and
blue then you would use this selector all HTML selectors can be combined in
this way as many times as you want to create specific or general rules another
way to combine selectors is to use multiple selectors to specify an ancestor of
an element to do this you will put a space between the ancestor and child
selector for example to select all P tags inside a div you simply need to use
the following selector this will select all P tags that have a div as their
ancestry even if the div tag is not the direct parent of the P tag this
combination of selectors
can be combined with the previous combination of selectors to make even more specific selectors for example to select all h1 tags with the class of brown that have a header with the class main header as their ancestor you would do this the last common combination of selectors is when you want to share a set of style properties and values between multiple selectors if you have a class big and another class large that both have the same style properties and values then you can combine these selectors into one selector by using a comma between the selectors this allows you to avoid duplication it is important to note that all the CSS
combination selectors can be used together to create even more complex combinations if needed there is also one other form of selector the everything selector that is used to select every element on the entire webpage this selector is defined as the asterisk symbol and is only really used to set some defaults for your entire webpage such as font family the last thing we need to discuss before writing some CSS is how to load the styles we write into our HTML page there are three main ways to do this the first and by far worst is to use inline Styles an inline style is CSS that is written directly inside an HTML
element and thus does not need a selector this is done through the use of the style attribute this is a terrible idea though says HTML is meant for the content only and mixing CSS Styles into your HTML elements adds presentation to your HTML which is meant for CSS files it prevents us from reusing those Styles anywhere else since they are written into the actual HTML element lastly depending on the Styles you use an inline your page may load slower the second option of using the style HTML element is slightly better but still a bad idea the style element is an HTML
element defined in the head and formatted exactly like a CSS file the problem with using the style element though is that the presentation of the web page is defined in the HTML file and not a CSS file the Styles you defined in the style element are also only available on the page you to find them and are thus not reusable across multiple pages the final and best way to define CSS Styles is to use a separate CSS file and link to it from the HTML all the styles for the entire webpage can be found in one or more CSS files and they can be added to any webpage by using a simple link element inside the head the link element is a simple element that can be used to link files to the HTML and its main use is to link CSS files the link element is also an empty element that uses the rel
the attribute which stands for the relationship to define
the relationship between the linked file and the HTML document in the case of
CSS the reel attribute will be style sheet since CSS is a style sheet for the
HTML the only other attribute that we need to define is her attribute works
exactly the same as the href attribute of an anchor tag and should point to
either your CSS file or the URL of another person's CSS file using external CSS
files like this is the best way to use CSS since it separates the presentation
and contents of websites and allows reusability of styles across the website
now that we have an understanding of how to write CSS styles and select
specific HTML elements so let's jump into a live example of these concepts as
you can see on the Left I have a sample HTML page with an up inside a Visual
Studio code
and on the right I
have this page opened up in Google chrome using live server to get started
let's use an inline style on this h1 element to turn the text a different color
we would use a stylized view here and we would set the color value since the
color property is used to change text color and we'll set it to a color of red
for example we saved that as you can see our text will change to red as we know
using these style attributes is a bad idea instead let's use the style tag
inside of the head and use the h1 selector just like the h1 element and we'll
all set the color to blue this time save that and we can see that color is blue
but again we know that this is not the most optimum way to do it instead let's
create a new file called styles CSS inside this style is got CSS file let's put
our h1 selector and set the color to green now in order to get this style to
load in our page we need to use a link tag here which the rel is going to be
style sheet and the href is going to point to that style CSS file now if we say
that you can see that our text changes to green if we were to move this link
tag above our style tag for
example though you see that our text is still blue this is
because CSS takes whatever the last define style is for an element so in this
case the h1 setting the color to blue is below the import of this link so our
text is blue if we remove this style though you'll see that when we save it our
text turns back to green because it's loading this style in here we can show
that example again I put an h1 here with a color of red this time and now when
we say that this text will change to red because this selector is after the
selector now that we've finished importing all of our styles let's dive a
little bit more into how the styles are actually applied so do this let's add a
class to this h1 and we'll give it a class of blue instead of our Styles dot
CSS let's add that blue class selector in here and give it a property and value
for color to be blue now when we say that we see that our color changes to blue
but you would think that the color would be green since this h1 selector comes
after the blue class selector but CSS actually puts different values onto these
different selectors element selectors are the lowest level selector which means
that they're always overridden by other selectors such as the class selector
the class selector is then the next in line and it is overridden only by the
ID selector so in order, the ID selector is the most
important then the class selector and then the element selector so if we're to
look at an example we have an ID here class and another class this selector
would have a higher specificity than this selector that had three classes that
is because there's an ID here so the ID setting has a value of 1 and then we
have two classes here the class value would have two but this was three classes
and no ID so since there's one ID on this one it would be a higher specificity so anything in here would override anything in here essentially the easiest way to look at this is to first count the number of IDs in the selector if the number of ID's is equal then go on to the number of classes in the selector if the number of classes is equal then finally go on to the number of elements in the selector if that is also equal then whichever one is defined last is going to be the one that's applied in any case if the ID number class number or element number is greater when you get to that stuff of adding that is the style that will be applied also if we have an inline style so for example in here if we put style and we set the color to be equal to black, for example, this will override everything anything defined inline like this overrides everything in your style sheet no matter what most
HTML elements have a set of default CSS that is applied to
them as you can see the h1 tag over here has to margin on the top and bottom of
it and as P tag has this black text that is because the text color is inherited
from whatever the parent is this is a parent if we style the body tag in here
and we set the color to be red this will change all the text in our entire
application to be red that is underneath the body tag unless otherwise
specified such as this blue selector here that is specifying the h1 should be
blue this is because the default value for text color is inherent which means
it inherits whatever it's parents probably it is since we've been talking about
color so much let's dive into the different ways that you can define colors in
HTML
by default, you can use these simple color selectors of red green blue pink, and various other different colors but sometimes you want to get more specific than these very generic colors to do that we'll use hexadecimal colors to set these a hexadecimal number is some more to our decimal system that goes from 0 to 9 but hexadecimal
goes from 0 to 15 to represent these numbers that are above
9 hexadecimal uses the letters ABCDE and F so if we wanted to write 15 in
hexadecimal you would write the pound sign followed by an F which would be 15
so 4 using colors this hexadecimal is broken up into 3 distinct parts of two
digits each so we have the first two digits the second two digits and the Third
two digits and each set of these digits represents a different color so the
first two digits represent red the middle two digits represent green and the
last two digits represent blue and this is on a scale from zero to double F
where double F is equal to 200 85 in decimal so the smaller the number the less
of that we have so if this was zero zero
then that means there is no red at all if this one was FF as
it is that means that we have all the most amount of blue possible so if we
wanted to get just blue we would use zero four red zero four green and then FF
four blue and if we save that we get a blue color this is a little bit
difficult to wrap your head around so there are other ways to define colors in
CSS one of those ways is using RGB RGB is just like the hexadecimal version but
it's broken out into three distinct sections so we have red which goes between
0 and 255 and this is in decimal so we can just write 255 we want entirely red
and the next value is going to be green again so we just do 255
and then the last way is going to a big blue one let's just
say that's 0 so if we save that we get yellow and then another way if you
wanted to have a partially transparent color that you could use RGB
a where then we have one more value that goes between 0
& 1 which is going to be the transparency so if it's 1 it means that it is
fully opaque and if it is 0 then it is going to be entirely transparent and
some combination in between there means that it is partially transparent this
partial transparency can also be achieved by using the EXA decimal version of
the color and we will just have an extra two digits at the end of the
hexadecimal which represents the transparency so if we wanted to do black would
do 0 0 0 0 0 0 since we have 0 bread 0 green and 0 blue and then the final
value will be the alpha value which will be between 0 and 255 again so if we
want it to be entirely opaque we would do FF save that and we get entirely
opaque black and if we wanted it to be entirely transparent just 0 0 and that
will make an entirely transparent the last way to define colors in HTML
you're using HSL which stands for hue saturation lightness
the first value hue goes between 0 and 360 and determines which color you're
going to be using will just use zero on this example saturation goes from zero
to 100% and determines how colorful this color is at 100% saturation it's as
bright as it can be and it's zero percent saturation there is no color in it is
either going to be black white or somewhere in between there so let's just use
100% in this example and then lastly lightness is going to determine how bright
that color is so at 100% lightness which is the max you're going to have an
entirely white color and at 0% lightness you're going to have an entirely black
color and anywhere in between there is going to be a different shade of that
color so let's just use 50% in this example if we say that we see that we get
red from this also HSL has an HSL a version which lets you put the Alpha value
or the transparency the end where
one is going to be entirely opaque and zero is going to be entirely transparent just like RGB and at the top next we're going to talk about the box model to demonstrate this I'm going to create a new div element and I'm going to give it a class of a box there you go and then in this style we'll style that box downwards and we'll give it a height and a width of
100 pixels padding of 20 pixels a margin of 50 pixels and a
border that is going to be 10 pixels and totally black don't worry about this
in text here this is really just to demonstrate how the box model works if we
save that Oh first let's give it a background color of red and now as you can
see over here we have this red background we have our black border but where
are this margin and padding coming from to see this let's inspect this element
in Google Chrome pull this over so that we can actually see and down here we
have the box model so we have our hundred width by 100 height which is the
actual content of our thing and then around that we have a padding of 20 and on
the left here over here you can see that it is highlighting so in blue we have
the actual content hundred by hundred in orange we have the padding which is
20 pixels on each side next comes our black border which is ten pixels around the padding and then lastly our fifty pixels a margin that go around the content and the box model works where the inside of the box model the very center is your actual content this is going to be your text image whatever it is that takes up that space is going to be there and then the very next thing is padding is essentially just spacing between your content and your border so on a button for example this is what allows you to create space between your letters of your button and the actual border around your button with the background background also goes on the padding because the background is inside of the border then we have the border which is self-explanatory whatever size you make the border is how wide the border is going to be and then lastly we have our margin which is going to be the space on the outside of the border which helps you space elements out from each other margin is meant to space elements around
other elements and padding is meant to space elements around their own border or to add spacing between the element and their actual background now that we understand the box model let's discuss the various units that we can use on this box model let's close out of this inspector widen up our view here and let's talk about first of all pixels fix is a fairly self-explanatory they're the unit that you used most the time when defining content sizes and is going to be a set fixed width on every sized screen the next unit we have is percentage is also fairly self-explanatory and we'll take up whatever percentage of the given width that the object has inside of it spared so if we make this with 10% this box will be 10% of the width of the screen since the entire width here
is how much space we have to work with the next type of unit that we have is going to be e m e m is mostly used for fonts and font-related situations like padding around fonts and it is going to be it scales off of the actual font size so if your font size is 16 pixels then one en equals 16 pixels 2e M would be 32 pixels and so on there's also another type of font or scale called REM which is very similar to e m in that it scales off of your font size but REM scales off the font size of the root of your document so the very very base level of our browser where if we went into the settings and scaled our font size it would scale off of that while e/m scales off of the parent so this box has a parent of the body so if we change the font size on this body to be
20 pixels you'll see that our actual box gets wider but if we used our e in here besides the box stays the same even if we bump this up to 200 pixels for example let's do 30 actually as you can see from that 40 still doesn't change the size and that right there is pretty much everything you need to know to get started with CSS I know we've covered a lot in this article and we're still missing a lot of what there is to do in CSS but with these simple rules you can get started and create any basic website that you want and style it using this CSS
rules in my next few articles I'm going to go and cover all
the CSS styling needed to create a modern-looking band website so if you're
interested in learning more about CSS and the different properties that are
available be sure to check out those articles when they come out also like this
Article if you enjoyed it and subscribe for more similar content and let me
know down in the comments below why you decided you wanted to learn CSS and
what you're going to create with it thanks
Nice
ReplyDelete